9 трендов веб-дизайна лендингов и сайтов в 2021 году

Тренды веб-дизайна, как и мода, со временем меняются. Некоторые из них задерживаются надолго благодаря простоте внедрения и хорошему пользовательскому опыту (UX, user experience). Другие — нет. И не всегда легко предугадать, какие из них будут преобладать.

В этой статье мы рассмотрим основные тренды веб-дизайна на 2021 год, а также перечислим признаки, характеризующие отличный лендинг или веб-сайт. Надеемся, эта информация вдохновит вас на создание потрясающих, уникальных дизайнов.

Содержание статьи

1. Hero-блок с преобладанием текста
2. Многослойные элементы и вырезанные фотографии
3. Анимация при скроллинге
4. Пастельные и землистые оттенки
5. Минималистичные элементы
6. Органические элементы и незатейливые рисунки
7. Пользовательский контент
8. 3D-иллюстрации
9. Неоморфизм
Признаки отличного дизайна в 2021 году

1. Четкая цель
2. Интуитивно понятная навигация
3. Адаптивность и скорость
4. Соблюдение лучших принципов дизайна
5. Доступность

Заключение

1. Hero-блок с преобладанием текста 

Жирные шрифты без засечек популярны уже на протяжении нескольких лет, и этот тренд продолжает развиваться.

Сегодня мы видим все больше hero-блоков, где главное изображение или видео полностью заменены визуально доминирующим текстом. От логотипов с названиями брендов до каруселей на домашней странице, вот несколько реальных примеров hero-блоков с преобладанием текста:

Solstice

Marx

Basic Space

Если вам понравился этот тренд и вы хотите попробовать реализовать его на своем лендинге, вам не нужно открывать сервис Google Fonts, чтобы подключить понравившиеся шрифты — теперь они подключаются прямо из редактора LPgenerator.

Все, что нужно сделать — это выбрать подходящий шрифт из наглядной галереи, нажать на кнопку подключения и использовать его для новых или уже размещенных на лендинге текстов.

Читайте также: Может ли шрифт сделать ваш лендинг уродливым?

2. Многослойные элементы и вырезанные фотографии

Наслоение элементов с частичным перекрытием и асимметричными макетами — еще одна большой тренд веб-дизайна в 2021 году. При этом подходе используются шахматные сетки (staggered grids) с частично перекрывающимися элементами (текст, фотография, фоновые формы). Это более элегантная форма брутализма (Brutalism), где предпочтение отдается грубому, смелому дизайну. Популярность этого тренда растет, поскольку он создает динамичный и практический опыт для онлайн-посетителей.

LondonAlley

Распространенный прием наслоения предполагает использование фотографии, которая, как будто бы, прорывается сквозь рамку. Уникальность этого тренда связана с тем, что перекрывающиеся слои создают иллюзию глубины и объема.

Dribble

Этот прием хорошо работает, когда вы хотите разместить несколько элементов на веб-сайте и при этом не перегрузить общий вид страницы.  

Rudolph Care

Чтобы убедиться, что вы правильно применяете эту тему дизайна, вы можете постепенно убирать элементы, используя эффект затухания (fading). Также можно использовать тени (drop shadows) для усиления определенных элементов дизайна.

Читайте также: 50 бесплатных ресурсов с графикой для ваших лендингов

3. Анимация при скроллинге

Часто для привлечения внимания посетителей в веб-дизайне используют динамические элементы, например, анимацию при скроллинге (scroll animation).

При прокрутке страницы вниз посетитель может наблюдать различные движения, эффекты и переходы элементов. «Эта анимация не только красиво выглядит, но и помогает вовлечь пользователей и сделать веб-сайт более запоминающимся», — отмечает журнал Qode.

Чтобы реализовать данный тренд, вам не нужна анимационная студия. Небольшие фрагменты анимации на лендинге помогут поддержать текст и изображения и выделят вас среди конкурентов.

Web Stories on Google

Несколько советов:

• 
  Сохраняйте движение на небольшом участке.
• 
  Обеспечьте взаимодействия на условиях пользователя: предоставьте очевидные элементы управления, отвечающие за воспроизведение / паузу / остановку взаимодействий и движений.
• 
  Убедитесь, что анимированные элементы помогают подчеркнуть историю, а не отвлекают от важного текста.

Читайте также: Практические советы по улучшению юзабилити лендингов при помощи анимации

4. Пастельные и землистые оттенки

Этот тренд дизайна проводит параллели с миром моды, где приглушенные цвета сейчас особенно популярны. В 2021 году изюминкой веб-дизайна станут пастельные и землистые оттенки.

Monastery Made

Мягкие, естественные цвета приятны для глаз и вызывают чувство спокойствия. Особое внимание на них стоит обратить компаниям, работающим в сфере красоты и здоровья.

Humes Supernatural

Читайте также: Как использовать психологию цвета для увеличения конверсии?

5. Минималистичные элементы 

Принцип «меньше — значит больше» (less is more) сегодня как никогда применима к миру дизайна. В 2021 году у людей после сложного 2020-го полно забот, как домашних, так и рабочих, а упрощенный дизайн поможет создать ощущение легкости и простоты.

Соедините это с постоянно сокращающейся продолжительностью концентрации внимания, и вы обнаружите, что скорость сайта является ключом к быстрой передаче вашего сообщения. Чтобы время загрузки оставалось низким, отдайте предпочтение минималистичному дизайну и выберите конструктор сайтов, предлагающий веб-страницы с быстрой загрузкой, например редактор LPgenerator.

Death to the Stock Photo

Вы можете дополнить чистый макет уникальными деталями — рисованным шрифтом и узорами, короткой анимацией, или яркими деталями.

Читайте также: Как привнести нотки скандинавского дизайна в ваш проект

6. Органические элементы и незатейливые рисунки

«Человеко-ориентированный (human-centered) подход к дизайну в последнее время переживает возрождение, и лучший пример этому — рисованные элементы», — говорится в статье PopArt Studio на Medium. com. «Будь то карикатурные иллюстрации, нарисованные иконки или рукописные надписи, технологии последних лет направлены на обеспечение эмоций и индивидуального подхода».

Skillshare

Читайте также: 7 советов по созданию рисованной анимации

7. Пользовательский контент

Как следует из названия, пользовательский контент (user-generated content, UGC) — это контент, полностью созданный вашей пользовательской базой или клиентами.

«Сегодня ведущие мировые бренды все чаще проводят кампании пользовательского контента, чтобы обеспечить эффективность своих кампаний и продвигать свои продукты», — говорится на wedevs.com.

Пользовательский контент — это лучшее социальное доказательство (social proof) и отличный способ продемонстрировать отзывы, фотографии и видео клиентов, использующих товары.

Shein

В конце концов, все сводится к доверию потребителей. Отчет Forrester показал, что 70% взрослого населения США доверяют рекомендациям других людей (онлайн) гораздо больше, чем заявлениям брендов.

HarvestHosts

Вот некоторые преимущества пользовательского контента:

• 
  Он абсолютно уникален — ни у одной другой компании не будет такого контента, потому что клиенты создают его сами.
• 
  Он демонстрирует открытость для сообщества — пользовательский контент открывает цикл обратной связи и показывает, что ваш бизнес заботится о клиентах.
• 
  Как правило, вам не нужно платить за него (или это выходит гораздо дешевле) — накладные расходы на создание пользовательских изображений отсутствуют.
• 
  Он внушает доверие — клиенты верят тому, что говорят другие.
• 
  Вы добавляете социальное доказательство. С помощью пользовательского контента вы доказываете, что ваш продукт или услуга «нравится» публике в реальной жизни.

Читайте также: 3 шага к хорошему пользовательскому контенту

8. 3D-иллюстрации 

Еще один захватывающий тренд веб-дизайна в 2021 год — это использование трехмерных элементов. Очевидно, что данный тренд подойдет не каждой компании и бренду. Но если вы позиционируете себя как смелая компания, использование трехмерных элементов поможет заинтересовать аудиторию, и, в конечном итоге, удержать посетителей на ваших страницах.

Pitch

Campo alle comete

«Глубина создает ощущение реализма, качества, которое особенно полезно для электронной коммерции, где трехмерные изображения могут использоваться для показа товаров под разными углами или в применении», — сообщает NYC Design на Medium.com.

Читайте также: 3D баннеры — эволюция дисплейной рекламы

9. Неоморфизм

Неоморфизм (neumorphism ), или неоскевоморфизм (neo-skuomorphism), — это новый подход к дизайну интерфейсов, который также применим к элементам веб-сайта. Для него характерен минималистичный дизайн, белый фон, тени и яркими пятна.

Web Design Ledger

Он основан на скевоморфном дизайне (skeuomorphic design), в котором мобильные приложения имитируют объекты реального мира. «Его эстетика характеризуется минималистичным и реалистичным пользовательским интерфейсом. Это своего рода новый взгляд на скевоморфизм (skeuomorphism) — отсюда и название», — говорит CSSdesign.com.

Work by David Ofiare

Более спокойные реалистичные элементы помогают оживить страницу. Вы можете применить несколько способов, например:

• 
  Выделить текстовые элементы с помощью тени
• 
  Выделить призыв к действию (call to action), применив к нему тень
• 
  Выделить hero-изображения за счет добавления тени на белом фоне

Читайте также: Материальный дизайн: другой, но не лучший

Признаки отличного дизайна в 2021 году

Существует очень много принципов дизайна, отделяющих отличные лендинги и сайты от просто хороших, но на самом деле все их можно сузить до нескольких идей.

1. Четкая цель

Посетителю должно стать понятно, кто вы и чем занимаетесь, уже на второй секунде нахождения на вашем сайте. Он должен легко находить нужную ему информацию, будь то статья в блоге или страница с ценами. Важно, чтобы каждый элемент дизайна так или иначе поддерживал эту цель.

2. Интуитивно понятная навигация

Вся важная информация о вашем бизнесе должна находиться на расстоянии одного клика. Посетитель не должен тратить время на поиск нужной ему информации. Ключом к этому является интуитивная навигация, а именно навигационные цепочки (breadcrumbs) и иерархическая структура веб-сайта.

3. Адаптивность и скорость

Несмотря на то что 50% онлайн-трафика поступает с мобильных устройств, таких как смартфоны и планшеты, многие компании просто не учитывают этого при создании своих сайтов. Задумайтесь о том, сколько раз вы покидали сайты из-за того, что они плохо работали на вашем смартфоне, и вы быстро поймете, что это огромная упущенная возможность.

Чтобы узнать, адаптируется ваш сайт под мобильные устройства или же требуется небольшая доработка, воспользуйтесь инструментом проверки оптимизации для мобильных от Google. Все, что вам нужно сделать, это ввести свой URL-адрес, и Google оценит, насколько удобен ваш сайт для пользователей смартфонов. Он оценивает все, от скорости мобильной страницы до емкости экрана.

Мы в LPgenerator выступаем за создание отдельного мобильного лендинга, а не адаптацию версии для ПК. Это означает полную переработку основной страницы: выбрать лишь «самое-самое» и строго следовать канонам — один призыв к действию, минимальный набор текста и изображений.

4. Соблюдение лучших принципов дизайна

Текст, цвета, элементы дизайна, скроллинг, иллюстрации и фотографии — все это влияет на общее «восприятие» вашего веб-сайта. Следовать правильным принципам дизайна важнее, чем следовать трендам.

5. Доступность

Убедитесь, что ваш сайт учитывает потребности всех типов посетителей, независимо от их возможностей. Правильный контраст повысит доступность сайта для людей с любым зрением. Добавление альтернативного текста (alt text) к изображениям поможет посетителям, использующим программы чтения с экрана, получить звуковое описание (это также может помочь улучшить SEO!). Учитывайте все эти нюансы, и ваши дизайны непременно станут более доступными и инклюзивными.

Читайте также: Все, что вам нужно знать, о принципах и типах дизайна

Заключение

Некоторые из перечисленных выше трендов могут показаться вам странными или даже неуместными для вашего бренда. Это нормально. Это не означает, что ваша компания не следует трендам. В действительности, иногда лучше этого не делать. Даже не следуя этим трендам, вы по-прежнему можете иметь красивые, современные и высококонвертирующие лендинги.

Высоких вам конверсий! 

По материалам: leadpages.com Изображение: freepik.com

08-04-2021

Hero-изображения в современном дизайне веб-сайтов

Пусть Hero-images, несмотря на название, не бегают по крышам и не сжимают небоскребы, но в дизайне они выполняют довольно важную функцию: они делают сайты приятнее. Использование Hero-изображений делает страницу красивее и мотивирует пользователя просмотреть и остальное содержимое страницы, где в свою очередь расположена информация, которую вы хотите ему передать.

Крупные заголовки

Hero-изображения отлично сочетаются с крупными заголовками. В качестве изображений зачастую используются фотографии, которые сделаны специально для контента этого сайта. Но со временем дизайнеры начали использовать для этих целей векторные иллюстрации, затем анимацию и даже видео.

На самом деле, трудно найти что-либо, что опишет сайт лучше, чем фотография. По статистике, именно она мотивирует пользователя ознакомиться с сайтом более подробно, изучить его контент. Это отлично демонстрирует сайт фотографа Andrew Elsass.

На его домашней страничке используется большой полноэкранный бэкграунд с его же фотографией. Цвета подобраны очень подходящие, создавая гармоничную картину. Общий вид сайта вызывает доверие, мотивирует ознакомиться с контентом ближе. Ознакомившись с сайтом, вы сможете заметить, что все страницы имеют свои небольшие фоновые изображения. Например, на странице «About me» используется не та его фотография, что на главной.

Трендовые Hero-картинки отлично сочетаются со многими стилями дизайна сайтов.

Чтобы разнообразить свое представление о явлении, взгляните на Cleverbird Creative. Их домашняя страница включает полноэкранное фоновое изображение, которое растягивается в зависимости от разрешения вашего монитора. Затем, в зависимости от того, в какой части сайта вы находитесь, фоновое изображение будет меняться. Это еще одна техника, использующая большие фоновые изображения, но она сильнее направлена в сторону разогревания любопытства у пользователя.

Дизайн одностраничного сайта

Крупные полноразмерные фоновые изображения и hero-изображения могут быть использованы довольно эффективно в дизайне одностраничного сайта. Обычно на лендингах или паралакс-сайтах мало контента для отображения. Немного добавить визуального веса странице смогут те самые крупные бэкграунды и hero-изображения.

Gladz также отлично подойдет в качестве примера, потому что он использует несколько разных hero-изображений. Самое верхнее изображение страницы — полноэкранное, на нем — навигация фиксированной ширины. Для разделов сайта используются другие изображения, адаптирующиеся под ширину экрана.

Галереи

Некоторые дизайнеры предпочитают создавать динамику на Hero-image сайтах. Наверняка вы видели или еще увидите штуки наподобие сменяющих друг друга бэкграундов, и прочих подобных. Вы можете использовать для динамичных бэкграундов и хедеров любые изображения — например, фотографии сотрудников, продуктов или вашего офиса.

В качестве хорошего примера можно привести Matter Of Form (брендинговое агентство). На этом сайте полноэкранное изображение, находящееся на фоне — соответствует тому разделу, который сейчас открыт. Это увлекает пользователя и привлекает внимание к возможности переключения между разделами и, как следствие, к просмотру всего контента сайта.

В качестве альтернативного примера приведем главную страницу Jansport. com. Они не стали использовать полноэкранные изображения, все же включили в дизайн слайдшоу из hero-изображений. Их хедер служит четкой цели — пригласить посетителя ознакомиться с их продукцией и представляет из себя ничто иное, как фотографию этой самой продукции. Этот метод довольно популярен и эффективен.

Слайдер автоматически переключает изображения, но посетителю предоставляется возможность переключать изображения самостоятельно с помощью определенных элементов интерфейса (стрелочки / номера изображений и т д.) Это ставшее уже традицией решение, используемое в дизайне коммерческих сайтов (интернет-магазинов, сайтов услуг и прочих).

Некоторые могут не рассматривать этот пример как полноценный hero-image, потому что слайдер на этом сайте не занимает всей ширины, или занимает недостаточно места по высоте. Да, возможно изображение не такое большое. Но, тем не менее, оно слишком сильно привлекает внимание, обращает взгляд на себя. Это хороший пример дизайна.

Как создать блок героев в WordPress

Эта статья посвящена созданию блока героев или «раздела героев» в редакторе блоков WordPress. Главный раздел веб-сайта, как правило, представляет собой большой баннер или полноразмерное изображение с текстом на нем, предназначенное для того, чтобы побудить посетителей остаться на странице и просмотреть информацию, нажать кнопку или подписаться на что-либо.

Разделы Hero созданы большими и привлекающими внимание. С помощью правильных плагинов и тем вы можете создавать большие разделы, привлекающие внимание. Существуют даже специальные шаблоны для этого типа дизайна. Однако, если вы не хотите использовать плагин и вас устраивает уже имеющаяся у вас тема, вы можете легко смоделировать раздел героя с помощью собственного блока героя прямо в редакторе Гутенберга.

• Создание раздела героев с помощью блока обложки
• Создание блоков героев с помощью блока изображения
• Использование тем с разделами героев внимание ваших посетителей. Для вашего раздела героя вы можете попробовать блок обложки. Блок обложки дает вам фоновое изображение с текстом поверх него.

  Основные разделы обычно содержат большое полноразмерное изображение. Ширина изображения в блоке обложки будет соответствовать разделу контента вашей темы. Так что это может быть или не быть полной ширины. Тем не менее, блок обложки по-прежнему можно использовать для создания привлекающей внимание части вашего поста или страницы.

  1. Войдите в панель управления WordPress
  2. Выберите сообщение для редактирования или создания нового контента
  3. Используйте знак плюс, чтобы создать новый блок
  4. Выберите Обложка
  5. Выберите изображение для вашего блока обложки и заполните его текст

  Обратите внимание, что блок обложки предоставляет множество возможностей для настройки. Например:

  Нажав на изображение, вы можете:

  • Создать фиксированный или повторяющийся фон
  • Настройка наложения цвета
  • Применение эффекта градиента
  • Выбор фокуса
  • Настройка непрозрачности
  • Предоставление «альтернативного» текста

  Для текста:

  • Настройка размера шрифта 9000 8
  • Настройка типографики, включая регистр букв и интервалы
  • Изменить цвет текста

  В приведенном ниже основном блоке используется фоновое изображение с примененным черно-белым градиентом и серый текст с рамкой:

  Преимущество использования обложки заключается в том, что вы можете изменить текст или изображение по мере необходимости. , поэтому вам не нужно создавать совершенно новый образ для каждого обновления.

  Создание блоков-героев с использованием блока изображения

  Блок-героем также может быть просто большое изображение, которое вы используете в своем сообщении. Вы можете использовать графическую программу, чтобы создать изображение, а затем поместить текст в изображение для вашего главного блока. Использование графической программы может быть помехой, но если она у вас есть, она может дать вам безграничные возможности для создания пользовательской графики для вашего контента.

  Графические программы могут стоить до сотен долларов, но вы также можете найти бесплатные или недорогие приложения, которые могут дать вам творческую свободу для создания того, что вам нужно для сайтов WordPress сейчас и в будущем. Примеры бесплатных графических программ включают Adobe Express, Canva и Gimp.

  Изображения, которые можно использовать в качестве главного блока, могут отличаться по размеру в зависимости от используемой темы или ваших предпочтений. В Adobe Express было создано (бесплатно) следующее:

  Adobe Express и Canva могут предоставить вам тысячи шаблонов и готовых изображений, которые вы можете настроить для своего использования. Они также включают варианты премиум-версии, для которой обычно требуется ежемесячная подписка. Если вы хотите избежать всей рекламы, вы можете выбрать бесплатное программное обеспечение, такое как Gimp. Единственным его недостатком является его сложность, но он обеспечивает большой контроль.

  После того, как вы создали изображение, очень просто добавить блок изображения в качестве основного блока в свой контент:

  1. Отредактируйте свой контент или создайте новый пост.
  2. Выберите, где вы собираетесь поместить блок героя в своем контенте, затем нажмите + знак , чтобы добавить блок.
  3. Разместите блок, если необходимо, затем загрузите созданное изображение. Здесь вы можете увидеть пример блока героя, добавленного в качестве блока изображения.

  Использование тем с разделами героев

  Как упоминалось выше, существует множество тем WordPress, которые позволяют создавать полноразмерные разделы героев. Ниже мы рассмотрим три из этих тем. Вы можете использовать эти темы на своем сайте или черпать из них вдохновение.

  Astra

  Тема Astra поставляется с бесплатной версией, которая позволяет создавать полноразмерный макет (в области содержимого) несколькими щелчками мыши. Это может добавить больше объема вашим разделам героев, если вы используете метод блока укрытия, описанный выше. Но если вы хотите пойти дальше, аддон pro позволяет вам создать специальный раздел героев, подобный тому, который вы видите ниже:

  Учитывая, что выделенный раздел заголовка доступен только при платном обновлении, вам придется решить, стоит ли оно того и соответствует ли оно вашему бюджету.

  Neve

  Тема Neve, являющаяся бесплатной альтернативой Astra, позволяет создавать полноразмерные разделы на страницах. Заголовок страницы будет текстом поверх изображения, а избранное изображение будет использоваться в качестве фона для главного раздела. Важно отметить, что это встроено в тему и не является блоком Гутенберга.

  Crio

  Тема Crio также предоставляет полноразмерный главный раздел, используя заголовок страницы для текстового элемента и принимая избранное изображение в качестве фона для раздела. Этот главный раздел будет отображаться под основным заголовком и областью навигации сайта.

  ---

  Независимо от того, решите ли вы использовать свой собственный блок героев или выберите тему, которая поддерживает раздел героев, это отличный способ привлечь внимание вашего читателя и убедить его продолжить чтение. Использование сильных слов в заголовках может оказать невероятное влияние на то, как ваши читатели реагируют на ваш контент. Сочетание этих мощных фраз с вызывающими воспоминания изображениями мотивирует их еще больше.

  Нажмите здесь, чтобы узнать больше об использовании блоков в WordPress.

  Ищете другие руководства? У нас есть более 400 статей WordPress How To, которые помогут вам!

  Объяснение: блок героев | Справочный центр моркови

  Написал peterhart    Последнее обновление 30 марта 2023 г.

  Ни для кого не секрет, что баннер с призывом к действию помогает привлечь больше лидов. Вот почему все сайты Carrot имеют блок героев, встроенный в баннер ваших сайтов. Это специальный блок, разработанный и протестированный, чтобы помочь вам привлечь больше потенциальных клиентов. У вас будет главный блок на главной странице вашего сайта, и вы можете добавить блок на любую страницу вашего сайта.

  Этот раздел вызывает доверие! Блок героя включает в себя изображение героя (фоновое изображение) и форму. Локальное изображение найдет отклик у посетителей вашего сайта и поможет установить взаимопонимание быстрее, чем общее изображение, которое не указывает на ваш район или недвижимость, которую вы покупаете и продаете. Мы рекомендуем всем обновить главное изображение и контент своей главной страницы, чтобы выделиться еще больше.

  В этом уроке мы рассмотрим, как добавить главный блок и внести изменения в содержимое, форму и общий макет. Давайте начнем!

  Шаг 1. Нажмите «Контент», чтобы получить доступ к своим страницам.

  Шаг 2. Нажмите на страницу, чтобы обновить или добавить свой геройский блок. Это единственное, что мы установили с изображением героя по умолчанию. Это должна быть страница, на которую нажимают, если вы хотите отредактировать главное изображение главной страницы. На любую страницу можно добавить главный блок, имитирующий главную страницу. Наведите указатель мыши на страницу, на которую вы хотите добавить это, и нажмите кнопку «Изменить» или щелкните заголовок, чтобы открыть страницу для редактирования.

  Шаг 3: *Добавить блок героя (если ничего не установлено)

  Щелкните кружок со знаком плюс, чтобы добавить блок героя. Вы можете найти его, используя поле поиска или прокручивая, пока не найдете главный блок в категории «Элементы макета».

  *Примечание* В основном блоке будет изображение и текст по умолчанию. Это должно показать вам, как будет выглядеть блок. Шаги ниже помогут вам обновить изображение и добавить форму поверх основного изображения.

  Шаг 4. Нажмите внутри блока Hero, чтобы внести изменения

  Дизайн вашего героя определяется стилем, который вы выбрали в разделе дизайна. Нажмите здесь для получения дополнительной информации, если вы хотите внести изменения в общий дизайн.

  Обратите внимание, что в скобках указаны данные, указанные вами в настройках вашего сайта. Несмотря на то, что вы видите , ваши посетители увидят город, который вы указали при регистрации. Вы можете изменить это в любое время, обновив настройки.

  Шаг 5: Настройте параметры стиля вашего героя

  Вы увидите три варианта стиля вашего героя. * Для максимального количества конверсий в форме вашего героя должно быть не более 3 полей.

  1. Колонки: текст находится слева, а форма справа от героя
  2. В стопку: текст находится над формой
  3. В строке: текст находится над формой и полями формы ( поля) находятся на одной строке (лучше всего для 2 или менее полей)

  Шаг 6: Обновите фоновое изображение и форму

  Вы можете использовать локальное изображение для главного раздела вашей домашней страницы.