Når du strømliner den måde, du opretter blogindlæg på din Websted, sandsynligvis vil du inkludere en attraktiv CTA et sted i din artikel. Nu med Divi's nye Gutenberg Layout Block-integration, kan du nemt tilføje en ny Divi-bygget blok hvor som helst i dit Gutenberg blogindlæg. Dette giver dig mulighed for at beholde indhold overordnet blogindlæg i Gutenberg-miljøet, mens du stadig skaber en brugerdefineret Divi CTA ved hjælp af Divi's indbyggede muligheder. Det bedste fra begge verdener! I denne vejledning viser vi dig, hvordan du tilføjer en inline, animeret Divi CTA-layoutblok til dit Gutenberg-indlæg. Vi deler også Divi CTA-layoutblok JSON-filen gratis!
Lad os gå.
Muligt resultat
Før vi dykker ned i vejledningen, lad os se på resultatet på forskellige skærmstørrelser.
Import af JSON-layoutblokken
Download layoutet i Divi-biblioteket
For at importere den JSON-fil, som du kunne downloade ovenfor, skal du gå til dit Divi-bibliotek i backend på dit WordPress-dashboard og klikke på 'Import og eksport'.
Vælg derefter JSON-filen i din downloadmappe, og klik på "Import Divi Builder Layouts".
Tilføj en ny Divi-blok inde i Gutenberg
Når dit layout er importeret, kan du få adgang til din Gutenberg-meddelelse og tilføje en ny Divi-layoutblok.
Importer en JSON-fil fra gemte præsentationer
Klik derefter på "Indlæs fra bibliotek", gå til "Dine gemte layouts" og vælg det layout, der skal importeres Divi CTA-layoutblokken til dit blogindlæg. Det er det!
Lad os begynde at genskabe!
Brug publiceringsskabelonen til den tredje temapakke
Brug den tredje temabyggerpakke
Det er tid til at begynde at skabe fra bunden! Først og fremmest svarer det design, som vi genskaber, til den tredje temaoprettelsespakke, der blev offentliggjort på Divi-bloggen. Gå til artiklen og download JSON-filer til denne pakke med oprettelse af temaer.
Gå til Divi Theme Builder
Når du har downloadet den tredje temadannelsespakke, kan du få adgang til Divi Theme Builder.
Download publikationsskabelonen
Download Theme Builder Pack-postskabelonen ved at klikke på ikonet i øverste højre hjørne.
Vælg derefter postskabelonen, og klik på "Import Divi Theme Builder-skabeloner". Sørg også for at gemme ændringerne i temabyggeren. På dette tidspunkt har vi tildelt blogindlægsskabelonen fra Theme Building Pack til alle vores indlæg.
Åbn en eksisterende Gutenberg-publikation, eller opret en ny
Det næste trin er at tilføje Divi CTA-layoutblokken til vores Gutenberg-post. For at gøre dette skal du åbne en eksisterende artikel eller oprette en ny.
Tilføj en ny Divi-blok online
Når du er inde i meddelelsen, kan du tilføje en ny Divi-layoutblok.
Opret et nyt layout inde i Divi-blokken
Så har du to muligheder. Vælg indstillingen "Opret et nyt layout".
Sektionsindstillinger
afstand
Når du er inde i Divi-layoutblokeditoren, vil du bemærke et afsnit. Åbn dette afsnit, og tilføj brugerdefinerede margenværdier for at skabe plads omkring sektionsbeholderen.
- Øvre margen: 50px
- Nederste margin: 50px
- Venstre margen: -10%
- Højre margen: -10%
Tilføj linje 1
Kolonne struktur
Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje flere moduler skal du åbne linjeparametrene og øge bredden og maksimal bredde.
- Bredde: 100%
- Maks bredde: 100%
Føj separator nr. 1 til kolonnen
synlighed
Det er tid til at tilføje moduler startende med et separationsmodul. Sørg for, at indstillingen "Vis separator" er aktiveret.
- Vis separator: Ja
Linje
Skift til moduldesignfanen og rediger rækkeindstillingerne som følger:
- Linjefarve: # fc526e
- Linjestil: solid
- Linjeposition: høj
dimensionering
Skift også størrelsesparametre.
- Divider vægt: 3px
- Bredde: 30%
- Modulets justering: højre
- Højde: 3px
Animation
Og skift animationsindstillingerne i overensstemmelse hermed:
- Animationsstil: Slide
- Animationsretning: venstre
- Animationsvarighed: 2000ms
- Animationsforsinkelse: 500 ms
- Animationsintensitet: 100%
- Animation starter uigennemsigtighed: 0%
Føj divider nr. 2 til kolonnen
synlighed
Lad os gå videre til det næste separationsmodul. Igen skal du sørge for, at indstillingen "Vis separator" er slået til.
- Vis separator: Ja
Linje
Gå derefter til moduldesignfanen og skift rækkeindstillingerne som følger:
- Linjefarve: # e1e3e8
- Linjestil: solid
- Linjeposition: høj
dimensionering
Rediger derefter modulets størrelsesparametre.
- Divider vægt: 3px
- Højde: 3px
afstand
Tilføj også brugerdefinerede afstandsværdier.
- Venstre margen: 10%
- Højre margen: -20%
Animation
Og udfyld modulparametrene ved at ændre animationsparametrene som følger:
- Animationsstil: Slide
- Animationsretning: venstre
- Animationsvarighed: 2000ms
- Animationsforsinkelse: 500 ms
- Animationsintensitet: 100%
- Animation starter uigennemsigtighed: 100%
Du kan tilføje så mange separatorer, som du vil finjustere din animation.
Tilføj en linje # 2
Kolonne struktur
Føj en anden række til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje flere moduler skal du åbne linjeparametrene og ændre størrelsesparametrene som følger:
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 1
- Bredde: 70%
- Liniejustering: centrum
Føj tekstmodul nr. 1 til kolonnen
Tilføj H2 indhold
Tilføj derefter et første tekstmodul til rækkekolonnen med indhold H2 efter eget valg.
H2 tekstindstillinger
Skift til designfanen og rediger H2-tekstindstillingerne i overensstemmelse hermed:
- Tekstfarve på vare 2: # fc526e
- Header 2 Tekststørrelse: 28px
afstand
Tilføj derefter tilpassede udfyldningsværdier.
- Øvre polstring: 50px
- Bundpolstring: 50px
- Venstre polstring: 50px
Border
Vi bruger også en venstre grænse.
- Venstre kantbredde: 2px
- Venstre kantfarve: # fc526e
Animation
Og fuldfør modulparametrene ved at tilføje en personlig animation.
- Animationsstil: Vend
- Animationsretning: Center
- Animationsforsinkelse: 1500 ms
Føj tekstmodul nr. 2 til kolonnen
Tilføj indhold
Tilføj endnu et tekstmodul lige under det forrige med indhold de votre choix.
afstand
Gå til fanen til moduldesign, og skift polstringsværdierne i overensstemmelse hermed:
- Øvre polstring: 50px
- Bundpolstring: 50px
- Højre polstring: 50px
grænse
Tilføj derefter en øvre og højre kant.
- Øverste og højre kant: 2 pixels
- Farve på øverste og højre kant: # fc526e
Animation
Og udfyld modulparametrene ved at ændre animationsparametrene som følger:
- Animationsstil: Vend
- Animationsretning: Center
- Animationsforsinkelse: 1700 ms
Føj et knapmodul til kolonnen
Tilføj en kopi
Det næste og sidste modul, vi har brug for i denne række, er et knapmodul. Tilføj en kopi efter eget valg.
Knapindstillinger
Skift til moduldesignfanen, og skift knapindstillingerne som følger:
- Brug brugerdefinerede stilarter til knappen: Ja
- Knappen tekststørrelse: 13px
- Knappen tekstfarve: #ffffff
- Farvegradient 1: # ff5b84
- Farvegradient 2: # f94857
- Gradienttype: lineær
- Gradientretning: 165deg
- Knapkantbredde: 0px
- Knapgrænseradius: 0px
- Afstand mellem knapbogstaver: 1px
- Knapfont: Montserrat
- Knappens fontvægt: Semi-fed
- Knap skrifttype: store bogstaver
afstand
Tilføj derefter brugerdefineret øverste og nederste polstring.
- Øvre polstring: 16px
- Bundpolstring: 16px
Animation
Og udfyld modulparametrene ved at tilføje følgende animation:
- Animationsstil: Vend
- Animationsforsinkelse: 1900 ms
Klon linje nr. 1, og placer den i bunden af sektionen
Når du er færdig med den første og anden linje, kan du klone den første linje og placere duplikatet i bunden af sektionen.
Skift rækkefølgen på separatorer
Skift steder til de første og sidste separationsmoduler.
endelige tanker
I denne artikel har vi vist dig, hvordan du kan drage fordel af Divis nye Gutenberg-integration og tilføje en inline, animeret Divi CTA-pitch-blok til dit Gutenberg-blogindlæg. Dette er en fantastisk måde at fremhæve din opfordring til handling, mens du vælger besøgende læs indholdet af dit blogindlæg.
