Gå til hovedindhold

Sådan inkluderes en Divi-blok på en Gutenberg-vare

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

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

Resuméboksen, som vi vil genskabe i hele denne tutorial, er et perfekt match til postskabelonen til den sjette gratis temageneratorpakke. Gå tilblogartikel og download hele pakken.

Download divi-pakken

Gå til Divi Theme Builder

Gå derefter til Divi Theme Builder.

Få adgang til bygherretemaet

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.

Download publikationsmodellen

Å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.

Opret en divi-publikation

Tilføj et resume af titlen H2

Mot slutningen af ​​blogindlægget tilføjer vi en ny H2-titel.

Tilføj gutenberg tekstmodul titel

Tilføj en ny Divi-blok online

Dernæst tilføjer vi en ny Divi-layoutblok.

Tilføj en 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.

Opret et nyt layout inde i en divi-blok

Sektionsindstillinger

Baggrundsfarve

Inde i Divi-layoutblokeditoren vil du bemærke et afsnit. Åbn dette afsnit og brug en hvid baggrund til det.

  • Baggrundsfarve: #FFFFFF
Divi baggrundsfarve

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
Konfiguration af divi-afstand

Border

Tilføj også en grænseradius.

  • Nederst til venstre: 16px
  • Nederst til højre: 16px
Divi-modul kantkonfiguration

Skyggeæske

Med en subtil skygge af kassen.

  • Box Shadow Blurstyrke: 60px
  • Boksskyggeudbredelseskraft: 10 px
  • Skygge farve: rgba (0,0,0,0,08)
Skyggekassedivi-konfiguration

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:

Division til valg af layout

dimensionering

Uden at tilføje et modul endnu skal du åbne rækkeindstillingerne og lade rækken indtage hele bredden af ​​sektionsbeholderen.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

  • Brug en brugerdefineret tagrendebredde: Ja
  • Tagrendebredde: 1
  • Udligne kolonnehøjder: Ja
  • Bredde: 100%
  • Maks bredde: 100%
Divi line konfiguration

afstand

Fjern derefter standard øvre og nedre polstring fra linjen.

  • Øvre polstring: 0px
  • Bundpolstring: 0px
Justering af linjeafstand

Indstillinger for kolonne 1

Baggrundsfarve

Åbn derefter indstillingerne i kolonne 1 og brug en hvid baggrundsfarve til dette.

  • Baggrundsfarve: #FFFFFF
Divi-søjlejustering

afstand

Tilføj også tilpassede udfyldningsværdier.

  • Øvre polstring: 70px
  • Bundpolstring: 70px
  • Venstre polstring: 70 px
  • Højre polstring: 70px
Indstillinger for divi-kolonneafstand

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)
Divi kolonne baggrundsindstillinger

Hover transformation skala

Når du holder markøren, vil vi også skalere kolonnen lidt.

  • Højre: 105%
  • Lav: 105%
Divi-kolonneindstilling

Hover Z-indeks

Fuldfør kolonneparametrene ved at tilføje et hoverindeks z.

  • Hold indeks Z: 11
Divi-søjleposition

Føj tekstmodul nr. 1 til kolonnen

Føj et nummer til indholdsområdet

Det er tid til at tilføje moduler startende med et første tekstmodul. Føj et nummer til indholdsområdet.

Indstilling af divi-tekst

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
Konfiguration af tekstmodulkant 1

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;

Kodeindstilling css modul tekst divi

Position

Og vi afslutter modulparametrene ved at placere modulet igen.

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

  • Position: absolut
  • Placering: øverst til venstre
Divi tekstmodul positionskonfiguration

Føj tekstmodul nr. 2 til kolonnen

Tilføj H3 indhold

Lad os gå videre til det næste tekstmodul. Tilføj ethvert H3-indhold efter eget valg.

Tilføj tekstmodulindhold

H3 tekstindstillinger

Rediger derefter størrelsen på H3-teksten i modulet.

  • Titel 3 Tekststørrelse: 23px
Divi tekst modul parameter

afstand

Skift også afstandsindstillingerne.

  • Øvre margen: 100px
  • Nederste margin: 20px
Modulopdelings konfigurationsdel

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
Vis diviseparator

Linieindstillinger

Skift til moduldesignfanen og rediger rækkeindstillingerne som følger:

  • Linjefarve: # ff5e92
  • Linjestil: solid
  • Linjeposition: høj
Divi line indstilling

dimensionering

Rediger også størrelsen på modulet.

  • Divider vægt: 2px
  • Bredde: 20%
Divi størrelse

Føj tekstmodul nr. 3 til kolonnen

Tilføj indhold

Lad os gå videre til det næste og sidste tekstmodul. Tilføj indhold efter eget valg.

Tekstkolonne 3 divi

Kloningssøjle

Når du har afsluttet kolonnen og alle dens moduler, kan du klone hele kolonnen.

Kolonne en divikolonne

Skift skyggefarven på standardfeltet

Åbn indstillingerne i kolonne 2, og skift standardskyggefarven.

  • Skygge farve: rgba (0,0,0,0,06)
Skift farven på divi-skyggen

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 baggrunden for divi-gradienten

Skift grænsen for tekstmodul nr. 1

Skift også indstillingerne for modulets kant.

  • Øverste venstre, nederste venstre og nederste højre: 100 pixels
Rediger rammen for divi-tekstmodulet

Skift placering af tekstmodul nr. 1

Og placer modulet igen i den avancerede fane.

  • Placering: øverst til højre
Skift placeringen af ​​divi-teksten

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 farven på diviseparatoren

Skift alt indhold

Endelig skal du modificere hele indholdet af modulet i kolonne 2.

Skift indholdet af divi-tekstmodulet

Klon hele sektionen to gange

Når du har afsluttet det første afsnit, kan du klone det to gange.

Klon kolonnerne så mange gange som nødvendigt

Skift afstanden i det første duplikatafsnit

Åbn indstillingerne i det første duplikatsektion og ændre marginværdierne i overensstemmelse hermed:

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

  • Venstre margen: -5% (stationær computer), 0% (tablet og telefon)
  • Højre margen: -5% (kontor), 0% (tablet og telefon)
Tilpas afstanden mellem divelinjer

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
Konfigurer divi-topmargenen

Skift alt indhold

Endelig skal du modificere hele indholdet af modulet.

Rediger alt divi-indhold

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 !

Gem i divibiblioteket

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.

Forhåndsvisning af Divi-design

endelige tanker

I denne artikel har vi vist dig, hvordan du tilføjer en oversigtsboks til din Gutenberg-artikel med de nye layoutblokke fra Divi. Oversigtsbokse er en fantastisk visuel måde at hjælpe dine besøgende med at finde de oplysninger, 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.

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
1 aktier
andel1
tweet
Tilmeld