Как преобразовать строки Divi в горизонтальные и вертикальные вкладки при наведении курсора
Опубликовано: 2019-05-29Вкладки определенно пригодятся для того, чтобы сделать важную информацию доступной в сжатой области вашего веб-сайта. Это снижает потребность пользователя в прокрутке длинного содержимого страницы. Модуль вкладок Divi прост в использовании и отлично подходит для переключения между простым контентом при нажатии.
Но в этом уроке я покажу вам, как преобразовать целые строки Divi во вкладки при наведении курсора. Я также покажу вам, как создавать как горизонтальные, так и вертикальные вкладки. Это откроет возможности Divi для разработки полных макетов строк с несколькими модулями для каждой области содержимого вкладки. Плагин не нужен!
Давайте начнем.
Sneak Peek
Вот краткий обзор горизонтальных и вертикальных вкладок при наведении курсора, которые мы создадим вместе в этом руководстве.
Загрузите макет вкладок при наведении курсора в Divi Rows БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Подпишитесь на наш канал Youtube
Что вам нужно для начала
Для начала вам потребуется следующая настройка:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Три изображения для фиктивного содержания
После этого у вас будет пустой холст, чтобы начать создавать несколько зависающих вкладок в Divi.
Создание горизонтальных вкладок при наведении курсора с помощью строк Divi
Для начала создайте новый обычный раздел со строкой из двух столбцов.
Фон строки, заполнение и тень блока
Прежде чем мы добавим наши модули, давайте сначала немного настроим параметры строки. Нам нужно будет вернуться к строке позже, чтобы расположить ее для наших функций вкладки.
Откройте настройки строки и обновите следующее:
Цвет фонового градиента слева: # 284f91
Цвет фонового градиента справа: # 4646c4
Отступ: 50 пикселей сверху, 50 пикселей снизу, 50 пикселей слева, 50 пикселей справа
Box Shadow: см. Снимок экрана
Цвет тени коробки: rgba (70,70,196,0.66)
Добавление содержимого в строку
Теперь мы собираемся добавить некоторый фиктивный контент в нашу строку. Имейте в виду, что вы можете добавить любую комбинацию столбцов и модулей для своей области содержимого.
В столбце 1 добавьте изображение с модулем изображения. Я использую один из пакета макетов Design Conference.
В правом столбце добавьте модуль призыва к действию и обновите следующее:
URL ссылки на кнопку: # (пока только чтобы отобразить кнопку)
Использовать цвет фона: НЕТ
Выравнивание текста: по левому краю
Шрифт заголовка: Lato
Размер текста заголовка: 60 пикселей (рабочий стол), 50 пикселей (телефон)
Создание вкладки
Чтобы создать настоящую вкладку, пользователи будут наводить указатель мыши, чтобы отобразить содержимое этой строки, нам нужно создать текстовый модуль и разместить его в правом верхнем углу с помощью некоторого настраиваемого CSS.
Идите вперед и добавьте новый текстовый модуль под изображением в столбце 1 и обновите следующее:
Содержание: «Первая вкладка»
Цвет фона: # 284f91 (он должен соответствовать цвету левого градиента строки)
Текст Выравнивание текста: по центру
Цвет текста текста: #ffffff
Ширина: 100 пикселей
Высота: 50 пикселей
Поля: -100 пикселей сверху, -50 пикселей слева
Отступ: сверху 14 пикселей.
Наконец, добавьте следующий настраиваемый CSS-код к основному элементу, чтобы придать ему абсолютное положение в верхней части строки.
position: absolute !important; top: 0;
Этот CSS плюс добавленные нами настраиваемые поля гарантируют, что вкладка будет расположена точно в верхнем левом углу строки. Важно, чтобы вкладки действительно располагались над строкой, чтобы пользователь мог позже навести на нее курсор.
Высота и расстояние между секциями
Теперь, прежде чем мы продолжим создавать оставшиеся строки и вкладки, давайте дадим нашим строкам немного передышки, добавив в раздел верхнее и нижнее поля. Для этого дизайна важно, чтобы мы использовали поля для разделения нашего раздела, потому что мы также зададим нашему разделу заданную высоту. Нам нужно задать нашему разделу заданную высоту, потому что мы хотим, чтобы наши строки занимали всю высоту нашего раздела. Это означает, что каждая из наших строк (содержимое вкладки) будет иметь ту же высоту, что и наша секция. Поэтому лучше, чтобы каждая из строк имела одинаковый объем содержимого, иначе на некоторых вкладках строк будет нежелательное отрицательное пространство. Позже это станет более понятным.
А пока откройте настройки раздела и обновите следующее:
Высота: 500 пикселей (рабочий стол), 900 пикселей (планшет), 750 пикселей (телефон)
Поля: 100 пикселей сверху, 100 пикселей снизу
Padding: 0px сверху, 0px снизу
Обратите внимание, что высоту раздела необходимо отрегулировать, чтобы учесть более длинное пространство содержимого, когда столбцы строк складываются на мобильном устройстве. Так что вам нужно будет немного изменить эту высоту для ваших нужд.
Теперь сохраните настройки и вернемся к добавлению этих строк.
Создание второй строки содержимого вкладки
Чтобы создать вторую строку, продублируйте строку, которую вы создали ранее. Переместите текстовый модуль в столбец 1, а изображение - в столбец 2. Затем обновите изображение, добавив новое. Это поможет вам понять, как выглядит разный контент на каждой вкладке.
Откройте настройки второй строки и переключите цвета градиента фона, наведя курсор на область предварительного просмотра фона и щелкнув маленький значок «переключатель».
Затем откройте настройки текстового модуля, используемого для создания вкладки в столбце 1, и задайте ему цвет, соответствующий новому верхнему градиенту.
Цвет фона: # 4646c4
Затем нам нужно переместить вкладку вправо, чтобы, когда эта строка перекрывает строку выше, вы могли видеть вкладку непосредственно справа от вкладки в первой строке.
Поле: 50 пикселей слева
Добавление эффекта наведения фильтра непрозрачности для второй строки
Для строки мы можем добавить эффект наведения фильтра непрозрачности, чтобы при наведении курсора на вкладку и отображении содержимого строки был приятный переход при наведении курсора.
Откройте настройки строки и добавьте следующий фильтр:
Непрозрачность: 70% (по умолчанию), 100% (при наведении)
Затем добавьте продолжительность перехода и кривую скорости для эффекта наведения фильтра непрозрачности.
Продолжительность перехода: 500 мс
Кривая скорости перехода: линейная
Создание третьей строки содержимого вкладки
Теперь мы можем добавить нашу последнюю строку содержимого вкладки. Для этого продублируйте вторую строку, которую вы только что создали. Затем переместите текстовый модуль в столбец 1, а изображение - в столбец 2. И обновите модуль изображения, добавив новое изображение.
Обновите настройки строки, добавив новый фоновый градиент.
Цвет фонового градиента слева: # 333333
Правый градиент фона: # 4646c4
Затем откройте настройку текстового модуля, используемого для создания вкладки в столбце 1, и обновите цвет и поля.
Цвет фона: # 333333
Поле: 150 пикселей слева
Вот как должна выглядеть ваша страница, прежде чем мы разместим наши строки так, чтобы они перекрывали друг друга.
Перекрытие строк с абсолютным позиционированием
Чтобы перекрыть наши строки, нам нужно использовать абсолютное позиционирование. Затем мы будем использовать опцию Z index, чтобы вывести каждую строку на передний план при наведении курсора на вкладки. Но поскольку мы даем нашим строкам абсолютное положение (а родительский элемент / раздел имеет заданную высоту), мы можем добавить 100% высоты к каждой из строк, чтобы они охватывали всю высоту раздела.
Вот как это сделать.
Сначала разверните каркасный режим. Затем используйте множественный выбор, чтобы выбрать все три строки и открыть настройки одной из них, чтобы развернуть модальные настройки элемента. Затем обновите высоту до 100%.
Высота: 100%
Это установит высоту для всех трех строк на 100%.
Затем добавьте следующий настраиваемый CSS к основному элементу:
position: absolute !important; left: 0; right: 0; margin: auto;
Теперь разверните режим просмотра рабочего стола, чтобы увидеть, как строки красиво перекрываются для создания наших вкладок.
Изменение порядка строк при наведении курсора с помощью индекса Z
Прямо сейчас вы могли заметить, что третья строка / вкладка находится на переднем плане. Поэтому нам нужно изменить порядок строк с помощью Z Index, чтобы первая вкладка отображалась первой, пока вы не наведете курсор на другую вкладку.
Для этого вернитесь в режим каркасного просмотра и откройте настройки для первой созданной строки (с первой вкладкой). Затем обновите индекс z следующим образом:
Индекс Z: 10
Затем используйте множественный выбор, чтобы выбрать вторую и третью строки. Затем откройте модальное окно настроек элемента и добавьте следующий индекс z при наведении курсора на обе строки.
Индекс Z: 11 (при наведении)
Вот и все. Посмотрим на окончательный результат.
Конечный результат
Причина, по которой это работает, заключается в том, что технически каждая вкладка (текстовый модуль) является частью каждой строки, даже если они расположены над строкой и за ее пределами. Вот почему при наведении курсора на вкладку отображается строка, в которой она содержится.
А вот как это выглядит на мобильном телефоне.
Создание вкладок с вертикальным наведением
Если вы хотите добавить вертикальные вкладки к строкам, все, что вам действительно нужно сделать, это изменить положение текстовых модулей, используемых для создания каждой вкладки. Нам также нужно будет настроить размер наших строк и интервал между секциями, чтобы освободить место для вкладок.
Вот что надо делать.
Идите вперед и продублируйте раздел, содержащий только что созданные вкладки при наведении курсора, чтобы у вас был новый дизайн для работы.
Затем откройте настройки раздела и обновите следующее:
Заполнение: 10% слева, 10% справа
Затем используйте множественный выбор, чтобы выбрать все три строки, и обновите настройки элемента следующим образом:
Ширина: 70% (рабочий стол), 70% (планшет), 80% (телефон)
Макс.ширина: 980 пикселей
Затем обновите направление градиента до 90 градусов для всех трех размытых изображений, чтобы при размещении вкладок слева цвет левого градиента смешивался с цветом фона вкладки.
Направление градиента: 90 градусов
Теперь пора расположить вкладки текстового модуля слева от наших строк, чтобы получить нужные вертикальные вкладки.
Откройте вкладку текстового модуля в первой строке и обновите следующее:
Поля (рабочий стол): -50 пикселей сверху, -150 пикселей слева
Поля (телефон): -100 пикселей сверху, -50 пикселей слева
Настройка поля для телефона - вернуть вкладку над строкой для отображения горизонтальной вкладки.
Затем откройте настройки для вкладки текстового модуля в строке раздела и обновите следующее:
Поля (рабочий стол): 0px сверху, -150px слева
Поля (телефон): -100 пикселей сверху, 50 пикселей слева
И для последней вкладки в третьей строке обновите следующее:
Поля (рабочий стол): 50 пикселей сверху, -150 пикселей слева
Поля (телефон): -100 пикселей сверху, 150 пикселей слева
Конечный результат
Теперь посмотрим на окончательный результат.
А вот и один планшет и телефон.
Последние мысли
Проявив немного творческого мышления и используя силу Divi, вы можете создать несколько довольно крутых настраиваемых вкладок при наведении курсора, используя строки Divi. Есть несколько ограничений на то, что вы можете отображать. Например, при такой настройке все строки должны быть той же высоты, что и секция. Но для того, чтобы не использовать плагин, я думаю, что это отличное решение. И не забывайте, поскольку вы можете использовать строки Divi для своего контента, существует множество способов использования этих наведенных вкладок в своем следующем проекте.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!