Divi: Sådan opretter du en klæbrig baggrundsmaske

Divi: Sådan opretter du en klæbrig baggrundsmaske

Kunne du tænke dig at give en anden dimension til din hjemmeside med en Divi Sticky-baggrundsmaske?

Divi's klæbrige muligheder giver dig mulighed for at skabe et væld af forskellige designs til dine hjemmesider. Dagens selvstudie tilføjer listen over ting, du kan gøre. Forhåbentlig vil dette være med til at sætte gang i din kreativitet. 

Vi viser dig, hvordan du opretter en klæbrig baggrundsmaske.

Denne tutorial kombinerer Divi's klæbrige muligheder med filterblandingstilstande. 

undersøgelse

Før vi dykker ned i denne tutorial, lad os tage et hurtigt kig på resultatet på forskellige skærmstørrelser.

kontor

Divi Sticky baggrundsmaske

Mobil

Divi Sticky baggrundsmaske

Lav et design i Divi

Tilføj en ny sektion

Baggrundsbillede

Start med at tilføje et nyt afsnit til den side, du arbejder på. 

  • Upload et baggrundsbillede efter eget valg.
  • Baggrundsbillede Størrelse: Cover
Divi

afstand

Skift til fanen Sektionsdesign, og fjern standardafstandsindstillingerne nedenfor:

  • Polstring (top og bund): 0px

Overløb

Skjul derefter sektionens overløb i fanen Avanceret.

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

Tilføj linje #1

Struktur af søjlen

Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:

dimensionering

Uden at tilføje nogen moduler skal du åbne linjeindstillingerne og ændre størrelsesindstillingerne i overensstemmelse hermed:

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

afstand

Fjern også alle standardmargener.

  • Polstring (top og bund): 0px

Filtre

Vi tilføjer også en blandingstilstand til denne linje. Denne blandingstilstand hjælper os med at oprette en maske senere i selvstudiet.

  • Blandingstilstand: Skærm

Z-indeks

For at sikre, at denne række forbliver under den anden række, tilføjer vi til sektionen, vi ændrer z-indekset i fanen Avanceret.

  • Z-indeks: 9

Kolonneparametre

Dernæst åbner vi kolonneindstillingerne.

Baggrundsfarve

Vi bruger en helt hvid baggrundsfarve.

  • Baggrundsfarve: #ffffff

CSS hovedelement

Vi tilføjer også en højdeværdi til hovedelementet i fanen Avanceret.

height: 100vh;

Tilføj et "Tekst"-modul til linjen

Lad indholdsområdet være tomt

Når du er færdig med rækkeindstillinger, skal du tilføje et tekstmodul til dets kolonne. 

Lad indholdsområdet stå tomt. I stedet bruger vi dette modul til at skabe en form, der afslører en del af sektionens baggrundsbillede.

Baggrundsfarve

Vi vil bruge en mørkere baggrundsfarve til dette modul.

  • Baggrundsfarve: #0b3835

dimensionering

Dernæst får vi adgang til fanen Design og ændre størrelsesparametrene som følger:

  • bredde:
    • Desktop: 20vw
    • Tablet og telefon: 70 vw
  • Højde :
    • Desktop: 30vh
    • Tablet og telefon: 10vh

afstand

Vi tilføjer også en øverste margen.

  • Margin (øverst): 3vh

Grænse

Og vi vil inkludere afrundede hjørner.

  • Afrundede hjørner: 15px

Tilføj linje 2

Struktur af søjlen

Fortsæt ved at tilføje endnu en række til sektionen ved hjælp af følgende kolonnestruktur:

dimensionering

Åbn linjeindstillingerne og foretag følgende ændringer i indstillingerne dimensionering følge:

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

Z-indeks

Forøg også rækkens z-indeks. Dette vil hjælpe med at sikre, at rækkeindholdet forbliver over den forrige række.

  • Z-indeks: 12

Tilføj et "Tekst"-modul til linjen

Tilføj H2 indhold

Det er tid til at tilføje moduler, startende med et første tekstmodul, der indeholder H2-indhold efter eget valg.

H2 tekstindstillinger

Tilpas H2-tekstindstillingerne som følger:

  • Skrifttype: Playfair Display
  • Tekstjustering: Centreret
  • Tekstfarve: #0b3835
  • Størrelse:
    • Desktop: 150px
    • Tablet og telefon: 45px
  • Linjehøjde: 1,2 em

dimensionering

Derefter skal du navigere til størrelsesindstillinger og anvende følgende indstillinger:

  • Maks. bredde: 980px
  • Justeringsmodul: Center

afstand

Inkluder også en negativ topmargin.

Tilføj et "Knap"-modul til rækken

Tilføj indhold til knappen

Det næste og sidste modul, vi skal bruge i denne række, er et knapmodul. Tilføj indhold efter eget valg.

Knapjustering

Skift til fanen Design af modulet og ændre justeringen af ​​knappen.

  • Knapjustering: Center

Knapindstillinger

Gå derefter til knapindstillingerne og anvend følgende stilarter:

  • Brug brugerdefinerede stilarter til knappen: Ja
  • Knaptekststørrelse: 15px
  • Knaptekstfarve: #ffffff
  • Knap baggrundsfarve: #000000
  • Knapkantbredde: 0 pixels
  • Knapkantradius: 100px
  • Knapskrifttype: Montserrat
  • Knap skrifttypevægt: Semi fed
  • Skrifttype: TT

afstand

Vi tilføjer også tilpassede margen- og polstringsværdier til afstandsindstillingerne.

  • Margin (bund): 60vh
  • Polstring (top og bund): 15px
  • Polstring (venstre og højre): 40px

Påfør klæbrige effekter

Åben linje #1

Nu hvor vi har bygget bunden af ​​vores design, er det tid til at anvende de klæbrige stilarter. Åbn indstillingerne for første linje.

klæbrig bund maske

Anvend klæbrige muligheder

Gå til fanen Avanceret og anvend følgende vedvarende indstillinger:

  • Sticky Position: Hold dig til toppen
  • Nederste klæbrig grænse: Sektion
  • Forskydning fra omkringliggende klæbrige elementer: JA
  • Overgangsstandard og Sticky Styles: JA

Tekstmodulets klæbrige indstillinger

Nu hvor linjen er Sticky, kan vi anvende stilarter på tekstmodulet inde i linjen. Åbn modulindstillingerne.

klæbrig bund maske

Sticky størrelse

Gå derefter til størrelsesindstillinger og anvend følgende størrelsesværdier:

  • Bredde (klæbende): 80 vw
  • Højde (klæbende): 90vh
Divi

Overgangstid

Til sidst skal du navigere til fanen Avanceret og øge varigheden af ​​overgangen.

  • Overgangsvarighed: 500ms

undersøgelse

Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.

kontor

Divi Sticky baggrundsmaske

Download DIVI nu!!!

Mobil

Divi Sticky baggrundsmaske

Download DIVI nu!!!

Konklusion

I denne artikel har vi endnu en gang vist dig, hvordan du bliver kreativ med Divis klæbrige muligheder. 

Specifikt har vi vist dig, hvordan du kombinerer Divis filterindstillinger og klæbrige muligheder.

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.

...

Divi: Sådan opretter du en lydhør harmonika-skyder

Divi: Sådan opretter du en lydhør harmonika-skyder

Kunne du tænke dig at oprette en lydhør Divi-harmonika-skyder?

En harmonika-skyder er en sjov og attraktiv måde at vise indhold på et lille rum. 

Harmonikaskydere består normalt af flere elementer (eller paneler) stablet vandret som folderne på et gardin. Og når du holder markøren over et af panelerne, udvides det for at afsløre indhold, mens de andre harmonikapaneler trækker sig sammen. Det er her, vi får den harmonika-lignende effekt af at udvide og trække sig sammen.

I denne tutorial viser vi dig, hvordan du opretter en lydhør harmonika-skyder i Divi ved kun at bruge CSS. For at gøre dette vil vi bruge flere Divi-moduler til at fungere som harmonikapaneler. 

undersøgelse

Her er et hurtigt overblik over, hvad vi vil opnå i denne tutorial.

Download DIVI nu!!!

Oprettelse af en ny side med Divi Builder

For at komme i gang skal du gøre følgende:

  • Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
responsiv Divi harmonika skyder
  • Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
  • klik derefter på Begynd at bygge (Byg fra skrammer)
responsiv Divi harmonika skyder

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

Oprettelse af den responsive harmonika-skyder i Divi

Oprettelse af linjen

For at starte skal du tilføje en række med én kolonne til den almindelige sektion.

Åbn derefter linjeindstillinger og opdater følgende:

  • Brug tilpasset tagrendebredde: JA
  • Rendebredde: 1
  • Bredde: 100 %
  • Maks. bredde: 800px
  • Højde: 400px (Desktop); 700px (tablet og telefon)

Værdierne for bredde og maksimal bredde kan ændres, så de passer til dine behov. Harmonikaen vil passe og fungere i enhver linjebredde.

Kolonneparametre

Nu hvor vi har defineret en højde for rækken, skal du åbne kolonneindstillingerne og tilføje følgende CSS til hovedelementet:
desktop

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

tablet

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

Oprettelse af harmonikapanelet med Blurb-moduler

Harmonikaskyderen kan bygges ved hjælp af enhver type modul(er). Hvis vi ville, kunne vi bruge en kombination af forskellige moduler til at fungere som harmonikapanel. Men til dette design skal vi bruge Blurb-moduler.

Start med at tilføje et Blurb-modul til linjen.

Blurb Mod Design

Åbn præsentationsmodulets indstillinger, og opdater følgende:

Behold den fiktive titel og kropsindhold. Det kan vi altid ændre senere.

Opdater derefter præsentationsikonet som følger:

  • Ikon (skrivebord): vandret pillinjeikon (se skærmbillede)
  • Ikon (Hover): (se skærmbillede)
  • Ikon (tablet og telefon): (se skærmbillede)

Baggrund

Giv derefter forklaringen et baggrundsbillede og en gradientoverlejring ved svævning som følger:

  • Tilføj et baggrundsbillede, der er mindst 1000px bredt
  • Baggrundsbillede Position: Midt til venstre

Derefter tilføjes en gradient baggrundsoverlay.

Hover

  • Baggrundsgradient til venstre (svæv): #3e215b
  • Højre (hover) baggrundsgradient: rgba(0,0,0,0)
  • Gradientretning: 90 grader
  • Firkantet gradient over baggrundsbillede : JA

ikon

  • Ikonfarve: #ffffff
  • Billede/ikonplacering: Højre

Skift derefter til fanen Design og opdater følgende:

Tekstens titel og krop

  • Titelskrifttype: Poppins
  • Skrifttypevægt: semi-fed
  • Titeltekstfarve: gennemsigtig (skrivebord), #ffffff (hover)
  • Titel Tekststørrelse: 22px
  • Brødtekstfarve: gennemsigtig (skrivebord), #ffffff (hover)

Kassehøjde og skygge

Når teksten er tilpasset, giv modulet en højde på 100 % og en boksskygge som følger:

  • Højde: 100%
  • Box Shadow: Se skærmbillede
  • Vandret position: -12px
  • Lodret position: 0px

Tilpasset CSS

For at vores harmonikapaneler (eller Blurb-modul) kan vokse og trække sig sammen med resten af ​​modulerne, skal vi tilføje tilpasset CSS for at ændre størrelsen på modulet med flex-grow. 

Da vi kommer til at have i alt 5 moduler, der udgør harmonikaen, tilføjer vi "flex:1" for standardtilstanden og ændrer den derefter til "flex:5" på svævetilstanden.

Under fanen Avanceret skal du tilføje følgende tilpassede CSS til hovedelementet Blurb:

kontor

flex:1;
position: relative !important;
transition: flex 800ms !important;

På svæv

flex:5;
position: relative !important;
transition: flex 800ms !important;

Tilføj derefter følgende tilpassede CSS til Blurb-indholds-CSS:

kontor

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
skabe en lydhør Divi harmonika-skyder

tablet

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
skabe en lydhør Divi harmonika-skyder

Overløb og overgang

  • Vandret overløb: Skjult
  • Lodret overløb: Skjult
  • Overgangsvarighed: 400ms
  • Overgangshastighedskurve: Lineær
skabe en lydhør Divi harmonika-skyder

Meget godt! Det var en seriøs tilpasning af et Blurb-modul. Men den gode nyhed er, at alt, hvad vi skal gøre, er at duplikere dem for at skabe de resterende harmonikapaneler.

Dublerede layouts for flere harmonikapaneler

Hold markøren over præsentationsmodulet og klik på dobbeltikonet fire gange for at oprette i alt fem harmonikapaneler (eller moduler).

Derefter skal du opdatere baggrundsbillederne for hver af de nye blurbs, du duplikerede.

skabe en lydhør Divi harmonika-skyder

Endelig resultat

Nu hvor vi har gennemgået alle trinene, lad os se slutresultatet.

Download DIVI nu!!!

Konklusion

Denne lydhøre harmonika-skyder har virkelig nogle unikke elementer, der gør den sjov at bruge. Harmonikapaneler udvider og trækker sig problemfrit sammen ved museoverflader uden nogen uventede fejl. 

Og præsentationsikoner ændres, når du svæver og på mobilen for at booste UX. Vi håber, at denne tutorial 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.

...

Divi: Sådan opretter du brugerdefinerede billedoverlejringer

Divi: Sådan opretter du brugerdefinerede billedoverlejringer

Kunne du tænke dig at lære, hvordan man designer tilpassede billedoverlejringer med Divi?

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

I denne vejledning viser vi dig, hvordan du designer tilpassede billedoverlejringer i 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.

Divi Builder

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

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

Divi Builder

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 indholdet 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 i det nye tekstmodul, og opdater brødteksten med nogle få sætninger med 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.

Divi billedoverlejringer

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.

Divi

Endelige resultater

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

tilpassede billedoverlejringer med Divi

Download DIVI nu!!!

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

tilpassede billedoverlejringer med Divi

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.

...

Divi: Sådan tilføjer du et hamburgerikon til menumodulet

Divi: Sådan tilføjer du et hamburgerikon til menumodulet

Vil du tilføje et hamburgerikon til Divi Menu-modulet?

Hvis du bygger din header i Divi, er der flere måder at gøre det på. 

Vi skal vise dig, hvordan du tilføjer et hamburgerikon til Divi Menu-modulet. Dette hamburgerikon vises allerede som standard på mindre skærme. Men i denne vejledning vil vi sørge for, at der også vises et hamburgerikon på skrivebordet. 

Dette giver et minimalt udseende til din header, samtidig med at den tilføjer interaktion.

Lad os gå.

undersøgelse

Før vi dykker ned i denne tutorial, lad os tage et hurtigt kig på resultatet.

Download DIVI nu!!!

Opret en ny global header-skabelon med Divi Builder

Gå til Divi Theme Builder

Fra WordPress dashboard, gå til 'Divi > Theme Builder' klik derefter 'Tilføj global overskrift'

Divi Theme Builder

Tilføj et nyt globalt overskrift

En rullemenu vises. For at begynde at bygge fra bunden, fortsæt ved at vælge "Byg global header".

Design af det globale header-design

Sektionsindstillinger

Baggrundsfarve

Når du først er i skabeloneditoren, er det tid til at begynde at designe headeren. Du vil bemærke, at der allerede er et afsnit. Åbn sektionsindstillingerne og tilføj en baggrundsfarve.

  • Baggrundsfarve: #f6f9fb

afstand

Skift til fanen Design i afsnittet og ændre følgende parametre.

  • Polstring (top og bund): 0px

Tilføj en ny linje

Struktur af søjlen

Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:

dimensionering

Åbn linjeindstillingerne, gå til fanen Design og ændre den maksimale bredde i størrelsesindstillingerne.

  • Maks. bredde: 1px

afstand

Skift derefter top- og bundpolstringen i afstandsindstillingerne.

  • Polstring (top og bund): 5px

Tilføj et menumodul til kolonnen

Vælg den menu, der skal tilføjes

Tilføj derefter et menumodul til rækkekolonnen og vælg en dynamisk menu efter eget valg.

Download logo

Upload et logo.

Fjern baggrundsfarve

Fjern derefter standard hvid baggrundsfarve fra modulet.

Menutekstindstillinger

Skift til fanen Design af modulet og ændre tekstparametrene i menuen i overensstemmelse hermed:

  • Skrifttypemenu: Poppins
  • Menuskrifttypevægt: Semi fed
  • Tekstfarve: #003e51
  • Menutekststørrelse: 16px
  • Tekstjustering: Højre

Indstillinger for rullemenu

Skift derefter indstillingerne fra rullemenuen.

  • Rullemenulinjefarve: #7159c8

Ikonindstillinger

Skift også ikonindstillingerne.

  • Indkøbskurv Ikon Farve: #670fff
  • Søg ikon farve: #670fff
  • Hamburger Menu Ikon Farve: #670fff

dimensionering

Gå derefter til størrelsesindstillingerne og tildel en maksimal logobredde.

  • Logo Maks. bredde: 280px

afstand

Fjern også standard bundmargen fra modulet.

  • Margen (bund): 0px

Gør sektionen klæbrig

Nu hvor vores menu er på plads, gør vi også sektionen klistret. Åbn sektionsindstillingerne, gå til fanen Avanceret og anvend følgende indstillinger:

  • Sticky Position: Hold dig til toppen
  • Forskydning fra omkringliggende klæbrige elementer: JA
  • Overgangsstandard og Sticky Styles: JA

Baggrundsfarve i klæbrig tilstand

Skift derefter baggrundsfarven for afsnittet til klæbrig tilstand.

  • Baggrundsfarve: #ffffff

Sticky state box skygge

Påfør også en kasseskygge på sektionen.

  • Skyggefarve (skrivebord): rgba(0,0,0,0)
  • Skyggefarve (klæbende): rgba(0,0,0,0.04)

Tilføjet et hamburgerikon til menumodulet

Tilføj CSS ID til menumodulet

Åbn først menumodulets indstillinger, gå til fanen Avanceret og tildel et CSS ID.

  • CSS ID: divi-menu

Tilføj et kodemodul under menumodulet

Tilføj derefter et kodemodul under menumodulet.

Tilføj script- og stiltags

Vi vil bruge CSS og JQuery kode. For at forberede dette tilføjer vi stil- og script-tags.

Tilføj CSS-kode

Vi indsætter følgende linjer med CSS-kode mellem style-tags:

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

Tilføj JQuery

Tilføj linjer med åbnings-JQuery-kode

Dernæst vil vi have JQuery-koden. Tilføj følgende linjer med JQuery-kode mellem script-tags:

jQuery(function($){
$(document).ready(function(){
 
});
});

Opret variabler

Opret derefter nogle variabler.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

Placer skifte-ikonet i menumodulet

Placer derefter skifteikonvariablen i menumodulet ved hjælp af følgende kodelinje:

toggleIcon.insertAfter(desktopMenu);

Tilføj en klikfunktion

Vi tilføjer også en klikfunktion.

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

Gem ændringer i Divi Theme Builder

Nu hvor alt er på plads, er der kun tilbage at gemme alle Divi Theme Builder-modifikationerne og se resultatet!

Divi Theme Builder

undersøgelse

Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på slutresultatet.

hamburgerikon i Divi Menu-modulet

Download DIVI nu!!!

Konklusion

I denne artikel viste vi dig, hvordan du bliver kreativ med din globale header i Divi Theme Builder. 

Specifikt har vi vist dig, hvordan du også tilføjer et hamburgermenuikon på skrivebordet. Som standard vises et hamburgerikon på tablet og mobil.

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 for at fuldføre dine hjemmesideoprettelsesprojekter. Eller se også vores guide på WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

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

...

Divi: Sådan opretter du en menu med drejehjul, når du svæver

Divi: Sådan opretter du en menu med drejehjul, når du svæver

Kunne du tænke dig at lave en original Divi-menu i form af et snurrende hjul, når du svæver?

At oprette et drejende menuhjul, når du svæver, er en sjov måde at fremvise nyttige links på din hjemmeside. Dette ville være en fantastisk måde at give flere opfordringer til handling i en header for at dirigere brugerne, hvor de skal hen. Og det ville også være en fed underkategorimenu til din blog.

I denne vejledning viser vi dig, hvordan du opretter et roterende menuhjul, når du svæver i Divi. Dette kan gøres ved at bruge en kombination af indbyggede Divi-indstillinger og nogle brugerdefinerede css-uddrag.

undersøgelse

Før vi går ind i denne tutorial, lad os tage et kig på det resultat, vi ønsker at opnå.

Download DIVI nu!!!

Opret en ny side med Divi Builder

For at komme i gang skal du bruge følgende:

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

original Divi-menu i form af et roterende hjul ved svævning

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.

Design af det roterende menuhjul i Divi

Opret sektion og linje 1

I den sektion, der er til stede som standard, skal du tilføje en række med følgende kolonnestruktur.

Tilføj derefter et tekstmodul til linjen med følgende indhold.

Opdater derefter tekstdesignet som følger:

  • Tekstskrifttype: Del Tech
  • Tekstbogstavafstand: 1px
  • Overskrift 2 Tekststørrelse: 8vw

Tilføj linje 2 for at bygge hjulet

Dernæst skal vi tilføje en ny række til en kolonne under række 1.

Før vi begynder at tilføje vores tekstmoduler til vores links, skal vi designe vores linje som et hjul. Der vil være masser af optimeringer nødvendige på rækken for at lave vores hjuldesign.

Læs også: Sådan afsløres indhold på Hover Section Divider i Divi 

For at komme i gang skal du åbne Row 2 Settings og opdatere følgende:

  • Baggrundsfarve: #02366b
  • Venstre baggrundsgradientfarve: rgba(0,0,0,0.45)
  • Højre baggrundsgradientfarve: #02366b
  • Gradienttype: Cirkulær
  • Radial retning: Center
  • Udgangsposition: 36%
  • Slutposition: 0 %
  • Brug tilpasset tagrendebredde: JA
  • Rendebredde: 1
  • Bredde: 500px
  • Maks. bredde: 500px (desktop), automatisk (tablet og telefon)
  • Højde: 500px (desktop), automatisk (tablet og telefon)
  • Polstring (skrivebord): 0px (top og bund)
  • Polstring (tablet og telefon): 20px (øverst, nederst og venstre)
  • Margin (telefon): -10 % (højre)

Vi skal indstille både højden og bredden af ​​linjen til 500 pixels, så det er en perfekt firkant. Dette vil give os mulighed for at give den en perfekt cirkulær form ved hjælp af Divis afrundede hjørner (kantradius).

  • Afrundede hjørner: 50 %

Dernæst kan vi tilføje et andet niveau af cirkeldesign ved hjælp af en kasseskygge som følger:

  • Box Shadow Blur Styrke: 0px
  • Box Shadow Spread Styrke: 210px
  • Skyggefarve: rgba(2,54,107,0.66)

Dernæst tilføjer vi et lille uddrag af CSS for at centrere indholdet af vores række lodret. Under fanen Avanceret, tilføj følgende tilpassede CSS i hovedelementet.

display:flex;align-items:center;

Tilføjelse af links

Hvert led i hjulet vil blive oprettet med et modul tekst. Vi vil oprette i alt seks moduler tekst. Fem af modulerne tekst vil indeholde links til hjulet, og den anden vil indeholde titlen på menuen.

Start med at oprette et nyt "Tekst"-modul.

Opdater derefter tekstindstillingerne som følger:

  • Bodysuit: "Element 1"
  • Tekstskrifttype: Del Tech
  • Tekstfarve: #ffffff
  • Størrelse: 16px (standard), 20px (Hover)
  • Bogstavafstand: 1px
  • Tekstlinjehøjde: 60px
  • Bredde: 250px (desktop), automatisk (tablet og telefon)
  • Højde: 60px
  • Polstring (venstre): 20px

Gem indstillingerne indtil videre. Dupliker derefter tekstmodulet 4 gange for at skabe i alt 5 tekstmoduler.

Placering af Tekstlinks/moduler

Vi er nu klar til at placere vores led langs omkredsen af ​​hjulet. For at gøre dette vil vi opdatere hvert modul tekst med transformationsmuligheder, der flytter/oversætter og roterer modulet på plads.

Opdag også: Sådan opretter du et flydende kolonnegitter på hover i divi

For at lette dette skal du implementere wireframe-visningstilstanden og mærke tekstmodulerne begyndende med link 1 øverst til link 5 nederst.

Link 1

Vi starter med at redigere Link 1. Åbn tekstmodulets indstillinger for Link 1 og opdater følgende:

  • Transform Translate (Y-akse): 120 px (desktop), 0 px (tablet og telefon)
  • Transformer rotation (Z-akse): 60 grader (desktop), 0 px (tablet og telefon)
  • Oprindelse: 50 % (i midten til højre)

Link 2

Åbn tekstmodulets indstillinger for link 2 og opdater følgende:

  • Transform
    • Oversæt (Y-akse): 60px (desktop), 0px (tablet og telefon)
    • Z-akse rotation: 30 grader (desktop), 0px (tablet og telefon)
    • Oprindelse: 50 % (i midten til højre)

Link 3

Da tekstmodulet til link 3 er i midten, kan vi lade det sidde.

Link 4

Åbn tekstmodulets indstillinger for link 2 og opdater følgende:

  • Transformer:
    • Oversæt Y-akse: -60px (desktop), 0px (tablet og telefon)
    • Z-akse rotation: -30 grader (desktop), 0px (tablet og telefon)
    • Oprindelse: 50 % (midt til højre)

Link 5

Åbn tekstmodulets indstillinger for link 2 og opdater følgende:

  • Transformer:
    • Oversæt Y-akse: -120px (desktop), 0px (tablet og telefon)
    • Z-akse rotation: -60 grader (desktop), 0px (tablet og telefon)
    • Oprindelse: 50 % (i midten til højre)

Lad os nu se resultatet indtil videre. Læg mærke til, hvordan links/teksten i tekstmodulerne kører perfekt langs cirklens omkreds.

Tilføjet menumærke

For at tilføje menuetiketten skal vi tilføje endnu et tekstmodul oven på de fem tekstmoduler, vi allerede har. Gå videre og tilføj et nyt tekstmodul over link 1.

Opdater derefter kropsindholdet med følgende:

Menu

For at fremskynde designet skal du kopiere tekstmodulets stilarter til link 3 og indsætte disse modulstile i det nye tekstmodul.

Opdater derefter følgende:

  • Tekstlinjehøjde: 300px (desktop), 20px (tablet og telefon)
  • Højde: Gendan standardindstillingen (auto)
  • Transform rotation (Z-akse): 180 grader (desktop), 0 grader (tablet og telefon)
  • Transformationsoprindelse: 50 % (midt til højre)

Når det er gjort, er vi nødt til at give Menu Label Text-modulet en absolut position. For at gøre dette skal du tilføje følgende tilpassede CSS til hovedelementet:

position: absolute!important;

Find nu ud af resultatet. Du bør se, at menupunktet er på hovedet til højre for hjulet.

Tilføjet spinning hover effekt til line/hjul

For at tilføje den roterende svæveeffekt til rækken skal du opdatere rækkeindstillingerne som følger:

  • Transformer rotation (Z-akse): 180 grader (skrivebord), 0 grader (hover), 0 grader (tablet og telefon)

Opdater derefter overgangsindstillingerne som følger:

  • Overgangsvarighed: 450ms
  • Speed ​​​​Curve Transition: Nem ind-ud

Se nu, hvordan hjulet drejer, når det svæver over det.

Oprettelse af et to-kolonne layout til sektionen

I øjeblikket består layoutet af to en-kolonne rækker stablet oven på hinanden. Vi kan dog bruge egenskaben flex css til at justere de to linjer vandret. 

For at gøre dette kan vi tilføje et lille uddrag af tilpasset CSS til sektionen. Når det er gjort, bliver vi nødt til at justere afstanden lidt for at få tingene helt rigtige.

Åbn sektionsindstillingerne og tilføj følgende brugerdefinerede css til hovedelementet:

display:flex;

Opdater linje 1 afstand

Opdater derefter størrelsen og afstanden til linje 1 som følger:

  • Bredde: 40 % (skrivebord)
  • Margin (Desktop): 5 % tilbage

Endelig resultat

Lad os nu se det endelige resultat.

Download DIVI nu!!!

Alternativt halvhjulsdesign

Et interessant alternativt design er at skjule den højre halvdel af hjulet uden for sektionen, så linkene skjules og derefter afsløres ved svævning. 

For at gøre dette skal du gå videre og duplikere hele afsnittet, der indeholder den tegning, vi lige har oprettet. 

I dubletafsnittet skal du opdatere parametrene i linje 1 som følger:

  • Bredde: 70% (desktop)

Opdater derefter indstillingerne i linje 2 for at skubbe hjulet ud af sektionen som følger:

  • Margin: -250px højre

Vi skal bruge -250px, fordi hjulets samlede bredde er 500px, og vi vil skjule præcis halvdelen af ​​linjen.

Indstil derefter sektionens synlighed til skjult som følger:

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

Her er det endelige resultat.

original Divi-menu i form af et roterende hjul ved svævning

Download DIVI nu!!!

Konklusion

Et drejende ledhjul er et af de elegante designelementer, der kan engagere besøgende med en subtil og unik svæveeffekt. Og det er ret forbløffende, hvor nemt dette design kan gøres med Divis indbyggede designindstillinger. 

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.

...

Divi: Sådan afslører du indhold, når du svæver over sektionsopdelingen

Divi: Sådan afslører du indhold, når du svæver over sektionsopdelingen

Kunne du tænke dig at vide, hvordan du afslører indhold, når du holder musen over sektionsopdelingen i Divi?

Sektionsopdelere er fortsat et populært Divi-designelement. Der er mange typer af skillevægge at vælge imellem med nyttige muligheder, der gør det nemt at tilføje unikke overgange og baggrunde til din side.

I denne vejledning vil vi bruge sektionsopdelere lidt anderledes. Divi giver dig mulighed for at justere højden og layoutet af hver skillevæg. Dette giver os mulighed for at placere separatorer over bestemte områder eller sektionsindhold. 

Ved at bruge svæveindstillingen til splitterhøjden kan vi tilføje unikke svæveeffekter, der afslører delvist skjult indhold. Dette fungerer godt til at henlede opmærksomheden på en bestemt opfordring til handling eller knap, som du ønsker, at besøgende skal klikke på.

undersøgelse

Download DIVI nu!!!

Opret en ny side med Divi Builder

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

Sektionsadskiller i Divi

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.

Design af Section Divider Hover Effect i Divi

Oprettelse af sektionen og linjen

Opret en almindelig sektion med en række med to kolonner.

Før du tilføjer et modul, skal du åbne sektionsindstillingerne og opdatere følgende:

Baggrundsgradient (venstre): #73ba57
Baggrundsgradient (højre): #2a4c23
Bredde: 80 %
Maks. bredde: 1px
Sektionsopretning: Center

sektionsopdeler svæveeffekt

Tilføj afsnitstitel

For at tilføje sektionstitlen skal du oprette et tekstmodul og indsætte følgende tekst:

<h2>The Juice</h2>

Opdater derefter designet som følger:

Skrifttype: Lato
Tekststørrelse: 80px
Bogstavafstand: -5px
Margen: -50px (øverst), -40px (nederst)
Z-indeks: -1

Den brugerdefinerede margen og z-indekset vil gøre det muligt for teksten at forblive bag det billede, vi tilføjer i næste trin.

Tilføj billede

Tilføj et billedmodul under tekstmodulet med titlen i kolonne 1. Upload derefter et billede med en gennemsigtig baggrund. Vi bruger et billede fra layoutpakken Juice Shop 240 pixels gange 300 pixels.

Justering af justeringen af ​​billedet i midten.

Tilføj et "Call To Action"-modul i kolonne 2

Tilføj et Call To Action-modul i kolonne 2.

Tilføj en knaplink-URL for at sikre, at knappen vises.

CTA-baggrund og titeltekststyling

Opdater derefter følgende designindstillinger:

Baggrund: #ffffff
Tekstfarve: mørk
Titelskrifttype: Lato
Titel Skrifttypevægt: Tung
Skrifttype: TT
Titel Tekststørrelse: 18px

Tilpas CTA-knappen

Opdater knapdesignet som følger:

  • Brug brugerdefinerede stilarter til knap: JA
  • Knaptekstfarve: #ffffff
  • Knap baggrundsfarve: #73ba57
  • Kantbredde: 0px

Tilpas CTA-modulets kant

Tilføj derefter en kant for at indramme modulet som følger:

Kantbredde: 10px
Kantfarve: rgba(115,186,87,0.15)

Tilføjede svæveeffekten til splitteren for at afsløre modulet "Call To Action".

Nu er det tid til at tilføje svæveeffekten til sektionsopdelingen for at afsløre modulet "Call To Action". For at gøre dette skal vi først oprette vores sektionsopdelere.

Læs også: Divi: Sådan afslører du indhold, når du svæver over faner

Tilføjelse af den øverste separator

Åbn sektionsparametrene og den øverste separator med følgende parametre.

Top Divider Style: se skærmbillede
Topdeler farve: #73ba57
Skillehøjde: 70% (standard), 0% (hover)
Top Divider Flip: vandret

Bemærk, at højden af ​​separatoren starter med en standardhøjde på 70 %, og derefter ændres til en højde på 0 % ved svævning.

Tilføjet bunddeler

Tilføj derefter en lavere separator svarende til sektionen med følgende parametre.

  • Bottom Divider Style: se skærmbillede
  • Bunddeler farve: #73ba57
  • Skillehøjde: 70 % (standard), 0 % (hover)
  • Divider Flip: vandret
  • Arrangement: På toppen af ​​afsnitsindhold

Denne nedre skillevæg starter også med en højde på 70 %, som falder til 0 % ved svævning. Men da splitter-arrangementet er indstillet over indholdet, skjuler sektionsopdeleren den nederste del af "Call To Action"-modulet i kolonne 1. Derefter afsløres resten af ​​modulet.

Tjek resultatet indtil videre.

Download DIVI nu!!!

Tilføjet box shadow hover-effekt for unik overgang og design

For en unik overgang og design på hover, kan vi tilføje en box shadow hover effekt, der vil finde sted samtidigt med splitter hover effekten. For at gøre dette skal du tilføje følgende boksskygge til sektionen.

  • Box Shadow: se skærmbillede
  • Vandret position: 0px
  • Lodret position: 0px
  • Box Shadow Spread Styrke: 0px (standard), 150px (hover)
  • Skyggefarve: #73ba57

Sænk overgangens varighed

For et sidste trin, lad os bremse overgangens varighed.

Overgangsvarighed: 700ms

Endelig resultat

Nu hvor vi har gennemgået alle trinene, lad os se slutresultatet.

Sektionsadskiller i Divi

Download DIVI nu!!!

Konklusion

Vi håber, at denne artikel gav dig lidt inspiration til at skabe unikke sektionsopdelere svæveeffekter for at afsløre indhold. 

Faktisk kan justering af svævesplitteren være en fantastisk designfunktion i sig selv. Derudover bør prøvedesignerne hjælpe dig med at starte din egen udforskning og design.

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.

...