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

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

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

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

Sneak Peek

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

Загрузите дизайн стилей списка для тумблеров и раскладок аккордеонов БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

1. Тема Divi установлена ​​и активна
2. Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
3. Изображения, которые будут использоваться для фиктивного содержания

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

Часть 1. Использование стилей списков в модулях переключения

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

Сначала создайте обычный раздел со строкой из трех столбцов. Затем обновите настройки строки следующим образом:

Ширина желоба: 2
Ширина: 100%
Максимальная ширина: 90vw

Добавить модуль переключения

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

Добавить Переключить HTML-контент

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

Вставьте следующий HTML-код в
Поле содержимого тела.

<ol start="1">
    <li>
        <ul style="margin-top: -1.5em;">
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>

Теперь этот фрагмент HTML-кода создает упорядоченный список с использованием тега ol. В упорядоченном списке есть только один элемент списка (li), который представляет собой вложенный неупорядоченный список (ul) с одним элементом списка (li), имеющим фиктивное содержимое. Под упорядоченным списком находится основной абзац текста.

С помощью этой настройки мы можем настроить каждый из этих тегов (ol, ul, p) для разных стилей, используя встроенные в Divi стили текста, которые включают стили списков.

Обратите внимание, что в начале тега ol есть start = ”1 ″. Это сообщает списку, с какого номера начать перечисление номеров упорядоченного списка с каждым элементом списка. Технически это необязательно для первого числа, потому что оно автоматически начинается с 1 по умолчанию. Но он нам понадобится для следующих переключателей, которые мы добавим.

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

Стилизация содержимого

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

Цвет значка: # ff3d97
Размер шрифта значка: 26 пикселей
Цвет фона открытого переключателя: #ffffff
Цвет фона закрытого переключателя: #ffffff
Цвет текста открытого заголовка: # 333333
Цвет текста заголовка: # 333333

Шрифт заголовка: Oswald
Размер текста заголовка: 18 пикселей
Высота строки заголовка: 3em

Шрифт неупорядоченного списка: Oswald
Толщина шрифта неупорядоченного списка: Light
Цвет текста неупорядоченного списка: # 333333
Размер текста неупорядоченного списка: 36 пикселей
Тип стиля неупорядоченного списка: Нет

Шрифт упорядоченного списка: Kameron
Толщина шрифта упорядоченного списка: полужирный
Цвет текста упорядоченного списка: rgba (255,61,151,0,34)
Размер текста упорядоченного списка: 100 пикселей
Высота строки упорядоченного списка: 1.1em

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

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

Обновление начальных номеров упорядоченного списка

Для дублирования переключателя в столбце 2 нам нужно, чтобы упорядоченный список начинался с цифры «2» вместо «1». Чтобы изменить это, откройте настройки модуля переключения и измените начальный номер в теге ol на «2».

Вам также потребуется обновить переключатель в столбце 3, указав начальное число упорядоченного списка «3».

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

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

Часть 2: Использование стилей списков в аккордеонных модулях

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

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

Распространение стилей переключателя на аккордеон

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

Затем сделайте то же самое для каждой категории дизайна, у которой есть собственный стиль, который необходимо расширить до модуля «аккордеон». К ним относятся стили для «Переключить», «Текст заголовка» и «Основной текст».

Затем проверьте окончательный результат дизайна гармошки.

Часть 3: Использование стилей списков для создания содержимого нескольких столбцов в модуле Toggle

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

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

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

<ol style="column-count: 2">
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
</ol>

Обратите внимание на встроенный атрибут стиля «column-count: 2», который был добавлен в начальный тег ol. Это позволит структурировать упорядоченное содержимое списка в два столбца вместо одного. При необходимости вы можете изменить это число на любое количество столбцов.

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

Стилизация текста ссылки

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

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

Толщина шрифта ссылки: полужирный
Стиль шрифта ссылки: подчеркивание
Цвет текста ссылки: # ff3d97
Размер текста ссылки: 15 пикселей

И поскольку мы не перекрываем какой-либо текст этим дизайном, дайте номерам стиля упорядоченного списка более яркий цвет, как показано ниже:

Цвет текста упорядоченного списка: # ff3d97

Добавить фон к переключателю

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

Фоновое изображение: [загрузите изображение по вашему выбору]
Цвет фона градиента слева: rgba (255,255,255,0.92)
Цвет фона градиента справа: rgba (255,255,255,0,8)
Направление градиента: 90 градусов
Стартовая позиция: 50%
Конечная позиция: 0%
Поместите градиент над фоновым изображением: ДА

Добавление отзывчивых элементов к переключателю с двумя столбцами

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

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

Ширина: 100%
Макс.ширина: 89vw (настольный компьютер), 90vw (планшет и телефон)

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

Размер шрифта значка: 5vw

Размер текста заголовка: 4vw

Размер текста неупорядоченного списка: 26 пикселей (рабочий стол), 18 пикселей (планшет), 14 пикселей (телефон)
Отступ элемента неупорядоченного списка: 1 пиксель

Размер текста упорядоченного списка: 8vw

Окончательный дизайн содержимого переключателя с несколькими столбцами

Вот дизайн дисплеев планшета и телефона.

А вот тот же дизайн с более темным фоном и белым цветом текста.

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

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

Получайте удовольствие от изучения новых дизайнов.

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

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