Как применить альтернативные стили подчеркивания текста в Divi

Стили подчеркивания текста всегда были довольно ограничивающими. Самый распространенный метод подчеркивания текста в Интернете - использовать свойство CSS «text-decoration: underline». Divi даже позволяет вам развернуть и стилизовать этот тип подчеркивания в настройках модуля Divi Builder. Но этот стандартный метод подчеркивания имеет ограничения, когда дело касается стиля и кроссбраузерности.

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

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

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

Подчеркивание текста с помощью оформления текста (общий метод)

Самый распространенный и простой способ подчеркнуть текст - использовать свойство CSS украшения текста. Фактически, Divi позволяет вам легко стилизовать текст с помощью этого метода во встроенных параметрах модуля. Просто найдите параметр « Стиль шрифта текста» и выберите значок « U », чтобы развернуть подчеркивание текста. После выбора стиля шрифта подчеркивания у вас также будет возможность настроить цвет и стиль подчеркивания.

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

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

• Твердый
• Двойной
• Пунктирный
• Пунктирная
• Волнистый

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

Ограничения стиля подчеркивания оформления текста

Отсутствует возможность регулировки ширины и положения линии.

К сожалению, при добавлении свойства text-decoration: underline css с использованием встроенных настроек Divi нет возможности настроить ширину или положение строки. Ширина линии соответствует размеру шрифта, поэтому она будет увеличиваться по мере увеличения размера шрифта. А поскольку позиция подчеркивания находится на базовой линии, нисходящие элементы (строчные буквы, которые опускаются ниже базовой линии) будут мешать линии, вызывая некоторые несоответствия, особенно со словами, у которых много нижних элементов (например, «Типографика»). .

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

Отсутствует поддержка браузера

Internet Explorer не поддерживает свойство text-decoration-style или text-decoration-color, поэтому стиль подчеркивания (двойной, пунктирный, пунктирный и т. Д.) И цвет подчеркивания изменить нельзя. Safari также не поддерживает свойство text-decoration-style, но вы можете изменить цвет подчеркивания.

Это отсутствие поддержки не ограничивается Divi. Даже собственный CSS вам не поможет.

Подчеркивание текста с помощью нижней границы

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

• Граница поддерживает восемь различных стилей границы для стилизации подчеркивания, включая пунктирную, пунктирную, сплошную, двойную, канавку, гребень, вставку и начало.
• Вы можете настроить ширину (толщину) границы независимо от размера шрифта.
• Вы можете расположить границы ближе или дальше от текста.
• Вы можете добавить любой цвет к границам.
• Стили границ поддерживаются ВСЕМИ браузерами.

Ограничения на использование нижних границ для подчеркивания

• Ограничено одной строкой текста на элементах блока. Но есть способы обойти это (см. Ниже).
• Расположен полностью под спусковыми крючками и немного сложно получить правильное положение (но выполнимо).

Понимание разницы между блочными и встроенными элементами

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

Блочные элементы

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

Некоторые примеры общих блочных элементов включают:

• Разделы, строки, модули Divi (div)
• основной текст или абзацы (p)
• заголовки (h1, h2, h3, h4, h5, h6)
• списки (ol, ul)

При добавлении нижней границы к элементам блока граница будет располагаться под всем блоком. Таким образом, если у вас есть абзац текста (p) или заголовок (h1), который разбивается на две или более строк, нижняя граница будет применена только к нижней части блока, а не к отдельным строкам текста.

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

Несмотря на то, что css нацелен на тег h1, строка применяется только к блочному элементу. Поэтому линия применяется только к самому низу, а не к каждой строке в отдельности.

Встроенные элементы

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

Вот пример некоторых ссылок (которые по умолчанию являются встроенными элементами) с подчеркиванием нижней границы.

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

Как добавить подчеркивание нижней границы к одной строке текста (блочному элементу)

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

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

Underlining Typography

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

• Размер текста текста: 46 пикселей (рабочий стол), 40 пикселей (планшет), 26 пикселей (телефон)
• Высота текстовой строки: 1,8 м
• Ширина: 517 пикселей (рабочий стол), 450 пикселей (планшет), 293 пикселей (телефон)
• Ширина нижней границы: 2 пикселя
• Цвет нижней границы: # 0c71c3
• Стиль нижней границы: пунктирная

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

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

Как упоминалось ранее, блочные элементы, такие как заголовки (h1, h2, h3 и т. Д.), Не позволяют применять нижнюю границу в строке при каждом переносе строки. Чтобы обойти это, мы можем просто обернуть наш текст тегом span. Диапазон позволяет группировать встроенные элементы (например, группу текста) вместе, чтобы добавить стили к этим элементам. Итак, если мы хотим сделать нижнюю границу тега h1 (элемент блока), мы можем обернуть текст внутри тега h1 с помощью дополнительного тега span. Затем мы можем добавить стиль подчеркивания нижней границы к тегу span. Это позволит нам подчеркнуть текст тега h1 (или его части), даже если он переходит на другую строку.

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

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

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

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

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

Идентификатор CSS: border-underline

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

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

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

Свойство border-bottom можно настроить по своему усмотрению. Первое значение (2 пикселя) устанавливает толщину (или ширину) границы. Второе значение (пунктирное) устанавливает стиль границы. Не забывайте, что вы также можете использовать следующие стили границ: пунктирная, пунктирная, двойная, канавка, гребень, вставка и выход. И третье значение (# 0c71c3) устанавливает цвет границы. Вы также можете настроить настраиваемый CSS-отступ в сочетании со значением высоты строки текста во встроенных параметрах текстового модуля, чтобы также получить правильный интервал.

Если вам не нужен тег span и вы хотите преобразовать весь тег h1 во встроенный элемент, вы можете вместо этого использовать этот CSS в настройках страницы:

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

Обратите внимание, что этот CSS нацелен на тег h1. В дополнение к стилям нижней границы и отступов, «display: inline» изменяет тег h1 на встроенный элемент, который позволяет тексту h1 иметь подчеркивание на нескольких строках.

Добавление подчеркивания нижней границы для встроенных ссылок в Divi

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

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

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

Класс CSS: подчеркивание границы

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

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

Свойство border-bottom можно настроить по своему усмотрению. Первое значение (1 пиксель) устанавливает толщину (или ширину) границы. Второе значение (сплошное) задает стиль границы. Не забывайте, что вы также можете использовать следующие стили границ: пунктирная, пунктирная, двойная, канавка, гребень, вставка и выход. И третье значение (# 333333) устанавливает цвет границы.

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

border-bottom: 2px dashed #0c71c3;

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

padding: 0.3em 0;

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

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

А что насчет разделителей?

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

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

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

• Цвет фонового градиента слева: # 2b87da
• Правый цвет градиента фона: # 29c4a9
• Тип градиента: линейный
• Направление градиента: 90 градусов
• Цвет: #ffffff
• Вес разделителя: 2 пикселя
• Высота: 2 пикселя
• Ширина: 400 пикселей (необходимо отрегулировать по ширине текста выше)
• Пользовательские отступы: 5 пикселей сверху, 5 пикселей снизу.

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

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

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

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