Продажа на рожденских элементах

Наслаждайтесь 60% скидкой на новые покупки, обновление и обновления.

00 Дни
:
00 Часы
:
00 Минуты
:
00 Секунды

купить сейчас

Как добавить градиентные границы в WordPress с помощью Elementor

Muneeb Учебные пособия по WordPress Nov 8, 2021

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

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

Как создать градиентные границы с помощью Elementor

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

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

Amazing Deals

Элементар 6 -й день рождения со скидкой до 60%

Начать сейчас

Вы можете добавить любой виджет в столбец, а я буду использовать виджет Spacer .

Установите максимальную высоту распорки с помощью параметра « Пробел» на панели « Распорка» .

Перейдите на панель Custom CSS разделительного блока.

Теперь последний шаг - вставить следующий код CSS в настраиваемое поле CSS .

selector {
   border-left: 1px solid #a70ccc;
   border-right: 1px solid #ff1685;
   box-sizing: border-box;
   background-position: 0 0, 0 100%;
   background-repeat: no-repeat;
   background-size: 100% 1px;
   background-image: linear-gradient(to right, #a70ccc 0%, #ff1685 100%), linear-gradient(to right, #a70ccc 0%, #ff1685 100%);
}

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

Хотя вы всегда можете вернуться, чтобы внести нужные изменения.

Вот как вы можете создать градиентную границу на своем веб-сайте с помощью Elementor Website Builder . Не забудьте присоединиться к нам на наших Facebook и Twitter, чтобы быть в курсе наших руководств.