Советы по дизайну изображений героев и как их использовать в Divi

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

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

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

Пример, который мы покажем вам, шаг за шагом, будет выглядеть так:

Выбор правильного изображения

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

Актуальность

Для начала найдите изображение, которое соответствует тому, чему посвящен ваш сайт. Это первое, что они увидят на вашем сайте и свяжут его с ним.

Чтобы найти релевантность, задайте себе два вопроса:

• Какую основную добавленную стоимость предлагает мой продукт / услуга / веб-сайт?
• Какое изображение отражает эту добавленную стоимость?

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

Некоторые из наиболее распространенных стилей изображений героев основаны на одной (или нескольких) из следующих вещей:

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

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

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

Высокого качества

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

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

Мы рекомендуем использовать изображение с минимальной шириной 1920 пикселей, как указано в нашем полном руководстве по использованию изображений в Divi.

Рассмотрим полноэкранный режим

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

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

По центру или не по центру

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

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

Создать контраст

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

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

Попробуйте вместо этого использовать фоновое видео

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

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

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

CTA, который имеет значение

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

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

При разработке CTA учитывайте следующее:

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

Приступим к созданию (Рабочий стол)

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

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

Выберите раздел

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

Параметры фона

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

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

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

Затем мы хотим наложить на изображение, которое мы используем, наложение цвета. Это восходит к совету «Создать контраст», который мы обсуждали выше. Мы добавим некоторую темноту к изображению, чтобы создать лучший баланс с текстовыми модулями и кнопочным модулем, которые мы будем использовать.

В большинстве случаев используется серый цвет наложения. Это самый стандартный цвет для использования в качестве наложения, который не сильно меняет цвета изображения. Используемый нами цветовой код - «#BFBFBF».

Затем вернитесь к фоновому изображению и примените смешение фонового изображения. В этом случае мы будем использовать «Умножить». Также измените положение фонового изображения на «Вверху слева».

Настройки строки

Двигаясь дальше, мы собираемся добавить строку с полной шириной в созданный раздел. Откройте настройки и добавьте «10%» к верхнему отступу в подкатегории «Интервал» на вкладке «Дизайн».

Затем перейдите на вкладку «Дополнительно» и отключите строку для телефона и планшета в подкатегории «Видимость».

Первый текстовый модуль

После этого мы добавим первый текстовый модуль. Откройте настройки и введите заголовок, который хотите использовать, в поле содержимого на вкладке «Содержимое». Перейдите на вкладку Дизайн и внесите следующие изменения в подкатегорию Текст:

• Ориентация текста: вправо
• Шрифт текста: лобстер
• Размер шрифта текста: 80
• Цвет шрифта текста: #FFFFFF
• Высота текстовой строки: 1,7 мкм

Прокрутите ту же вкладку вниз, добавьте «25%» к верхнему полю и «-12%» к правому полю в подкатегории «Интервал».

Второй текстовый модуль

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

• Ориентация текста: вправо
• Шрифт текста: Монтсеррат
• Размер шрифта текста: 15
• Цвет шрифта текста: #FFFFFF
• Высота текстовой строки: 1,7 мкм

Прокрутите ту же вкладку и добавьте «4%» к верхнему полю и «-12%» к правому полю в подкатегории «Интервал».

Кнопочный модуль

Продолжите, добавив модуль кнопок и набрав текст кнопки. Затем перейдите на вкладку «Дизайн» и измените выравнивание кнопок на «Правое».

Прокрутите ту же вкладку и внесите следующие изменения в подкатегорию кнопок:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 20
• Цвет текста кнопки: #FFFFFF
• Цвет фона кнопки: # E02B20
• Ширина границы кнопки: 2
• Цвет границы кнопки: # E02B20
• Радиус границы кнопки: 3
• Шрифт кнопки: Montserrat
• Стиль шрифта кнопки: заглавная

Версия для мобильных устройств и планшетов

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

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

Настройки раздела

Откройте настройки своих разделов и отключите раздел для рабочего стола в подкатегории «Видимость» вкладки «Дополнительно».

Первый текстовый модуль

Перейдите на вкладку Дизайн и внесите следующие изменения в подкатегорию Текст:

• Ориентация текста: по центру
• Размер шрифта: 50

Прокрутите ту же вкладку вниз, сотрите правое поле и измените верхнее поле на «20%».

Второй текстовый модуль

На вкладке «Дизайн» второго текстового модуля измените ориентацию текста на «Центр».

Прокрутите ту же вкладку вниз, сотрите правое поле и оставьте верхнее поле.

Кнопочный модуль

И последнее, но не менее важное: откройте модуль кнопок и также измените выравнивание кнопок на «Центр».

Последние мысли

В этом посте мы рассмотрели несколько советов по дизайну, которые вы должны учитывать при создании главного изображения / раздела. Мы также поделились примером раздела героев, который следует этим советам. Если у вас есть какие-либо вопросы по этой теме или у вас есть предложения, обязательно оставьте комментарий в разделе комментариев ниже!

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!