Вы когда-нибудь хотели знать, как отображать текст над изображением с помощью Elementor ?
В этом новом уроке мы покажем вам, как это сделать.
Если вы понятия не имеете, о чем мы хотим поговорить сегодня, предлагаем вам посмотреть следующее видео:
Тогда давайте вернемся к тому, почему мы здесь.
Для выполнения этого урока вам понадобится Про версия Elementor, потому что мы будем использовать пользовательский код CSS, который поддерживается только этой версиейElementor.
Также откройте наш гид по: Как создать галерею изображений с Elementor
Давайте создадим новый раздел со структурой из 3 столбцов, затем на панели определим Высокомерие из Мин. ВысотаА потом Минимальная высота давай нажмем на VH и установите ползунок на 100.
Выделим средний столбец, а во вкладке Стильв разделе фон давай нажмем на классический для Тип фона, затем выберите темный цвет.
Поместим в эту колонку Виджет внутреннего раздела. Виджет «Внутренний раздел» по умолчанию настроен на 2 столбца, давайте удалим один из них. Остальное настроим в панели, изменив ее Высокомерие из Мин. Высота и Минимальная высота давайте установим курсор на 400.
Читайте также: Elementor: как увеличить карточку профиля
Затем на Вертикальное выравнивание Выбрать Окружение.
Затем бросьте Виджет заголовка в внутренняя часть давайте введем как Title Photograph, а в Alignment давайте выберем Центр.
Во вкладке Стиль давайте изменим цвет Заголовка, чтобы он был виден, если его нет,
Давайте бросим Виджет текстового редактора ниже Виджет заголовка. Затем во вкладке Стиль, в разделе Выравнивание выберите Центр. Давайте также изменим цвет текста, чтобы он был виден.
Смотрите также: Elementor: как добавить разделитель для создания раздела
Давайте выберем средний столбец и в его вкладке Стиль, сбросьте цвет фона и загрузите изображение, затем Позиция Выбрать по центру по центру, повторение из неповторяющийся, обложка из Размер.
В разделе граница давайте изменим все радиусы границ из 12. В тень коробки, установите ползунок на 0 для горизонтальный, Чтобы 0 для вертикального, до 40 на Размытие, чтобы -10 в эфире. Вы должны увидеть красивый эффект тени под своим изображением.
Юг Наложение фона, Выбрать классический для Тип фона и оттенок Выбери один черный цвет, на непрозрачности установим ползунок на 0.55
Во вкладке Передовой, давай возьмем 20 для всех полей.
Давайте выберем наш Внутренний раздел и перейдите на его вкладку Передовой в разделе Custom CSS скопируйте и вставьте следующий фрагмент кода:
/*Afficher ou masquer un contenu au survol*/
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
}
Давайте еще раз выделим средний столбец нашего раздела, В его вкладке Стиль, а в разделе Наложение фона, проверяем, что мы на вкладке НОРМАЛЬНЫЙ, давайте ниже Непрозрачность à 0.
Затем нажмите на вкладку ОБЗОРТогда на классический для тип фона и оттенок, выберите темный цвет, топомутнение из 0.55и для Продолжительность перехода давайте установим ползунок на 0.5.
Вот конечный результат нашей манипуляции.
Продублируем наш столбец 2 раза и удалим остальные 2 пустых столбца.Останется только изменить фоновое изображение, а также содержание текстовые редакторы для двух новых столбцов.
Предварительно просмотрите свою работу на планшете и смартфоне, чтобы увидеть, как она выглядит. Затем сохраните или обновите его.
Так. Вы только что отобразили текст над изображением с Page Builder Elementor.
Получите Elementor Pro прямо сейчас!
Заключение
Так ! Вот и все для этой статьи, которая показывает вам, как отображать текст над изображением. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
Спасибо, просто и эффективно