Как разработать раздел героев для вашего сайта (гид 2025)

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

Что такое раздел героев и зачем вам один?

Раздел героев вашего сайта не только в вершине страницы; Это ваш первый шанс произвести хорошее впечатление. Здесь вы привлекаете внимание, отображаете свое основное сообщение и сразу же показываете посетителям, почему они должны оставаться вокруг. Отличная секция героя зацепит их за считанные секунды, направляя их глубже на ваш сайт с четкими призывами к действию и подготовлсью основы для всего пользовательского опыта (UX). Вот почему так важно сделать это правильно.

Вот несколько вещей, которые нужно помнить:

Первые впечатления имеют значение

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

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

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

Он передает ваше сообщение

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

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

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

Это может стимулировать конверсии

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

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

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

Каковы основные элементы эффективной секции героев?

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

Убедительный заголовок

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

Подзаголовок или вступительный абзац

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

Ясный призыв к действию

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

Высококачественные образы

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

Фон, который вызывает

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

Примеры секций героя (и почему они работают)

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

Пример 1: Программное обеспечение ИИ

Наш первый пример для компании с разработкой программного обеспечения AI. У него есть несколько сильных сторон, в том числе:

1. Четкий заголовок и подзаголовок: будущее Divi - это краткий, интригующий заголовок, который передает фокус. Искусственный интеллект подзаголовок обеспечивает контекст и современное, передовое ощущение.
2. Визуальная привлекательность: абстрактный, футуристический фон с светящимися элементами привлекает внимание и имеет отношение к теме ИИ и будущего.
3. Сильный контраст: белый текст на фиолетовом фоне обеспечивает превосходную читаемость и выделяет сообщение.
4. Четкие призывы к действию: присоединяйтесь к Divi сегодня и бесплатно демонстрация являются прямыми и ориентированными на действие, сообщая пользователю именно то, что он может сделать, и что они получат, когда нажимают. Наличие двух CTAS предлагает варианты, которые интересуют пользователю.
5. Это современное: общий дизайн, цветовая схема и образы вызывают чувство инноваций и дальновидного мышления, что соответствует теме ИИ и будущих тенденций.

Пример 2: Поставка домашних животных

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

1. Четкий заголовок: Pet Supplies & Monthly Box Подписки сообщают о том, что делает компания, что делает заголовок простым и понятным.
2. Direct CTA: Shop Online - это краткий CTA, поощряющий посетителей покупать свою продукцию.
3. Визуально релевантное изображение: Основное изображение героя показывает корм для домашних животных, укрепляя природу бизнеса. Это также добавляет цвет цвета, чтобы нарисовать глаза пользователя.
4. Чистый дизайн: макет не загроможден, современен и прост. Белый фон и смелый текст обеспечивают хороший контраст и читабельность.

Пример 3: Вода некоммерческая организация

В этом примере герой изображает некоммерческий бизнес воды. Хотя это просто, герой эффективен, потому что:

1. У него есть четкое брендинг: название бизнеса и сопровождающий слоган сообщают о миссии организации.
2. Это визуально привлекательно: большое фоновое изображение океана создает сильный визуальный вид и сразу же соединяется с темой воды.
3. Чистый CTA: кнопка «Сделать пожертвование» является заметной, и пользователи используют текст, ориентированный на действие, чтобы поощрять взаимодействие.
4. Использование статистики: выделение собранных денег дает доказательства влияния благотворительности и укрепляет доверие к бренду.
5. Гармоничный макет: стиль цветового блока представляет информацию структурированным и эстетически приятным способом, с четкими разделами для различных аспектов благотворительности.

Пример 4: Недостаток

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

1. Краткий заголовок: Найдите дом своей мечты, а Divi обращается к целевой аудитории и представляет ценность.
2. Сильные визуальные эффекты: монохроматическое фоновое изображение прекрасно контрастирует с зеленым CTA, выделяя его.
3. Clear CTAS: в разделе Hero есть четыре сильных CTA для пользователей, чтобы взаимодействовать с веб -сайтом.
4. Современный дизайн: минималистский дизайн и темная цветовая схема создают сложный и современный вид.

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

Почему Диви - отличный выбор для разработки секции героя

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

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

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

В дополнение к тысячам макетов, Divi предлагает еще один простой способ создать полный веб -сайт: Divi Quick Sites. Вы можете создать полный веб -сайт менее чем за две минуты, используя стартовый сайт или генеративный ИИ, благодаря интеграции с ассистентом Divi в области дизайна Divi AI. Все стартовые и сгенерированные веб -сайты поставляются со всеми основными страницами, шаблонами для создания тем, глобальными стилями и всеми настройками WordPress, настроенные для вас.

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

Получите диви

Как спроектировать раздел героев с Divi

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

Выберите пакет макета

Создайте новую страницу на своем веб -сайте WordPress, установите Divi и выберите «Выберите готовый макет при загрузке новой страницы». Затем нажмите «Обзор макеты», чтобы просмотреть выбор готовых макетов.

Divi позволяет вам искать или фильтровать через категории, чтобы найти макет, который вы хотите добавить. Есть более десятка категорий на выбор, поэтому поиск той, которая соответствует вашим потребностям, будет простым. Для этого поста мы выберем пакет макетов недвижимости (пример № 4 выше) и изменим его для юридической фирмы.

Нажмите на пакет и выберите макет целевой страницы . Нажмите кнопку «Используйте эту макет» , чтобы установить пакет.

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

Внесите изменения дизайна в раздел героев

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

Нажмите на выпадающую фон и выберите вкладку «Фоновое изображение».

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

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

Перепишите текст с Divi AI

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

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

Появится диалоговое окно с несколькими параметрами. Выберите написать с ИИ .

Когда настройки появятся, тип контента уже будет выбран для вас. Скажите Divi AI , о чем вы пишете (в данном случае, семейная юридическая фирма) и выберите «Нет контекста» в области дополнительного контекста . Divi AI работает лучше всего, когда он понимает, что вам нужно, поэтому при написании своей подсказки, будьте описательными.

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

Добавить призыв к действию

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

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

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

Как создать раздел героев с Divi AI

Теперь, когда вы видите, как легко создать раздел героев, используя пакет Divi Mayout, давайте погрузимся в его создание с Divi AI. Мы показали, как Divi AI может генерировать текст, но он также может генерировать изображения, код, разделы, веб -страницы и полные веб -сайты (подробнее об этом позже).

Создание нового героя диви

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

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

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

Чтобы сгенерировать раздел героев с ИИ, наведите на страницу и нажмите на значок синего + .

Выберите «Создать раздел» с ИИ, когда появляется диалоговое окно.

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

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

Примеры героя Divi AI

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

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

Создайте секцию героя для ресторана Pizza. Дайте ему яркие цвета, смелый заголовок и фоновое изображение вкусной пиццы.

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

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

Получите Divi AI

Испытать лучшие Divi, которые может предложить с Divi Pro

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

Divi Pro приходит с:

• Divi AI: генерируйте неограниченные изображения, текст, код, разделы, веб -страницы и полные веб -сайты с помощью текстовой приглашения.
• Divi Dash: Управляйте всеми вашими плагинами и темами, отслеживайте всех своих клиентов и получайте ценную информацию о том, как работает ваш сайт - все в одной удобной панели панели.
• Divi Cloud: попрощайтесь с грязными файлами json и бесконечным копированием и вставкой! С всего лишь нескольких кликов вы можете хранить и повторно использовать свои любимые макеты Divi в облаке.
• Divi Teams: Легко сотрудничать с вашей командой и предоставлять им доступ ко всем удивительным инструментам Divi, которыми вы владеете.
• Divi VIP: Получите поддержку на уровне предприятия менее чем за 30 минут или меньше, 24/7, 365 дней в году.
• Divi Marketplace Credits: Получите кредиты в размере 50 долларов США , чтобы исследовать рынок Divi и найти удивительные детские темы, макеты и расширения для перегрузки вашего веб -сайта.

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

Получите диви

Сделайте длительное первое впечатление с Divi

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