Искало ли ви се е да знаете как да показвате текст над изображение с Elementor ?
В този нов урок ще ви покажем как да го направите.
Ако нямате представа за какво искаме да говорим днес, ви каним да гледате следното видео:
След това да се върнем към защо сме тук.
За да завършите този урок, ще ви трябва Pro версията на Elementor, защото ще използваме персонализиран CSS код, който се поддържа само от тази версия наElementor.
Открийте и нашето ръководство за: Как да създадете галерия с изображения с Elementor
Нека създадем нов раздел със структура от 3 колони, след което в панела нека дефинираме Височина от Мин. височина, след това Минимална височина нека щракнем върху VH и задайте плъзгача на 100.
Нека изберем средната колона и в раздела Стил, в секцията фон нека щракнем върху класически за Тип фон, след което изберете тъмен цвят.
Нека сложим в тази колона Вътрешен раздел Widget. Приспособлението Internal Section е по подразбиране конфигурирано с 2 колони, нека изтрием една от тях. Нека конфигурираме останалото в панела, като го модифицираме Височина от Мин. височина и Минимална височина нека зададем курсора на 400.
Прочетете още: Elementor: Как да увеличите карта с профил
След това, нататък Вертикално подравняване нека изберем Обществена среда.
След това пуснете Притурка за заглавие в вътрешна секция нека въведете като Title Photograph, а в Alignment нека изберете Choose Център.
В раздела Стил нека променим цвета на заглавието, така че да се вижда, ако не е,
Нека пуснем а Притурка за текстов редактор под Притурка за заглавие. След това в раздела Стил, на Alignment изберете Център. Нека също така променим цвета на текста, така че да се вижда.
Вижте също: Elementor: Как да добавите разделител, за да създадете раздел
Нека изберем средна колона и в неговия раздел Стил, нулирайте цвета на фона и след това заредете изображение Позиция нека изберем Центрирано Центрирано, повторение от Без повторение, Покрийте от размер.
В секцията граница нека променим всичко гранични радиуси от 12, в кутия сянка, задайте плъзгача на 0 за ХоризонталенВ 0 за вертикално, до 40 на Blur, за да -10 на излъчване. Трябва да видите красив ефект на сянка под вашето изображение.
Sur Фоново наслагване, изберете класически за Тип фон и цвят Избери едно черен цвят, на Opacity, нека зададем плъзгача на 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;
}
Нека отново да изберем средната колона на нашия раздел, в нейния раздел Стил, и в раздела Фоново наслагване, проверете дали сме в раздела NORMAL, нека по-ниско Непрозрачност à 0.
След това кликнете върху раздела ПРЕГЛЕД, след това класически за тип фон и цвят, Избери тъмен цвят, тогаванепрозрачност от 0.55, и за Продължителност на прехода нека зададем плъзгача на 0.5.
Ето и крайния резултат от нашата манипулация.
Нека дублираме нашата колона 2 пъти и изтрием другите 2 празни колони. Всичко, което остава, е да променим фоновото изображение, както и съдържание текстови редактори за 2 нови колони.
Прегледайте работата си на таблет и смартфон, за да видите как изглежда. След това го запазете или актуализирайте.
Така. Току-що показахте текст над изображение с Page Builder Elementor.
Вземете Elementor Pro сега!
Заключение
Така ! Това е всичко за тази статия, която ви показва как да покажете текст над изображение. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...
Благодаря ви, просто и ефективно