Как отображать контент при наведении курсора с помощью расширяющихся угловых вкладок в Divi (БЕСПЛАТНАЯ загрузка)

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

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

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

Sneak Peek

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

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к учебнику, ладно?

Что вам нужно для начала

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

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Создание макета расширяющихся наложений содержимого с нуля

Часть 1: Создание расширяющейся угловой вкладки из нижнего правого положения

Для начала добавьте строку из двух столбцов (половина-половина) к обычному разделу.

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

• Ширина желоба: 4

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

Начнем с добавления модуля аннотации.

Добавить модуль Blurb

Добавьте модуль рекламного сообщения в столбец 1.

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

Столбец 1 Настройки

Установив рекламное объявление, откройте настройки строки, а затем щелкните, чтобы изменить настройки столбца 1. Затем обновите следующее:

• Фоновое изображение [вставить изображение]
• Размер фонового изображения: фактический размер

ПРИМЕЧАНИЕ: в моем примере я использую изображения пива с прозрачным фоном, взятые из пакета макетов пивоварни. Их размер 128 на 359 пикселей, поэтому я использую фактический размер изображения.

Граница столбца 1

• Закругленные углы: 10 пикселей внизу справа.
• Ширина правой границы: 2 пикселя
• Цвет правой границы: # e94558
• Ширина нижней границы: 2 пикселя
• Цвет нижней границы: # e94558

Пользовательский CSS и переполнение

На вкладке «Дополнительно» добавьте следующий настраиваемый CSS-код к основному элементу:

height: 400px;

Обновление следующее:

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

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

Добавление содержимого модуля Blurb

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

• Название: Mango IPA
• Тело:

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

• Изображение: добавьте такое же изображение, которое использовалось для фона столбца.

Разработка модуля Blurb

Задайте цвет фона рекламному объявлению при наведении курсора следующим образом:

• Цвет фона (рабочий стол): прозрачный
• Цвет фона (при наведении): rgba (255,255,255,0.9)

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

• Расположение изображения / значка: слева
• Шрифт заголовка: Oswald
• Стиль шрифта заголовка: TT
• Размер текста заголовка: 40 пикселей
• Плотность основного шрифта: полужирный
• Цвет основного текста (рабочий стол): прозрачный
• Цвет основного текста (при наведении): # 121212

• Ширина изображения: 100 пикселей (рабочий стол), 64 пикселей (телефон)
• Ширина содержимого: 100%
• Высота: 100%
• Отступ (рабочий стол): 15% сверху, 15% снизу, 8% слева, 8% справа
• Отступ (при наведении): 8% сверху, 8% снизу, 8% слева, 8% справа

• Закругленные углы (по умолчанию): 20 пикселей вверху слева.
• Закругленные углы (при наведении): 10 пикселей вверху слева.
• Ширина верхней границы: 4 пикселя (рабочий стол), 2 пикселя (при наведении)
• Цвет верхней границы: # e94558.
• Ширина левой границы: 4 пикселя (рабочий стол), 2 пикселя (при наведении)
• Цвет левой границы: # e94558

Вариант преобразования (рабочий стол)

• Масштаб трансформации по оси Y: 50%
• Масштаб трансформации по оси X: 50%
• Преобразовать преобразовать ось Y: 50%
• Преобразовать преобразовать ось X: 30%
• Преобразовать начало координат: внизу справа

Параметры преобразования (при наведении)

• Масштаб трансформации по оси Y (при наведении): 100%
• Масштаб трансформации по оси X (при наведении): 100%
• Преобразовать преобразовать ось Y (при наведении): 0%
• Преобразовать преобразовать ось X (при наведении): 0%

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

direction: rtl

ПРИМЕЧАНИЕ. Направление «rtl» означает «справа налево», которое переключает порядок содержимого по умолчанию (слева направо).

Результат

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

Часть 2: Создание расширяющейся угловой вкладки из нижнего левого положения

Дублируйте столбец

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

Обновить настройки столбца 2

Затем откройте настройки для столбца 2 и обновите следующее:

• Закругленные углы: 10 пикселей внизу слева.
• Ширина правой границы: 0 пикселей
• Ширина левой границы: 2 пикселя
• Цвет левой границы: # e94558

Обновить настройки Blurb

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

• Выравнивание текста: по правому краю
• Закругленные углы (рабочий стол): 20 пикселей вверху справа.
• Закругленные углы (при наведении): 10 пикселей вверху справа.
• Ширина левой границы: 0 пикселей
• Ширина правой границы: 4 пикселя (рабочий стол), 2 пикселя (при наведении)
• Цвет правой границы: # e94558

• Transform Translate X Axis (рабочий стол): -30%
• Transform Origin (рабочий стол): внизу слева

Затем не забудьте удалить пользовательский CSS в поле Blurb Content.

Результат

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

Часть 3: Создание расширяющейся угловой вкладки из верхнего правого положения

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

Обновить настройки столбца 1

Затем откройте настройки повторяющейся строки, а затем откройте настройки для столбца 1 и обновите следующее:

• Закругленные углы 10 пикселей вверху справа
• Ширина нижней границы: 0 пикселей
• Ширина верхней границы: 2 пикселя
• Цвет верхней границы: # e94558.

Обновить настройки модуля Blurb

Затем откройте настройку модуля рекламного сообщения и обновите следующее:

• Закругленные углы (рабочий стол): 20 пикселей внизу слева.
• Закругленные углы (при наведении): 10 пикселей внизу слева.
• Ширина верхней границы: 0 пикселей
• Ширина нижней границы: 4 пикселя (рабочий стол), 2 пикселя (при наведении)
• Цвет нижней границы: # e94558
• Transform Translate Axis Y (рабочий стол): -50%
• Transform Origin: вверху справа

Blurb Custom CSS

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

Добавьте следующий настраиваемый CSS в поле заголовка рекламного объявления:

position: absolute;
bottom: 0;
left: 15px;

Затем добавьте следующий CSS в поле содержимого Blurb:

direction: rtl;
height: 100%;

Часть 4: Создание расширяющейся угловой вкладки из верхнего левого угла

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

Обновить настройки столбца 2

В настройках строки откройте настройки для столбца 2 и обновите следующее:

• Закругленные углы: 10 пикселей вверху слева.
• Ширина нижней границы: 0 пикселей
• Ширина верхней границы: 2 пикселя
• Цвет верхней границы: # e94558.

Обновить настройки Blurb

Затем откройте настройки рекламного объявления в столбце 2 и обновите следующее:

• Закругленные углы (рабочий стол): 20 пикселей внизу справа.
• Закругленные углы (при наведении): 10 пикселей внизу справа.
• Ширина верхней границы: 0 пикселей
• Ширина нижней границы: 4 пикселя (рабочий стол), 2 пикселя (при наведении)
• Цвет нижней границы: # e94558

Затем обновите параметры преобразования:

• Transform Translate X Axis (рабочий стол): -30%
• Преобразовать начало координат: вверху слева

Blurb Custom CSS

Затем добавьте следующий настраиваемый CSS в поле Blurb Title:

position: absolute;
bottom: 0%;
right: 0%;

Затем добавьте следующий CSS в поле Blurb Content:

height: 100%;

Часть 4: Завершение разработки макета

Цвет фона раздела

Добавьте цвет фона раздела следующим образом:

• Цвет фона: #efefef

Добавление заголовка

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

Добавьте содержание: «Сезонный».

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

• Шрифт заголовка 2: Merriweather
• Толщина шрифта заголовка 2: полужирный
• Стиль шрифта заголовка 2: TT
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 999999
• Размер текста заголовка 2: 50 пикселей (рабочий стол), 30 пикселей (планшет), 24 пикселей (телефон).
• Интервал между буквами заголовка 2: 1em
• Отступ: 50 пикселей слева (рабочий стол), 30 пикселей слева (планшет), 24 пикселей слева (телефон)

Конечный результат

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

А вот и дизайн на мобильном телефоне.

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

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

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

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