Как создать секцию приглашенного докладчика с эффективным призывом к действию в Divi

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

Но прежде чем мы начнем, вот краткий обзор окончательного дизайна.

Sneak Peek

А вот бонусный эффект наведения, который я вам тоже покажу.

Давайте начнем!

Подпишитесь на наш канал Youtube

Построение базовой структуры и содержания

Если вы еще этого не сделали, создайте новую страницу и разверните Divi Builder для построения интерфейса.

Добавьте новый раздел со строкой из одного столбца.

Добавьте текстовый модуль в строку со следующим Контентом:

<h2>Guest Speaker</h2>

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

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

В первом столбце строки добавьте модуль человека.

Обновите содержимое модуля Person следующим образом:

Имя: [пусто]
URL профиля Facebook: [добавьте «#» пока]
URL профиля Twitter: [добавьте «#» пока]
URL профиля LinkedIn: [добавьте «#» пока]

Для описания добавьте следующее:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

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

Теперь, когда у вас есть контент, сохраните настройки модуля человека.

Скопируйте только что созданный персональный модуль и вставьте его в каждый из оставшихся столбцов, чтобы у вас был один и тот же персональный модуль в каждом из четырех столбцов. Чтобы скопировать и вставить, вы можете использовать параметры меню, вызываемые правой кнопкой мыши, или сочетания клавиш cmd + c, cmd + v (mac) или ctrl + c ctrl + v (победа).

Откройте настройку модуля человека в столбце 4 и обновите содержимое, чтобы он содержал только следующее:

Название: «Это может быть ты!»
Описание: «Используйте кнопку ниже, чтобы подать заявку на выступление на нашем мероприятии».

Сохраните ваши настройки.

Затем добавьте модуль кнопки непосредственно под модулем человека в столбце 4 и обновите текстовое содержимое кнопки на «Применить сейчас». И сохраните свои настройки.

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

Вот как должен выглядеть ваш макет Guest Speak на этом этапе.

Стилизация компоновки гостевого динамика

Стилизация раздела

Откройте настройки раздела и обновите следующее:

Фоновое изображение: [Я использую один из макетов нашего агентства]

Цвет фонового градиента слева: # 293039
Правый градиент фона: rgba (41,48,57,0,89)
Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: # 293039
Высота верхнего разделителя: 30vw

Изменение ширины ряда

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

Затем обновите следующее:

Специальная ширина: 80%

Теперь обе ваши строки будут иметь одинаковую ширину.

Стилизация заголовка

Откройте настройки текстового модуля, содержащего заголовок вашего раздела «Приглашенные докладчики», и обновите следующее:

Шрифт заголовка 2: Montserrat
Толщина шрифта заголовка 2: полужирный
Стиль шрифта заголовка 2: TT
заголовок 2 Выравнивание текста: по правому краю
Цвет текста заголовка 2: # 74bf46
Размер текста заголовка 2: 70 пикселей (рабочий стол), 50 пикселей (смартфон)

Сохранить настройки.

Теперь откройте настройки разделителя и обновите следующее:

Цвет: #ffffff
Высота: 0 пикселей
Ширина: 90 пикселей
Выравнивание модуля: правое

Стилизация модулей Person

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

Обновите следующие настройки элемента:

Цвет значка: # 74bf46
Шрифт заголовка: Montserrat
Толщина шрифта заголовка: легкий
Цвет текста заголовка: #ffffff
Размер текста заголовка: 20 пикселей
Шрифт: Montserrat
Цвет основного текста: #ffffff
Расстояние между буквами основного текста: 2 пикселя
Высота линии корпуса: 1,8 м

Стилизация модуля CTA Person

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

Ширина границы изображения: 18 пикселей
Цвет границы изображения: # d2d2d2
Непрозрачность изображения: 50%

Толщина шрифта заголовка: полужирный
Высота строки заголовка: 1,5 м

Теперь осталось только стилизовать нашу кнопку. Откройте настройки модуля кнопок и обновите следующее:

Цвет текста кнопки: # 293039
Цвет фона кнопки: # 74bf46
Радиус границы кнопки: 50 пикселей
Шрифт кнопки: Montserrat
Толщина шрифта: полужирный

Теперь посмотрим на окончательный результат.

Бонусный совет: эффект наведения при увеличении изображения

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

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

Используйте множественный выбор, чтобы выбрать персональные модули в столбцах 1, 2 и 3. Откройте настройки элемента. На расширенной вкладке введите следующий CSS в главном элементе :

overflow: hidden;

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

Затем добавьте следующий CSS под Изображение участника :

transition: all 0.3s; 

Это добавляет плавный переход при увеличении размера изображения.

Чтобы добавить CSS при наведении, щелкните значок наведения, выберите вкладку при наведении и введите следующий CSS:

transform: scale(1.1) translateY(-4.5%);

Это масштабирует (или расширяет) изображение до немного большего размера и немного перемещает его вверх.

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

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

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

Я с нетерпением жду вашего ответа в комментариях ниже.

Ваше здоровье!