SVG (масштабируемая векторная графика) позволяет добавлять красивые и универсальные фоны на страницы Elementor. Это один из инструментов для создания привлекательного дизайна, который легко адаптируется к различным размерам и разрешениям экрана. Одним из наиболее инновационных вариантов применения SVG является использование его в качестве текстового фона. Этот прием позволяет придать глубину, яркость и уникальность типографике вашего сайта.
В этой статье мы расскажем вам, как использовать SVG в качестве текстового фона в Elementor. Метод совместим с любой версией Elementor (бесплатной и профессиональной). Итак, чего же вы ждете? Давайте начнем!
Шаги по использованию SVG в качестве фона текста в Elementor
Шаг 1: Загрузка SVG в медиафайл WordPress
Чтобы использовать SVG в качестве текстового фона в ELementor, сначала необходимо загрузить любой SVG-файл, который вы хотите использовать в качестве текстового фона, в Media.
Вы можете загрузить SVG-файл из любого онлайн-генератора SVG-фонов. В данном примере мы используем SVG Backgrounds. Этот сайт позволяет быстро настроить и применить SVG-фон.
Итак, выберите нужный вам SVG-фон, настройте его, экспортируйте и загрузите в виде SVG-файла.
Затем загрузите скачанный SVG на свой носитель. После загрузки скопируйте URL, нажав кнопку Копировать URL в буфер обмена. Мы будем использовать этот URL в следующем шаге.
Шаг 2: Добавление дополнительного CSS
Далее мы добавим CSS-сниппет в поле WordPress Additional CSS. Введите URL-адрес изображения в этот CSS-сниппет, а затем добавьте его в поле Additional CSS.
На приборной панели WordPress перейдите в раздел Внешний вид -> Настройки -> Дополнительные CSS. Скопируйте фрагмент CSS и вставьте его в поле ввода Additional CSS:
Примечание: Если вы используете блочную тему, нажмите здесь, чтобы узнать, как включить Theme Customizer на вашем WordPress.
После завершения добавления фрагмента CSS примените его, нажав кнопку PUBLISH.
Шаг 3: Добавление HTML-кода
Итак, мы подошли к последнему шагу этого руководства. На этом шаге мы добавим HTML-код. Укажите слова или буквы, которые должны иметь SVG-фон.
В данном примере мы хотим использовать SVG в качестве фона текста в виджете Heading. Переключите редактор из визуального режима в текстовый, если вы используете его для виджета Text.
Указав текст, добавьте тег <span> и закройте его с помощью </span>. Внутри тега напишите. Посмотрите на иллюстрацию ниже.
Вот и все. Как видно из приведенного выше изображения, теперь в качестве фона текста используется SVG. Не стесняйтесь изменять фон SVG, редактируя значения свойств фрагмента CSS, добавленного в поле ввода Additional CSS, например, border-radius, padding и т.д.
Итог
SVG в качестве текстового фона в Elementor — это отличный способ добавить уникальный и визуально привлекательный штрих к вашему сайту. Файлы SVG являются векторной графикой, а значит, их можно масштабировать или уменьшать без потери качества. Это делает их идеальным вариантом для использования в качестве текстовых фонов, так как вы можете быть уверены, что ваш текст всегда будет выглядеть четким и ясным. Кроме того, файлы SVG имеют небольшой вес и не замедляют работу сайта.
