Wanneer u de manier waarop u blogposts op uw . maakt, stroomlijnt Site web, is de kans groot dat je ergens in je artikel een aantrekkelijke CTA wilt opnemen. Met de nieuwe Gutenberg Layout Block-integratie van Divi kunt u eenvoudig overal in uw Gutenberg-blogpost een nieuw, door Divi gebouwd blok toevoegen. Hierdoor kunt u de inhoud algemene blogpost in de Gutenberg-omgeving, terwijl je nog steeds een aangepaste Divi CTA maakt met behulp van de ingebouwde opties van Divi. Het beste van beide werelden! In deze tutorial laten we u zien hoe u een inline, geanimeerd Divi CTA-lay-outblok aan uw Gutenberg-bericht toevoegt. We zullen ook het Divi CTA-lay-outblok JSON-bestand gratis delen!
Laten we gaan.
Mogelijk resultaat
Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.
Het JSON-layoutblok importeren
Download de lay-out in de Divi-bibliotheek
Om het JSON-bestand dat u hierboven kon downloaden te importeren, gaat u naar uw Divi-bibliotheek in de backend van uw WordPress-dashboard en klikt u op 'Importeren en exporteren'.
Selecteer vervolgens het JSON-bestand in uw downloadmap en klik op "Divi Builder Layouts importeren".
Voeg een nieuw Divi-blok toe in Gutenberg
Nadat uw lay-out is geïmporteerd, kunt u uw Gutenberg-bericht openen en een nieuw Divi-lay-outblok toevoegen.
Importeer een JSON-bestand uit opgeslagen presentaties
Klik vervolgens op "Laden uit bibliotheek", ga naar "Uw opgeslagen lay-outs" en selecteer de lay-out om het Divi CTA-lay-outblok in uw blogbericht te importeren. Dat is het!
Laten we beginnen met recreëren!
Gebruik de publicatiesjabloon voor het derde themapakket
Gebruik het Third Theme Builder Pack
Het is tijd om helemaal opnieuw te beginnen! Allereerst komt het ontwerp dat we opnieuw maken overeen met het derde themacreatiepakket dat op het Divi-blog is gepubliceerd. Ga naar het artikel en download de JSON-bestanden voor dit themacreatiepakket.
Ga naar Divi Theme Builder
Nadat je het derde pakket voor het maken van thema's hebt gedownload, heb je toegang tot de Divi Theme Builder.
Download de publicatiesjabloon
Download de postsjabloon van het Theme Building Pack door op het pictogram in de rechterbovenhoek te klikken.
Selecteer vervolgens het postsjabloon en klik op "Divi Theme Builder-sjablonen importeren". Zorg ervoor dat u de wijzigingen ook in de themabouwer opslaat. Op dit moment hebben we de blogpostsjabloon van het Theme Building Pack aan al onze posts toegewezen.
Open een bestaande Gutenberg-publicatie of maak een nieuwe
De volgende stap is om het Divi CTA-lay-outblok toe te voegen aan onze Gutenberg-post. Open hiervoor een bestaand artikel of maak een nieuw artikel.
Voeg online een nieuw Divi-blok toe
Eenmaal in het bericht kunt u een nieuw Divi-lay-outblok toevoegen.
Maak een nieuwe lay-out in het Divi-blok
Dan heb je twee opties. Selecteer de optie "Maak een nieuwe layout".
Sectie-instellingen
tussenruimte
Eenmaal in de Divi-editor voor lay-outblokken, ziet u een sectie. Open deze sectie en voeg aangepaste margewaarden toe om ruimte te creëren rond de sectiecontainer.
- Bovenmarge: 50px
- Ondermarge: 50px
- Linkermarge: -10%
- Rechtermarge: -10%
Regel # 1 toevoegen
Kolomstructuur
Blijf een nieuwe rij toevoegen met behulp van de volgende kolomstructuur:
sizing
Open, zonder meer modules toe te voegen, de lijnparameters en vergroot de breedte en maximale breedte.
- Breedte: 100%
- Max breedte: 100%
Voeg scheidingsteken # 1 toe aan de kolom
zichtbaarheid
Het is tijd om modules toe te voegen, te beginnen met een scheidingsmodule. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.
- Scheidingsteken tonen: Ja
lijn
Schakel over naar het tabblad moduleontwerp en wijzig de rij-instellingen als volgt:
- Lijnkleur: # fc526e
- Lijnstijl: solide
- Lijnpositie: hoog
sizing
Wijzig ook de maatparameters.
- Gewicht verdeler: 3px
- Breedte: 30%
- Uitlijning van de module: rechts
- Hoogte: 3px
Animatie
En verander de animatie-instellingen dienovereenkomstig:
- Animatiestijl: dia
- Animatierichting: links
- Animatieduur: 2000ms
- Animatievertraging: 500 ms
- Animatie-intensiteit: 100%
- Startdekking animatie: 0%
Voeg verdeler # 2 toe aan kolom
zichtbaarheid
Laten we naar de volgende scheidingsmodule gaan. Nogmaals, zorg ervoor dat de optie "Show Separator" is ingeschakeld.
- Scheidingsteken tonen: Ja
lijn
Ga dan naar het moduleontwerp-tabblad en verander de rij-instellingen als volgt:
- Lijnkleur: # e1e3e8
- Lijnstijl: solide
- Lijnpositie: hoog
sizing
Wijzig vervolgens de parameters voor het modificeren van de module.
- Gewicht verdeler: 3px
- Hoogte: 3px
tussenruimte
Voeg ook aangepaste afstandswaarden toe.
- Linkermarge: 10%
- Rechtermarge: -20%
Animatie
En voltooi de module-instellingen door de animatie-instellingen als volgt te wijzigen:
- Animatiestijl: dia
- Animatierichting: links
- Animatieduur: 2000ms
- Animatievertraging: 500 ms
- Animatie-intensiteit: 100%
- Startdekking animatie: 100%
U kunt zoveel scheidingstekens toevoegen als u uw animatie wilt aanpassen.
Voeg een regel # 2 toe
Kolomstructuur
Voeg nog een rij toe aan de sectie met behulp van de volgende kolomstructuur:
sizing
Zonder meer modules toe te voegen, opent u de lijnparameters en wijzigt u de grootteparameters als volgt:
- Gebruik een aangepaste gootbreedte: Ja
- Dakgootbreedte: 1
- Breedte: 70%
- Lijnuitlijning: midden
Voeg tekstmodule # 1 toe aan kolom
Voeg H2-inhoud toe
Voeg vervolgens een eerste tekstmodule toe aan de rijkolom met inhoud H2 naar keuze.
H2 tekstinstellingen
Schakel over naar het tabblad Ontwerpen en wijzig de H2-tekstinstellingen dienovereenkomstig:
- Tekstkleur van item 2: # fc526e
- Koptekst 2 Tekstgrootte: 28 px
tussenruimte
Voeg vervolgens aangepaste vulwaarden toe.
- Bovenste vulling: 50 px
- Vulling onderkant: 50px
- Linker opvulling: 50px
grens
We gebruiken ook een linkerrand.
- Breedte linkerrand: 2px
- Kleur linkerrand: # fc526e
Animatie
En voltooi de moduleparameters door een gepersonaliseerde animatie toe te voegen.
- Animatiestijl: omdraaien
- Animatierichting: Centrum
- Animatievertraging: 1500 ms
Voeg tekstmodule # 2 toe aan de kolom
Voeg inhoud toe
Voeg nog een tekstmodule toe net onder de vorige met inhoud de votre choix.
tussenruimte
Ga naar het tabblad moduleontwerp en wijzig de opvulwaarden dienovereenkomstig:
- Bovenste vulling: 50 px
- Vulling onderkant: 50px
- Vulling rechts: 50 px
grens
Voeg vervolgens een boven- en rechterrand toe.
- Boven- en rechterrand: 2 pixels
- Kleur van boven- en rechterrand: # fc526e
Animatie
En voltooi de module-instellingen door de animatie-instellingen als volgt te wijzigen:
- Animatiestijl: omdraaien
- Animatierichting: Centrum
- Animatievertraging: 1700 ms
Voeg een knopmodule toe aan de kolom
Voeg een kopie toe
De volgende en laatste module die we in deze rij nodig hebben, is een knopmodule. Voeg een kopie naar keuze toe.
Knop instellingen
Schakel over naar het tabblad moduleontwerp en wijzig de knopinstellingen als volgt:
- Gebruik aangepaste stijlen voor de knop: Ja
- Knoptekstgrootte: 13px
- Knoptekstkleur: #ffffff
- Kleurverloop 1: # ff5b84
- Kleurverloop 2: # f94857
- Gradient type: lineair
- Verlooprichting: 165 graden
- Knoprandbreedte: 0 px
- Knoprandradius: 0 px
- Afstand tussen knopletters: 1 px
- Knoplettertype: Montserrat
- Gewicht lettertype knop: Semi vetgedrukt
- Knopletterstijl: hoofdletters
tussenruimte
Voeg vervolgens aangepaste bovenste en onderste vulling toe.
- Bovenste vulling: 16 px
- Vulling onderkant: 16px
Animatie
En voltooi de moduleparameters door de volgende animatie toe te voegen:
- Animatiestijl: omdraaien
- Animatievertraging: 1900 ms
Kloon lijn # 1 en plaats deze onderaan de sectie
Als u klaar bent met de eerste en tweede regel, kunt u de eerste regel klonen en het duplicaat onderaan de sectie plaatsen.
Wijzig de volgorde van scheidingstekens
Verander van plaats voor de eerste en laatste scheidingsmodules.
Final gedachten
In dit artikel hebben we u laten zien hoe u kunt profiteren van Divi's nieuwe Gutenberg-integratie en een inline, geanimeerd Divi CTA-pitchblok kunt toevoegen aan uw Gutenberg-blogpost. Dit is een geweldige manier om uw call-to-action naar keuze te benadrukken terwijl bezoekers lees de inhoud van je blogpost.
