Att designa höjdpunkter för bilder och text är en klassisk designteknik som kan användas för att piffa till innehåll av en webbsida. Dessutom gör Divi det enkelt att skapa dessa reflektioner direkt från Divi Builder utan att behöva använda en fotoredigerare.
I den här handledningen visar jag dig hur du utformar reflektioner för bilder på Divi. Nyckeln till att göra reflektioner är att använda Divis alternativ för att skapa en spegelversion av ett objekt. Därefter kan du lägga till ett anpassat överlägg som jag visar hur du använder med en textmodul.
Låt oss börja!
undersökningen
Här är en översikt över de konstruktioner vi kommer att bygga i denna handledning.
Vad du behöver för att komma igång
För att komma igång behöver du bara Divi. Se till att Divi-tema är installerad och aktiv. Vi kommer att skapa våra mönster från grunden med hjälp av Divi Builder på front-end (visuell byggare). Du behöver också några dummy-bilder för den här handledningen (en bakgrundsbild runt 1920px x 600px och en annan bild runt 500px x 350px).
När du är redo går du till din WordPress-instrumentpanel och går till Sidor> Lägg till. Ge din nya sida en titel och distribuera Divi Builder i front-end. Välj alternativet "Bygg från grunden". Nu är du redo att gå!
Grundidén bakom att skapa en bild- och textreflektion i Divi
Grundidén att skapa reflektionsmönster i Divi innehåller tre steg:
- Skapa en modul med din bild eller text
- Duplicera modulen och använd transform-skalan för att skapa spegelbild eller text
- Lägg till ett lutningsöverlägg i det speglade elementet med hjälp av en avdelare eller en helt placerad textmodul.
Denna designteknik är inte begränsad till enskilda moduler. Du kan faktiskt lägga till reflektioner i hela rader i Divi med den här metoden, vilket är användbart för att skapa unika rubrikdesigner. Vi lägger till reflektion i en rad av vår textreflektionsdesign senare i denna handledning. Men för nu, låt oss börja med att skapa en bildreflektion.
Hur man skapar en bildreflektion
För att skapa en bildreflektion, låt oss börja med att skapa ett nytt vanligt avsnitt med en rad i en kolumn.
Lägg sedan till en bildmodul till raden.
Ladda ner bilden du vill ha från mediebiblioteket till bildmodulen. Uppdatera sedan följande bildinställningar:
Maximal bredd: 600px
Justering av modulen: centrum
Anpassad marginal: 0px längst ner
Skapa spegelbilden
För att skapa reflektionseffekten måste vi först skapa en kopia av bilden direkt under bilden.
För att göra detta, duplicera bildmodulen. Uppdatera sedan de dubbla bildinställningarna enligt följande:
Opacitet: 40%
X-axel för transformationsskala: -100%
Egenskapen Transform-skala är det som magiskt vänder bilden vertikalt och horisontellt för att skapa en speglad version av bilden.
Detta stöder grundläggande reflektionsdesign. Vi kan dock lägga till en ytterligare gradientöverlägg till vår lägre bild för en mer realistisk reflektionsdesign.
Lägg till ett lutningsöverlägg med en textmodul
För att lägga till en gradientöverlagring till vår bottenbild kan vi använda en textmodul. Vi kan ge textmodulen en absolut position så att den ligger ovanför den nedersta bilden. Därefter kan vi lägga till en gradientbakgrund till textmodulen. Genom att använda en textmodul (istället för en separator) får du ytterligare möjlighet att lägga till innehåll över reflektionsbilden senare om så önskas.
Fortsätt och skapa en textmodul under den nedre bilden.
Radera det innehåll som standard så att textmodulen är tom.
Uppdatera sedan textmodulinställningarna enligt följande:
Vänster bakgrundsgradient Färg: rgba (255,255,255,0)
Bakgrundsgradient höger Färg: #ffffff
Bredd: 100%
Höjd: 50%
Lägg sedan till följande anpassade CSS-kod till huvudelementet:
position: absolut! viktigt; topp: 50%;
Denna absoluta placering av textmodulen överlagrar textmodulen på den nedre halvan av raden.
Lägga till en bakgrundsfärg
Om du inte vill ha en vit bakgrund kan du använda andra bakgrundsfärger för att skapa ett reflektionsmönster över hela bredden.
För att göra detta, öppna radinställningarna och uppdatera följande:
Bakgrundsfärg: #000000
Bredd: 100%:
Max bredd: 100%;
Anpassad stoppning: 0px hög, 0px ner
Låt oss se resultatet nu.
Reflektioner kan se riktigt coola ut om du tar dig tid att designa dem ordentligt. Lyckligtvis har Divi outils att lyckas. Det finns andra metoder för att utföra CSS-reflektioner, men tyvärr tenderar de att sakna stöd från webbläsare. Designen i denna handledning kommer att se bra ut på alla webbläsare.
Jag har upptäckt att reflektioner ser bra ut i sidrubriker och visar bilder för ett portföljobjekt. Och jag är säker på att det finns många andra implementeringar.
Det här är allt för denna handledning, jag hoppas att du kan lägga till reflektioner på din WordPress-webbplats med Divis interna funktioner.
