Divi: как показать содержимое при наведении курсора на вкладки

Хотели бы вы иметь содержание который отображается при наведении курсора на вкладки с расширяемыми углами в Divi ?

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

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

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

обследование

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

Создайте новую страницу с помощью Divi Builder

В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.

Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель

Затем нажмите Начать строительство (Построить с нуля)

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

Создание макета наложений расширяемого содержимого в Divi

Конструкция выдвижного углового скоса из нижнего правого положения

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

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

• Использовать пользовательскую ширину желоба: ДА
• Ширина желоба: 4

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

Также прочитайте наше руководство на Divi: как создать плавную сетку столбцов при наведении

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

Добавьте модуль Blurb в столбец 1

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

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

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

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

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

• Закругленные углы: 10px внизу справа
• Ширина границы (справа и снизу): 2 пикселя
• Цвет границы (справа и снизу): #e94558

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

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

height: 400px;

Выпадающий вариант «Видимость» и внесите следующие изменения:

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

Добавьте контент в модуль Blurb

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

• Название: Манго ИПА
• Тело :

<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 XNUMX XNUMX, XNUMX)

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

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

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

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

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

• Масштаб преобразования (X и Y): 50%

• Преобразовать Перевести
  • Ось Y: 50%
  • Ось X: 30%

Также прочитайте наше руководство по: Divi: Как создать липкий футер с эффектом «Раскрыть»

• Transform Origin: снизу и справа

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

• Масштаб преобразования (Y и X) (наведение): 100%

• Transform Translate(Y и X) (Hover): 0%

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

direction: rtl

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

Результат

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

Конструкция выдвижного углового скоса из нижнего левого положения

Дублировать столбец

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

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

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

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

Обновите параметры модуля Blurb

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

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

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

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

Результат

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

Конструкция выдвижного углового скоса из верхнего правого положения

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

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

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

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

Обновите параметры модуля Blurb

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

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

• Transform Translate (ось Y) (рабочий стол): -50%
• Преобразование происхождения: вверху справа

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

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

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

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

Затем добавьте следующий CSS в область содержимого. Содержание рекламы :

direction: rtl;
height: 100%;

Конструкция выдвижного углового скоса из верхнего левого положения

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

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

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

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

Обновите параметры модуля Blurb

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

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

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

• Transform Translate (ось Y) (рабочий стол): -50%
• Преобразование происхождения: вверху слева

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

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

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

Также добавьте следующий CSS в поле Содержание рекламы :

height: 100%;

Завершить разработку макета

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

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

• Предыстория: #efefef

Добавить заголовок

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

Затем добавьте текстовый модуль.

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

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

• Шрифт: Мерриуэзер
• Вес шрифта: полужирный
• Стиль: ТТ
• Выравнивание текста: по центру
• Цвет текста: #999999
• Размер: 50 пикселей (настольный компьютер), 30 пикселей (планшет), 24 пикселя (телефон).
• Расстояние между буквами: 1em

• Отступы (слева): 50 пикселей (настольный компьютер), 30 пикселей (планшет), 24 пикселя (телефон).

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

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

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

Скачайте DIVI прямо сейчас!!!

Заключение

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

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

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

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

Но тем временем поделитесь этой статьей в разных социальных сетях.

...