Oprettelse af værdifulde blogindlæg tager tid og kræfter. Udover at finde de bedste emner til at skrive i din niche er det også vigtigt at holde læserne engagerede og lade dem hurtigt finde de oplysninger, de leder efter.
Nu er en god måde at nærme sig denne type brugeroplevelse på at dele en visuel oversigtsboks i slutningen af dit blogindlæg lige før de sidste tanker.
Med Divis nye layoutblokke kan du nu ubesværet oprette en oversigtsboks med Divis indbyggede muligheder. I denne vejledning gennemgår vi processen, og du kan også downloade layout JSON-filen gratis!
Lad os begynde at genskabe!
Brug publikationsskabelonen til den sjette temapakke
Download Sixth Theme Builder Pack
Opsummeringsboksen, vi genskaber gennem denne øvelse, passer perfekt til den sjette temabyggerpakke-indlægsskabelon gratis. Få adgang tilblogartikel og download hele pakken.
Gå til Divi Theme Builder
Gå derefter til Divi Theme Builder.
Download publikationsskabelonen
Klik på ikonet i øverste højre hjørne og download postskabelonen fra Theme Building Pack. Sørg for at redigere eventuelle ændringer til temabyggeren bagefter.
Åbn en eksisterende Gutenberg-publikation, eller opret en ny
Når du først har tilføjet den tilsvarende indlægsskabelon, er det tid til at oprette oversigtsfeltet. Åbn eller opret et nyt indlæg ved hjælp af Gutenberg.
Tilføj et resume af titlen H2
Mot slutningen af blogindlægget tilføjer vi en ny H2-titel.
Tilføj en ny Divi-blok online
Dernæst tilføjer vi en ny Divi-layoutblok.
Opret et nyt layout inde i Divi-blokken
Når du har tilføjet blokken, har du to muligheder. Vælg at oprette et nyt layout.
Sektionsindstillinger
Baggrundsfarve
Inde i Divi-layoutblokeditoren vil du bemærke et afsnit. Åbn dette afsnit og brug en hvid baggrund til det.
- Baggrundsfarve: #FFFFFF
afstand
Skift til sektionsdesignfanen og tilføj tilpassede margen- og polstringsværdier.
- Øvre margen: 100px
- Venstre margin: -10% (kontor), 0% (tablet og telefon)
- Højre margen: -10% (kontor), 0% (tablet og telefon)
- Øvre polstring: 0px
- Bundpolstring: 0px
Border
Tilføj også en grænseradius.
- Nederst til venstre: 16px
- Nederst til højre: 16px
Skyggeæske
Med en subtil skygge af kassen.
- Box Shadow Blurstyrke: 60px
- Boksskyggeudbredelseskraft: 10 px
- Skygge farve: rgba (0,0,0,0,08)
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny linje til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje et modul endnu skal du åbne rækkeindstillingerne og lade rækken indtage hele bredden af sektionsbeholderen.
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 1
- Udligne kolonnehøjder: Ja
- Bredde: 100%
- Maks bredde: 100%
afstand
Fjern derefter standard øvre og nedre polstring fra linjen.
- Øvre polstring: 0px
- Bundpolstring: 0px
Indstillinger for kolonne 1
Baggrundsfarve
Åbn derefter indstillingerne i kolonne 1 og brug en hvid baggrundsfarve til dette.
- Baggrundsfarve: #FFFFFF
afstand
Tilføj også tilpassede udfyldningsværdier.
- Øvre polstring: 70px
- Bundpolstring: 70px
- Venstre polstring: 70 px
- Højre polstring: 70px
Skyggeæske
Fortsæt med at tilføje en subtil bokseskygge med en anden standard og svæve skygge farve.
- Box Shadow Blurstyrke: 50px
- Standard skygge farve: rgba (0,0,0,0)
- Hover-skygge farve: rgba (0,0,0,0,15)
Hover transformation skala
Når du holder markøren, vil vi også skalere kolonnen lidt.
- Højre: 105%
- Lav: 105%
Hover Z-indeks
Fuldfør kolonneparametrene ved at tilføje et hoverindeks z.
- Hold indeks Z: 11
Føj tekstmodul nr. 1 til kolonnen
Føj et nummer til indholdsområdet
Det er tid til at tilføje moduler, begyndende med et første tekstmodul. Tilføj et tal til boksen indhold.
Gradient baggrund
Tilføj derefter en gradientbaggrund.
- Farve 1: # ff5e92
- Farve 2: # ffd4b6
- Gradientretning: 165deg
Tekstindstillinger
Gå til fanen for moduldesign, og skift tekstindstillingerne som følger:
- Tekst font: Poppins
- Tekstfarve: #ffffff
- Tekststørrelse: 26px
- Justering af teksten: center
dimensionering
Derefter tildeles en bredde og en højde.
- Bredde: 150px
- Højde: 150px
Border
Tilføj også en grænseradius.
- Nederst til venstre, øverst til højre og nederst til højre: 100 pixels
CSS hovedelement
For at centrere teksten i vores container skal vi tilføje et par linjer CSS-kode til hovedmodulelementet i den avancerede fane.
display: flex;align-items: center;justify-content: center;
Position
Og vi afslutter modulparametrene ved at placere modulet igen.
- Position: absolut
- Placering: øverst til venstre
Føj tekstmodul nr. 2 til kolonnen
Tilføj H3 indhold
Lad os gå videre til næste tekstmodul. Tilføj nogle indhold H3 efter eget valg.
H3 tekstindstillinger
Rediger derefter størrelsen på H3-teksten i modulet.
- Titel 3 Tekststørrelse: 23px
afstand
Skift også afstandsindstillingerne.
- Øvre margen: 100px
- Nederste margin: 20px
Føj et separationsmodul til kolonnen
synlighed
Det næste modul, vi har brug for, er et separationsmodul. Sørg for, at indstillingen "Vis separator" er aktiveret.
- Vis separator: Ja
Linieindstillinger
Skift til moduldesignfanen og rediger rækkeindstillingerne som følger:
- Linjefarve: # ff5e92
- Linjestil: solid
- Linjeposition: høj
dimensionering
Rediger også størrelsen på modulet.
- Divider vægt: 2px
- Bredde: 20%
Føj tekstmodul nr. 3 til kolonnen
Tilføj indhold
Lad os gå videre til det næste og sidste tekstmodul. Tilføj nogle indhold de votre choix.
Kloningssøjle
Når du har afsluttet kolonnen og alle dens moduler, kan du klone hele kolonnen.
Skift skyggefarven på standardfeltet
Åbn indstillingerne i kolonne 2, og skift standardskyggefarven.
- Skygge farve: rgba (0,0,0,0,06)
Skift gradientbaggrund for tekstmodul nr. 1
Åbn det første tekstmodul i næste kolonne 2, og skift gradientbaggrund.
- Farve 1: # 7e5ce6
- Farve 2: # 25b8ee
Skift grænsen for tekstmodul nr. 1
Skift også indstillingerne for modulets kant.
- Øverste venstre, nederste venstre og nederste højre: 100 pixels
Skift placering af tekstmodul nr. 1
Og placer modulet igen i den avancerede fane.
- Placering: øverst til højre
Skift farven på separatoren
Fortsæt ved at åbne indstillingerne for separationsmodulet. Skift linjens farve, så den passer til det nye farveskema.
- Linjefarve: # 7e5ce6
Skift alt indhold
Endelig skal du modificere hele indholdet af modulet i kolonne 2.
Klon hele sektionen to gange
Når du har afsluttet det første afsnit, kan du klone det to gange.
Skift afstanden i det første duplikatafsnit
Åbn indstillingerne i det første duplikatsektion og ændre marginværdierne i overensstemmelse hermed:
- Venstre margen: -5% (stationær computer), 0% (tablet og telefon)
- Højre margen: -5% (kontor), 0% (tablet og telefon)
Skift afstanden til det andet duplikatafsnit
Åbn også det andet duplikat, slet alle marginværdier og tilføj i stedet en lavere margin.
- Nederste margin: 100px
Skift alt indhold
Endelig skal du modificere hele indholdet af modulet.
Gem layoutet i Divi-biblioteket til genbrug
Hvis du planlægger at bruge dette resuméfelt i andre blogindlæg, skal du huske at gemme det i dit Divi-bibliotek, så du nemt kan få adgang til det! Det er det !
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.
endelige tanker
I denne artikel viste vi dig, hvordan du tilføjer en oversigtsboks til dit Gutenberg-indlæg med Divis nye layoutblokke. Opsummeringsbokse er en fantastisk visuel måde at hjælpe din besøgende at finde den information, de leder efter.
Du var også i stand til at downloade layout JSON-filen gratis! Hvis du har spørgsmål, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.
