Divi: Sådan opretter du brugerdefinerede billedoverlejringer

Kunne du tænke dig at lære at designe tilpassede billedoverlejringer med Divi ?

Billedoverlejringer har eksisteret i lang tid inden for webdesign. De er perfekte til at engagere besøgende ved at afsløre indhold Yderligere og designelementer, når du holder markøren over billedet. 

I denne tutorial viser vi dig, hvordan du designer tilpassede billedoverlejringer Divi. Disse overlejringer vil ændre og afsløre elementer, når du holder markøren over billedet. 

Ingen plugins er nødvendige.

Lad os starte!

undersøgelse

Her er et hurtigt kig på det design, vi vil skabe i denne tutorial.

Opret en ny side med Divi Builder

Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.

Giv den en titel, der giver mening for dig, og klik Brug Divi Builder

klik derefter på Begynd at bygge (Byg fra skrammer)

Derefter har du et tomt lærred til at begynde at designe i Divi.

Oprettelse af brugerdefinerede billedoverlejringer i Divi

Design sektionen, rækken og kolonnerne

For at starte skal du oprette en række med tre kolonner i standardafsnittet.

Åbn sektionsindstillinger og tilføj følgende baggrundsfarve:

• Baggrund: #3a0ca3

Åbn derefter kolonne 1-indstillingerne og opdater følgende:

• CSS-klasse: et-overlay-container

• Vandret overløb: Skjult
• Lodret overløb: Skjult

Tilføj billede

Nu hvor sektionen, rækken og kolonnen er klar, skal du tilføje et nyt billedmodul til kolonne 1. Dette vil være hovedbilledet bag vores overlejringsdesign.

Upload et billede, der ligner mere et portræt end et landskab. Sørg for, at den er bred nok til at dække hele kolonnebredden på alle browserstørrelser.

BEMÆRK: Du kan bruge landskabsbilleder, men du skal muligvis justere placeringen af ​​overlejringselementerne i overensstemmelse hermed, så de ikke overlapper hinanden.

Under fanen Design, opdater følgende:

• Margen (bund): 0px

Under fanen Avanceret, tilføj følgende CSS-klasse:

• CSS-klasse: et-overlay-billede

Tilføjelse af billedoverlejringsfarve ved hjælp af et "Divider"-modul

For at skabe billedoverlejringsfarven bruger vi et Divider-modul.

Tilføj først et Divider-modul under billedet.

Placer derefter separatoren i absolut, så den er placeret over billedet:

• Stilling: Absolut

Under fanen Indhold, opdater følgende:

• Vis divider: NEJ

• Baggrundsfarve: rgba(247,37,133,0.8)

Opdater derefter højden og bredden af ​​separatoren:

• Bredde: 100 %
• Højde: 100%

Med designet på plads skal du tilføje følgende CSS-klasse til splitteren:

• og-overlay-emne

BEMÆRK: Denne klasse skal føjes til alle overlejringsdesignelementer, som du kun ønsker at vise, når du svæver. Hvis du ikke ønsker, at elementet skal skjules i starten, skal du udelade det.

For at hjælpe dig med at holde styr på designelementer/moduler skal du åbne lagmodalen og mærke modulet Divider ("Overlay Color").

Tilføjet overlejringstekst

Tilføj et nyt tekstmodul under Divider-modulet. Dette vil tjene som overlejringshovedtekst, der vises oven på billedet, når du svæver.

Opdater indhold med en H2 titel:

<h2>Coaching</h2>

Opdater derefter tekstmoduletiketten til fremtidig reference.

Under fanen Design, opdater følgende:

• Tekstjustering: Centreret
• Tekstfarve: Lys

• Skrifttype: Cormorant Garamond
• Skrifttypevægt: Fed
• Tekststørrelse: 40px

• Bredde: 100 %
• Maks. bredde: 85 %

Under fanen Avanceret, opdater positionen som følger:

• Stilling: Absolut
• Beliggenhed: øverst i midten
• Lodret offset: 10 %

BEMÆRK: Den lodrette forskydning skal muligvis justeres afhængigt af billedets størrelsesforhold. For eksempel kan et billede af landskabstypen kræve mindre forskydning

Tilføj derefter følgende CSS-klasser til tekstmodulet:

• CSS-klasse: et-overlay-element flyttes ned

Ud over klasse "og-overlejringselement", tilføjer vi en ekstra klasse "Flyt ned" for at bruge den tilpassede CSS til at flytte overskriften lidt ned, når du svæver.

Oprettelse af den overlejrede brødtekst

For at oprette brødtekstoverlejringen kan vi duplikere det tekstmodul, der bruges til overskriftsoverlejringen. Før du opdaterer duplikatparametrene, skal du ændre etiketten til "Overlay Body".

Åbn tekstindstillingerne for det nye tekstmodul og opdater indhold af kroppen med et par sætninger af afsnitstekst.

Under fanen Avanceret, ændre den absolutte placering af modulet til midten.

Da vi ikke ønsker, at dette skal flyttes ved at svæve (kun vises), skal du opdatere CSS-klassen til kun at inkludere følgende:

• CSS-klasse: et-overlay-element

Oprettelse af overlejringsknappen

Den sidste overlejring på dette billede vil være knappen. For at oprette knappen skal du tilføje et nyt knapmodul under det andet tekstmodul.

Før du ændrer designet, skal du opdatere knappens position som følger:

• Stilling: absolut
• Lodret offset: 10 %

Nu skal knappen være centreret på den nederste del af billedet.

I fanen Avanceret, opdater CSS-klassen og tilføj et tilpasset CSS-kodestykke til hovedelementet som følger:

• CSS-klasse: et-overlay-item move-up

• Hoved CSS-element:

min-width: 15em;

Bemærk, at der er tilføjet en ekstra klasse til knappen for at flytte den lidt opad, når du svæver. Dette er for at komplementere den nedadgående bevægelse af overskriftsteksten ved svævning.

Opdater derefter følgende designindstillinger:

• Knapjustering: centreret
• Brug brugerdefinerede stilarter til knap: JA
• Knaptekststørrelse: 14px
• Baggrundsfarve: #4361ee

• Knapkantbredde: 0 pixels
• Knap bogstavafstand: 0,1em
• Skrifttypevægt: Fed
• Knap skrifttypestil: TT
• Polstring: 0,8 em (top og bund), 0px (venstre og højre)

Tilføjelse af tilpasset CSS med kodemodulet

Tilføj et kodemodul under knappen.

Indsæt derefter følgende CSS i kodeindholdet. Glem ikke at pakke koden ind i de nødvendige script-tags.

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

Koden er kommenteret, så du kan forstå, hvor du kan justere CSS'en, så den passer til dine behov.

Dupliker kolonnen for mere design

Åbn det modale lag, slet først de to tomme kolonner.

Dupliker derefter kolonnen, der indeholder billedoverlejringsdesignet, to gange. Du skal have i alt tre kolonner med identiske designs.

Oprettelse af billedoverlejringsdesign #2

Til dette næste design placerer vi knappen i midten af ​​billedet (altid synlig). Dernæst flytter vi overskriften og brødteksten til visning fra toppen og bunden af ​​billedet.

Juster placering af brødtekst og CSS-klasse

Åbn indstillingerne for overlay-brødtekstmodulet i kolonne 2, og opdater positionen:

• Beliggenhed: nederst i midten
• Lodret offset: 5 %

Opdater derefter CSS-klassen med følgende:

• CSS-klasse: flytning af et-overlay-element

Juster knapplacering og CSS-klasse

Åbn derefter knapindstillingerne i kolonne 2 og opdater følgende positionsplacering:

• Sted: Center

Fjern derefter CSS-klassen, da vi ønsker, at knappen altid skal forblive synlig.

Åbn modulindstillingerne for Divider (overlay-farve), og skift baggrunden som følger:

• Baggrund: rgba(67,97,238,0.8)

Åbn derefter knapindstillingerne og skift baggrundsfarven:

• Baggrundsfarve: #f72585

Juster CSS-billede og klasse

Åbn derefter billedindstillingerne og upload et nyt billede (hvis det ønskes).

Tilføj derefter følgende CSS-klasse til billedet:

• CSS-klasse: et-overlay-billede et-skala

Bemærk, at ud over klassen "et-overlay-image" er der en ekstra klasse kaldet "et-scale", som vil øge størrelsen på billedet, hvilket skaber en zoom-in-effekt ved svævning.

Oprettelse af billedoverlejringsdesign #3

Nu er det tid til at oprette det tredje billedoverlejringsdesign i kolonne 3.

Juster overlejringsbrødtekstindhold og CSS-klasse

Start med at åbne overlay-brødtekstmodulets indstillinger i kolonne 3. Tilføj derefter H2-overskriften over afsnitsteksten. Nu vil begge være inde i et modul.

Fjern derefter CSS-klassen, så teksten forbliver synlig over billedet.

Juster knapforskydning og CSS-klasse

Åbn knapmodulets indstillinger og opdater den lodrette positionsforskydning:

• Lodret offset: 5 %

Fjern Overlay Header

Fjern derefter modulet Overlay Header Text.

Juster overlejringsfarve og CSS-klasse

Åbn modulindstillingerne for Divider (overlay-farve), og opdater baggrunden til følgende:

• Venstre baggrundsgradientfarve: rgba(67,97,238,0.8)
• Højre baggrundsgradientfarve: rgba(247,37,133,0.8)
• Udgangsposition: 25%
• Endelig position: 75 %

Og da vi ønsker at holde gradientoverlejringen synlig hele tiden, skal du fjerne CSS-klassen.

Juster billedets CSS-klasse

Til sidst tilføjer vi en ekstra CSS-klasse ("et-rotate") til hovedbilledet, som vil ændre størrelsen og rotere billedet, når du svæver.

• CSS-klasse: et-overlay-billede et-rotate

Sidste hånd

Før vi tjekker vores endelige resultater, skal vi foretage nogle justeringer.

Fjern standard bundmargen for alle moduler

Da vi allerede har opdateret marginen med en bundmargen på 0px, kan vi udvide denne margin til alle moduler.

Højreklik på margenindstillingen og vælg "Udvid marginer".

Vælg derefter at udvide margenen til Alle moduler på siden.

Fjern duplikerede kodemoduler

Sørg for at fjerne de ekstra kodemoduler, der blev overført fra den første kolonneduplikering. Du skal kun have én. Du kan nemt gøre dette fra de modale lag.

Endelige resultater

Nu hvor vores tre designs er færdige, lad os tage et kig på de endelige resultater af vores billedoverlejringsdesign.

Download DIVI nu!!!

Og her er designet på mobilen. Overlejringseffekter gælder kun på skrivebordet. Derfor vil overlejringer stadig være synlige på mobilen.

Download DIVI nu!!!

Konklusion

At skabe brugerdefinerede billedoverlejringer er faktisk meget sjovt. Der er utallige designs, du kan teste visuelt med Divi Builder. 

Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.

Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...