Как раскрыть контент с помощью эффекта наведения затвора в Divi

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

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

Sneak Peek

Вот краткий обзор того, что мы будем строить вместе.

Начиная

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

Для начала создайте новую страницу, дайте ей название, а затем разверните Divi Builder для построения в интерфейсе пользователя. Выберите вариант «Выбрать готовый макет». Затем во всплывающем окне библиотеки Divi выберите пакет макетов Day Spa и щелкните, чтобы использовать макет целевой страницы.

Как только макет загружен на страницу, можно начинать!

Добавление разделителей вверху и внизу рекламного объявления

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

Добавление первого разделителя

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

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

Цвет фона: #ffffff
Цвет (разделителя): #ffffff
Вес разделителя: 100 пикселей
Высота: 100 пикселей
Пользовательское поле: внизу 0 пикселей

Белый фон соответствует фону нашего раздела, так как мы не хотим его видеть. Убедитесь, что вес и высота разделителя одинаковы.

Добавление второго (оранжевого) разделителя

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

Цвет: # ff7a6b
Вес разделителя: 2 пикселя
Высота: 2 пикселя
Пользовательское поле: внизу 0 пикселей

Затем перейдите на вкладку содержимого и присвойте разделителю метку администратора «оранжевый разделитель». Это поможет отличить разделитель от предыдущего (белого) разделителя, когда мы будем использовать каркасный режим для копирования и вставки разделителя в другие столбцы.

Сохраните свою страницу.

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

Теперь мы готовы скопировать и вставить наши разделители над и под каждым из размытых изображений в каждом из столбцов. Чтобы упростить этот процесс, разверните режим каркаса, открыв меню настроек внизу страницы и щелкнув значок каркаса. (или используйте shft + w)

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

Затем вернитесь к рабочему столу (shft + w), чтобы закончить дизайн. Ваша страница должна выглядеть так.

Настройка модулей Blurb

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

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

На вкладке содержимого добавьте несколько строк фиктивного содержимого.

Затем полностью отключите тень окна изображения.

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

Пользовательское поле (по умолчанию): -100 пикселей сверху, -65 пикселей снизу
Пользовательское поле (при наведении): 0 пикселей вверху, 0 пикселей внизу

Пользовательский отступ (при наведении): 10 пикселей сверху, 10 пикселей снизу

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

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

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

Очистка эффекта наведения затвора

Вертикальное центрирование модулей

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

Откройте настройки строки и выровняйте высоту столбцов.

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

align-items: center;

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

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

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

Вот что вам нужно сделать.

Прежде всего, в настройках строки присвойте строке идентификатор CSS:

Идентификатор CSS: фиксированная высота

Затем откройте настройки страницы (на вкладке «Дополнительно») и добавьте следующий настраиваемый CSS:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

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

Вот и все!

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

Ознакомьтесь с окончательным дизайном.

А вот и эффект зависания шторки.

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

Пользовательское поле (планшет): 0 пикселей сверху, 0 пикселей снизу

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

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

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