Vil du gerne have indhold som afsløres, når du svæver over udvidelige vinkeltapper ind Divi ?

Det er altid sjovt at opdage nye og kreative måder at interagere med brugere på ved hjælp af hover-effekter. En god måde at gøre dette på er at afsløre indhold på svæv ved hjælp af udvidelige hjørnefaner. Dette giver brugeren mulighed for at holde markøren over en fane i hjørnet af en kolonne eller et billede for at udvide en overlejring med en indhold ekstra nytte for brugeren.

I denne tutorial vil vi lave et layout Divi helt unik, der vil afsløre indhold ved svævning ved hjælp af udvidelige vinkelfaner. Faktisk skal vi vise dig, hvordan du designer en udtrækkelig hjørnegering til alle fire hjørner af en søjle i Divi.

Lad os starte!

undersøgelse

Her er et hurtigt kig på layoutet af de udvidelige hjørnefaner, vi skal bygge sammen. Læg mærke til, hvor smukt symmetriske svæveeffekterne og indholdet er.

Opret en ny side med Divi Builder

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

Udvidelige hjørnefaner 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.

Oprettelse af det udvidelige indholdsoverlejringslayout i Divi

Design af en udtrækkelig hjørnegering fra nederste højre position

For at starte skal du tilføje en række med to kolonner til den almindelige sektion.

Før du tilføjer et modul, skal du opdatere linjeparametrene som følger:

  • Brug tilpasset tagrendebredde: JA
  • Rendebredde: 4

For dette første element, der vises, vil vi oprette et kolonnebaggrundsbillede, der vil have en hjørnefane (ved hjælp af et modul bagsidetekst) nederst til højre i kolonnen som udvider og dækker hele kolonnen/billedet ved svævning.

Læs også vores vejledning om Divi: Sådan opretter du et flydende kolonnegitter ved svævning

Lad os starte med at tilføje et Blurb-modul.

Tilføj Blurb-modul til kolonne 1

Indstillinger for kolonne 1

Når forklaringen er på plads, skal du åbne rækkeindstillingerne, opdatere følgende:

  • Baggrundsbillede [indsæt billede]
  • Baggrundsbilledstørrelse: Faktisk størrelse

BEMÆRK: Til dette eksempel bruger vi de gennemsigtige baggrundsølbilleder taget fra layoutpakken «Bryghus". De er på 128 pixels gange 359 pixels, hvorfor vi bruger den faktiske billedstørrelse.

Kant af kolonne 1
  • Afrundede hjørner: 10px nederst til højre
  • Kantbredde (højre og nederst): 2px
  • Kantfarve (højre og nederst): #e94558
Tilpasset CSS og overløb

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

height: 400px;

Drop-down mulighed 'Sigtbarhed' og foretag følgende ændringer:

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

Tilføj indhold til Blurb-modulet

Vi er nu klar til at begynde at tilpasse Blurb-modulet i kolonne 1. Åbn modulindstillingerne og opdater følgende:

  • Titel: Mango IPA
  • Krop:
<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>
  • Billede: Tilføj det samme billede, som bruges til kolonnebaggrunden

Tilpasning af Blurb-modul

Giv billedet en svævende baggrundsfarve som følger:

  • Baggrund (skrivebord): gennemsigtig
  • Desktop (hover): rgba(255,255,255,0.9)

Under fanen Design, opdater følgende:

  • Billede/ikonplacering: Højre
  • Titelskrifttype: Oswald
  • Skrifttypevægt: Semi fed
  • Skrifttype: TT
  • Tekststørrelse: 40px
  • Brødtekstfarve (skrivebord): gennemsigtig
  • Brødtekstfarve (svæver): #121212
  • Billede/ikonbredde: 100px (computer), 64px (telefon)
  • Indholdsbredde: 100 %
  • Højde: 100%
  • Polstring (skrivebord): 15% (top og bund), 8% (venstre og højre)
  • Polstring (hover): 8 % (top, bund, venstre og højre)
  • Afrundede hjørner (skrivebord): 20px øverst til venstre
  • Afrundede hjørner (Hover): 10px øverst til venstre
  • Kantbredde (øverst og venstre): 4px (skrivebord), 2px (hover)
  • Kantfarve (øverst og venstre): #e94558
Mulighed for transformation (skrivebord)
  • Transform skala (X og Y): 50 %
  • Transform Oversæt
    • Y-akse: 50 %
    • X-akse: 30 %

Læs også vores vejledning om: Divi: Sådan opretter du en klæbrig sidefod med "Reveal"-effekt

  • Transform Oprindelse: nederst og højre
Transformeringsmuligheder (hover)
  • Transform skala (Y og X) (Hover): 100 %
  • Transformer Oversæt (Y og X) (Svæver): 0 %

For at vende det fremhævede billede til højre skal du tilføje følgende brugerdefinerede CSS til området Blurb -indhold :

direction: rtl

BEMÆRK: "rtl" står for "Højre til venstre", som ændrer standardrækkefølgen af ​​indhold (venstre mod højre).

Resultat

Lad os se slutresultatet af vores hjørnefane, der udvider sig fra nederste højre position. Læg mærke til, hvordan den udvides for at fylde hele kolonnen, når du svæver.

Design af en udtrækkelig hjørnegering fra nederste venstre position

Dublet kolonne

For at oprette hjørnefanen, der udvider sig fra den nederste venstre position, kan vi genstarte designet ved at duplikere hele kolonnen. Åbn rækkeindstillinger og dupliker kolonne 1. Slet derefter den ekstra kolonne, så du kun har to nøjagtige dubletter.

Opdater 2-kolonneindstillingerne

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

  • Afrundede hjørner: 10 px nederst til venstre
  • Kantbredde (højre): 0px
  • Kantbredde (venstre): 2px
  • Farve: #e94558

Opdater parametrene for Blurb-modulet

Opdater derefter Blurb-indstillingerne som følger:

  • Tekstjustering: højre
  • Afrundede hjørner (skrivebord): 20px øverst til højre
  • Afrundede hjørner (Hover): 10px øverst til højre
  • Venstre kantbredde: 0px
  • Højre kantbredde: 4px (skrivebord), 2px (hover)
  • Højre kantfarve: #e94558
  • Transform Translate (X-Axis) (Desktop): -30 %
  • Transform Origin (Desktop): nederst til venstre

Sørg derefter for at fjerne den tilpassede CSS i Blurb-indholdsområdet.

Resultat

Her er resultatet. Læg mærke til, hvordan denne er symmetrisk med den første og vokser fra nederste venstre position af søjlen.

Design af en udtrækkelig hjørnegering fra øverste højre position

Vi er nu klar til at begynde vores sidste to ekspanderende hjørnegeringsdesign. For at få et forspring, lad os duplikere hele rækken, der indeholder den blurb, vi allerede har designet.

Opdater 1-kolonneindstillingerne

Åbn derefter indstillingerne for dubletrækken, åbn derefter indstillingerne for kolonne 1 og opdater følgende:

  • Afrundede hjørner: 10px øverst til højre
  • Nederste kantbredde: 0px
  • Øverste kantbredde: 2px
  • Øverste kantfarve: #e94558

Opdater parametrene for Blurb-modulet

Åbn derefter Blurb-modulets indstilling og opdater følgende:

  • Afrundede hjørner (skrivebord): 20px nederst til venstre
  • Afrundede hjørner (Hover): 10px nederst til venstre
  • Øverste kantbredde: 0px
  • Nederste kantbredde: 4px (skrivebord), 2px (hover)
  • Nederste kantbredde: #e94558
  • Transform Translate (Y-akse) (Desktop): -50 %
  • Transform Oprindelse: øverst til højre
Tilpasset CSS

Lige nu kan vi kun se den nederste venstre del af præsentationsmodulet, som ikke viser vores titel som de to andre præsentationer i rækken ovenfor. For at få vist titlen på fanen, skal vi flytte titlen nederst til venstre i billedet med tilpasset CSS.

Tilføj følgende tilpassede CSS til området Blurb titel :

position: absolute;
bottom: 0;
left: 15px;

Tilføj derefter følgende CSS til indholdsområdet Blurb -indhold :

direction: rtl;
height: 100%;

Design af en udtrækkelig hjørnegering fra øverste venstre position

For vores fjerde og sidste ekspanderende hjørne-fane-hover-effekt placerer vi den i øverste venstre hjørne for at fuldende det symmetriske design af hele gitterlayoutet.

Opdater 2-kolonneindstillingerne

Under rækkeindstillinger skal du åbne kolonne 2-indstillinger og opdatere følgende:

  • Borders Corners: 10 px øverst til venstre
  • Nederste kantbredde: 0px
  • Øverste kantbredde: 2px
  • Øverste kantfarve: #e94558

Opdater parametrene for Blurb-modulet

Åbn derefter Blurb-modulets tekstindstillinger i kolonne 2 og opdater følgende:

  • Afrundede hjørner (skrivebord): 20px nederst til højre
  • Afrundede hjørner (Hover): 10px nederst til højre
  • Øverste kantbredde: 0px
  • Nederste kantbredde: 4px (skrivebord), 2px (hover)
  • Bundkantsfarve: #e94558

Opdater derefter transformationsmulighederne:

  • Transform Translate (Y-akse) (Desktop): -50 %
  • Transform Oprindelse: øverst til venstre
Tilpasset CSS

Tilføj derefter følgende brugerdefinerede CSS til området Blurb titel :

position: absolute;
bottom: 0%;
right: 0%;

Tilføj også følgende CSS i boksen Blurb-indhold :

height: 100%;

Afslut designe layoutet

Sektions baggrundsfarve

Tilføj en sektionsbaggrundsfarve som følger:

  • Baggrund: #efefef

Tilføj titel

For at oprette titlen skal du tilføje en linje til en kolonne i midten af ​​de to linjer

Tilføj derefter et tekstmodul.

Tilføj indholdet: "Sæsonbestemt".

Opdater derefter følgende indstillinger:

  • Skrifttype: Merriweather
  • Skrifttypevægt: Fed
  • Stil: TT
  • Tekstjustering: Centreret
  • Tekstfarve: #999999
  • Størrelse: 50px (desktop), 30px (tablet), 24px (telefon)
  • Bogstavafstand: 1em
Kan udvides i Divi
  • Polstring (venstre): 50px (desktop), 30px (tablet), 24px (telefon)
Kan udvides i Divi

Endelig resultat

Se slutresultatet af layoutet med udvidende hjørnefaner.

Udvidelige hjørnefaner i Divi

Og her er designet på mobilen.

Udvidelige hjørnefaner i Divi

Download DIVI nu!!!

Konklusion

Hjørnefanerne vist i denne tutorial vil helt sikkert fungere for enhver type indhold, du vil vise på din Websted Divi. 

Du behøver heller ikke bruge alle fire hjørner. For eksempel kan du oprette et gitterlayout for billeder ved kun at bruge fanerne i øverste højre hjørne til at afsløre indhold, når du svæver.

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.

...