Har du någonsin önskat att du visste hur man visar text ovanför en bild med Elementor ?
I den här nya handledningen kommer vi att visa dig hur du gör.
Om du inte har någon aning om vad vi vill prata om idag, inbjuder vi dig att titta på följande video:
Låt oss sedan gå tillbaka till varför vi är här.
För att slutföra den här handledningen behöver du Pro-versionen av Elementor, eftersom vi kommer att använda anpassad CSS-kod som endast stöds av den här versionen avElementor.
Upptäck också vår guide om: Hur man skapar ett bildgalleri med Elementor
Låt oss skapa en ny sektion med en struktur med tre kolumner, och sedan i panelen, låt oss definiera HÖGMOD sur Min höjdoch sedan Minsta höjd låt oss klicka vidare VH och ställ in reglaget på 100.
Låt oss välja mellankolumnen och i fliken Stil, i avsnittet bakgrund låt oss klicka vidare klassisk för Bakgrundstyp, välj sedan en mörk färg.
Låt oss sätta i den här kolumnen Intern sektionswidget. Widgeten Internal Section är som standard konfigurerad med 2 kolumner, låt oss ta bort en av dem. Låt oss konfigurera resten i panelen genom att ändra dess HÖGMOD sur Min höjd och Minsta höjd låt oss ställa in markören på 400.
Läs också: Elementor: Hur man zoomar in ett profilkort
Sen på Vertikal inriktning låt oss välja Miljö.
Släpp sedan Titelwidget i inre delen låt oss gå in som titelfotografi och på Justering, låt oss välja Centrum.
På fliken Stil låt oss ändra färgen på titeln så att den är synlig om den inte är det,
Låt oss släppa en Textredigeringswidget under Titelwidget. Sedan, i fliken Stil, på Justering välj Centrum. Låt oss också ändra färgen på texten så att den syns.
Se även: Elementor: Hur man lägger till en avdelare för att skapa en sektion
Låt oss välja mittkolumnen och i dess flik Stil, återställ bakgrundsfärgen och ladda sedan en bild Placera låt oss välja Centrerad Centrerad, upprepning sur Icke-upprepa, Omslag sur storlek.
I avsnittet gräns låt oss ändra alla gränsradier av 12. I box skugga, ställ in reglaget på 0 för Horisontell, À 0 för Vertikal, till 40 på Blur, till -10 på sändning. Du bör se en vacker skuggeffekt under din bild.
på Bakgrundsöverlägg, Välj klassisk för Bakgrundstyp och färg Välj en svart färg, på Opacity, låt oss ställa in reglaget på 0.55
På fliken advanced, låt oss ta tag 20 för alla marginaler.
Låt oss välja vår Intern sektion och gå till dess flik advanced i avsnittet Anpassad CSS, kopiera och klistra in följande kodavsnitt:
/*Afficher ou masquer un contenu au survol*/
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
}
Låt oss återigen välja mittkolumnen i vår sektion, i dess flik Stil, och i avsnittet Bakgrundsöverlägg, kontrollera att vi är på fliken VANLIGT, låt oss sänka Opacitet à 0.
Klicka sedan på fliken ÖVERSIKTsedan på klassisk för bakgrundstyp och färg, Välj en mörk färg, sedanOpacitet sur 0.55, Och Övergångsperiod låt oss ställa reglaget till 0.5.
Här är det slutliga resultatet av vår manipulation.
Låt oss duplicera vår kolumn 2 gånger och ta bort de andra 2 tomma kolumnerna. Allt som återstår är att ändra bakgrundsbilden samt innehåll textredigerare för de två nya kolumnerna.
Förhandsgranska ditt arbete på surfplatta och smartphone för att se hur det ser ut. Spara eller uppdatera den sedan.
Så. Du har precis visat en text ovanför en bild med Page Builder Elementor.
Skaffa Elementor Pro nu!
Slutsats
Så ! Det är allt för den här artikeln som visar hur du visar text ovanför en bild. Om du har några funderingar kring hur du tar dig dit låt oss veta inom commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
Tack, enkelt och effektivt