3 полезных способа использования параметров переполнения в Divi

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

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

Понимание параметров переполнения Divi

Параметры переполнения Divi позволяют установить для свойства переполнения css элемента одно из следующих значений:

1. По умолчанию - отображается значение по умолчанию (см. Ниже).
2. Видимый - переполняющееся содержимое останется видимым и не будет обрезано при расширении за пределы поля. Поскольку это настройка по умолчанию в Divi, вам редко придется выбирать ее.
3. Прокрутка - переполняющееся содержимое будет скрыто, но пользователи смогут прокручивать скрытое содержимое как по вертикали, так и по горизонтали.
4. Скрытый - содержимое за пределами поля будет скрыто (без возможности прокрутки).
5. Авто - эта опция при необходимости задействует функцию прокрутки (т. Е. Содержимое выходит за пределы поля). Это пригодится для дизайнов с заданной высотой или шириной, которые должны иметь возможность прокрутки в небольших браузерах.

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

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

Видимое переполнение (по умолчанию)

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

Переполнение скрыто

Как только вы добавляете свойство overflow hidden к строке, содержимое за пределами поля становится обрезанным и полностью скрытым от просмотра.

Прокрутка переполнения

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

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

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

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

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

3 полезных способа использования параметров переполнения Divi в Divi

# 1 Использование скрытого переполнения для обрезки переполненного контента для уникальных дизайнов

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

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

Пользовательские набивки: 12vw сверху, 12vw снизу

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

Ширина: 80vw
Максимальная ширина: 80vw
Padding: 0px сверху, 0px снизу
Box Shadow: см. Снимок экрана
Сила размытия тени коробки: 80 пикселей

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

Сначала добавьте заголовок h2 в поле содержимого следующим образом:

<h2>Overflow</h2>

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

Шрифт заголовка 2: Lato
Толщина шрифта заголовка 2: полужирный
Стиль шрифта заголовка 2: TT
Выравнивание текста заголовка 2: по центру
Цвет текста заголовка 2: #dddddd
Размер текста заголовка 2: 15vw
Интервал между буквами заголовка 2: 0,1 мкм
Заголовок 2 Text Shadow: см. Снимок экрана
Цвет тени текста заголовка 2: rgba (0,0,0,0.05)

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

Маржа: -6vw сверху, -10vw слева, -10vw справа

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

Содержание:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(Кстати, подобные фрагменты кода - отличный способ воспользоваться опцией прокрутки переполнения.)

Шрифт текста: Lato
Текст Выравнивание текста: вправо
Размер текста: 24 пикселей (рабочий стол), 16 пикселей (телефон)
Высота текстовой строки: 1,3 м
Максимальная ширина: 50%
Выравнивание модуля: правое
Прокладка: 4vw справа

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

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

Максимальная ширина: 35vw
Маржа: -12vw сверху, -8vw снизу, -5vw слева
Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: -40 пикселей
Вертикальное положение тени блока: -50 пикселей
Цвет тени: rgba (0,0,0,0.17)

Дизайн со строкой, для которой установлено значение «Видимое переполнение» (по умолчанию)

Теперь давайте проверим дизайн, сохранив значение видимого переполнения строки (по умолчанию).

Как видите, эти видимые параметры по умолчанию отлично подходят для создания красивых и современных дизайнов.

Дизайн со строкой, для которой установлено значение «Скрытое переполнение»

Теперь посмотрим, что происходит, когда мы используем свойство Overflow Hidden для строки. Откройте настройки строки и обновите следующее:

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

Вот результат.

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

# 2 Использование прокрутки переполнения, чтобы позволить пользователям прокручивать контент по вертикали

В следующем примере представлена ​​вертикальная прокрутка переполнения. Эта опция переполнения удобна для добавления прокручиваемого содержимого в списки ссылок или ресурсов. Вы можете превратить любой модуль или строку в контейнер для прокручиваемого содержимого. Вот как это сделать с помощью текстового модуля.

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

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

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

Шрифт текста: Lato

Цвет текста ссылки: # 333333
Размер текста ссылки: 18 пикселей

Цвет текста упорядоченного списка:
Размер текста упорядоченного списка: 20 пикселей
Высота строки упорядоченного списка: 1,8 мкм
Тип стиля упорядоченного списка: десятичный-ведущий-ноль

Толщина шрифта заголовка 3: Ультра полужирный
Размер текста заголовка 3: 50 пикселей
Максимальная ширина: 500 пикселей
Заполнение: 3% сверху, 3% снизу, 8% слева, 8% справа

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

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

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

Вертикальное переполнение: прокрутка

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

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

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

# 3 Использование прокрутки переполнения, чтобы позволить пользователям прокручивать контент по горизонтали

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

Чтобы показать вам, как это сделать, мы вместе построим небольшой пример.

Сначала создайте обычный раздел с строкой в ​​один столбец.

Затем добавьте в строку модуль рекламного объявления.

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

Выравнивание текста: по центру
Шрифт заголовка: Lato
Плотность шрифта заголовка: Heavy
Заполнение: 3% слева, 3% справа

Дублируйте модуль аннотации 5 раз, чтобы в столбце строки получилось 6 аннотаций.

Затем обновите настройки строки с помощью следующего настраиваемого CSS для основного элемента столбца.

display: grid;
grid-template-columns: repeat(6, 50%);

Это превратит ваш столбец объявлений в горизонтальную сетку с 6 столбцами, каждый с шириной, равной 50% контейнера (или в данном случае строки). Это означает, что два объявления / столбца будут занимать пространство внутри строки. Остальные 4 модуля будут выходить за пределы ряда с правой стороны. Здесь пригодится свойство прокрутки переполнения. Обновите следующую опцию переполнения:

Горизонтальное переполнение: прокрутка

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

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

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

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

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

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

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

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