Някога искали ли сте да знаете как да показвате текст над изображение с 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 колони.
Прегледайте работата си на таблет и смартфон, за да видите как изглежда. След това го запазете или актуализирайте.
Ето го. Току-що показахте текст над изображение с Elementor Page Builder.
Вземете Elementor Pro сега!
Заключение
Това е всичко! Това е всичко за тази статия, която ви показва как да покажете текст над изображение. Ако имате някакви проблеми с разбирането, уведомете ни в коментарите. Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...
Благодаря ви, просто и ефективно