Het lay-outblok Divi blijft een nuttige upgrade van de Divi-thema, waardoor we elke lay-out kunnen toevoegen Divi naar een blogpost in de Gutenberg-editor. We kunnen zelfs een lay-outblok converteren Divi in een herbruikbaar blok in Gutenberg zoals elk ander WordPress-blok. Dit opent de deur naar het stroomlijnen van enkele nuttige Divi-lay-outsjablonen in de normale stroom van het schrijven van een artikel op Gutenberg.
In deze tutorial laten we zien hoe je een herbruikbaar Divi-lay-outblok kunt maken voor Gutenberg-blogposts. Om dit te illustreren, maken we een sectieverdeler voor ons herbruikbare Divi-lay-outblokvoorbeeld voor dit artikel. Maar we kunnen dezelfde techniek gemakkelijk toepassen om een herbruikbaar Divi-lay-outblok te maken voor vrijwel alles uit de Divi-generator.
Laten we beginnen.
Creatie van een Divi-lay-outblok voor een Gutenberg-blogpost
Maak of bewerk een blogpost
Om aan de slag te gaan, moeten we een blogpost maken of een bestaande bewerken. Laten we voor dit voorbeeld toevoegen inhoud dummy aan de titel en de hoofdtekst van het artikel met behulp van een paar titel- en alineablokken. Voeg vervolgens een uitgelichte afbeelding toe en kies “Geen zijbalk” voor de lay-out onder de Divi-pagina-instellingen.
Voeg online een Divi-lay-outblok toe
Zodra we het grootste deel van het bericht hebben gemaakt, hoeven we alleen maar een nieuw Divi-lay-outblok toe te voegen waar we maar willen in het berichtgebied. inhoud van de publicatie.
Om het toe te voegen, beweegt u de muis over het gebied waar we de opt-in-e-mail willen toevoegen. Klik vervolgens op het blauwe pluspictogram om een nieuw blok toe te voegen. Selecteer in de lijst met contextuele blokken het Divi Layout-blok.
Maak een nieuwe lay-out in het Divi-lay-outblok
Zodra het Divi-lay-outblok is geselecteerd, hebben we de optie "Een nieuwe lay-out maken" of "Laden uit de bibliotheek". Omdat we een nieuwe scheidingslijn moeten bouwen voor ons voorbeeld, kiest u de optie "Nieuwe lay-out bouwen".
Ontwerp een lay-out met behulp van de Divi-lay-outblokeditor
Zodra we de knop Een nieuwe lay-out maken hebben geselecteerd, kunnen we onze Divi-lay-out ontwerpen in de lay-outblokeditor.
Voor dit voorbeeld maken we een aangepaste scheidingslijn of scheidingslijn met behulp van Divi's sectievormverdelers en een verloopachtergrond. Dit is duidelijk een ontwerpelement dat we kunnen veranderen in een herbruikbaar lay-outblok voor een gemakkelijke manier om sectiescheidingstekens toe te voegen aan een Gutenberg-bericht.
Om het sectie-scheidingsontwerp te maken, opent u de sectie-instellingen en werkt u het volgende bij:
- Achtergrondkleur linker verloop: # ddd6f3
- Verloop achtergrondkleur rechts: # faaca8
- Verlooprichting: 90 graden
- Startpositie: 30%
- Top Divider Style: zie screenshot
- Kleur van het bovenste scheidingsteken: #ffffff
- Hoogte van de bovenste verdeler: 50 px
- Stijl onderverdeler: zie screenshot
- Kleur van het onderste scheidingsteken: #ffffff
- Hoogte van de onderste verdeler: 50 px
- De onderste verdeler kantelen: horizontaal
- Hoogte: 100px
- Vulling: 0 px hoog, 0 px laag
Zodra het ontwerp is voltooid, moet u het Divi-lay-outblok opslaan.
Nu verschijnt de Divi Layout Block-sectieverdeler in de WordPress-berichteditor.
Houd er rekening mee dat de afstand boven en onder de Divi-indeling van het lay-outblok groter kan lijken op de backend dan op de frontend.
We zijn nu klaar om dit Divi-lay-outblok om te zetten in een herbruikbaar lay-outblok om het gemakkelijker te maken om hetzelfde sectiescheidingsteken in toekomstige artikelen toe te voegen.
Maar voordat u dat doet, kan het helpen om te weten wat een herbruikbaar blok in WordPress is.
Wat is een herbruikbaar lay-outblok
Een herbruikbaar lay-outblok in de standaardblokeditor van WordPress (Gutenberg) lijkt sterk op een globaal element in Divi. Het blok kan meerdere keren worden gebruikt, maar de inhoud en uiterlijk blijven voor alle instanties precies hetzelfde. En wanneer we het herbruikbare lay-outblok bewerken, wordt de wijziging toegepast op alle exemplaren van het lay-outblok voor de hele site. Zodra een lay-outblok herbruikbaar is gemaakt in WordPress, zal het blok beschikbaar zijn in de bloklijst bij het schrijven van het bericht. Dit maakt het erg handig om hetzelfde lay-outblok meerdere keren toe te voegen aan meerdere blogposts.
Transformeer het Divi-layoutblok in een herbruikbaar layoutblok
Om van ons Divi-lay-outblok een herbruikbaar blok te maken, beweegt u de muisaanwijzer over het lay-outblok en opent u het instellingenmenu door op het pictogram met de drie stippen te klikken. Selecteer vervolgens in de lijst de optie "Toevoegen aan herbruikbare blokken".
Geef vervolgens het herbruikbare blok een naam en klik op de knop Opslaan om het blok op te slaan als een herbruikbaar blok.
Als we nu een nieuw blok aan de blogpost toevoegen, kunnen we ons nieuwe herbruikbare lay-outblok in de lijst vinden (onder de herbruikbare categorieknop). Klik gewoon op het herbruikbare lay-outblok en het wordt aan het bericht toegevoegd.
Als we nu live naar de post kijken, zien we twee exemplaren van dezelfde exacte sectiedeler.
Zodra we het herbruikbare blok meerdere keren in de post of site hebben gebruikt, kunnen we elk van de instanties van het herbruikbare lay-outblok bewerken en die wijzigingen zullen worden toegepast op alle instanties van het blok voor de hele site. .
Om het herbruikbare lay-outblok te wijzigen, beweegt u over het blok en klikt u op de knop Wijzigen rechtsboven in het blok.
Selecteer (klik) vervolgens de lay-out in het herbruikbare blok en klik op het bewerkingspictogram in het bovenste menu dat verschijnt. We kunnen ook op de link Lay-out bewerken klikken onder het tabblad Item in de rechterzijbalk.
Pas vervolgens het lay-outontwerp naar wens aan. Voor dit voorbeeld kunnen we de kleuren wijzigen die worden gebruikt voor de verloopachtergrond.
Zorg ervoor dat u na het opslaan van de lay-out op de knop Opslaan rechtsboven in het herbruikbare lay-outblok klikt. Werk vervolgens het bericht bij en bekijk de wijzigingen op de live site.
U zult merken dat de ontwerpwijzigingen worden bijgewerkt voor alle instanties van de herbruikbare lay-out.
Tip: gebruik een herbruikbaar lay-outblok als sjabloon
Er zijn momenten dat we een aangepaste versie van het herbruikbare lay-outblok op onze post willen gebruiken. Dit stelt ons in staat om een herbruikbaar lay-outblok aan het bericht toe te voegen als een startsjabloon, zodat we het lay-outblok voor een specifieke instantie kunnen aanpassen zonder het herbruikbare blok voor de hele site te beïnvloeden.
Om een herbruikbaar lay-outblok als sjabloon te gebruiken, voegt u eerst het herbruikbare blok toe aan het bericht.
Open vervolgens het blokmenu en selecteer de optie "omzetten naar normaal blok".
We kunnen nu de lay-out van een specifiek ontwerp voor dat geval wijzigen zonder andere herbruikbare blokken te beïnvloeden.
Final gedachten
Het maken van herbruikbare Divi-lay-outblokken kan handig zijn, vooral voor Divi-ontwerpelementen zoals een sectiescheidingslijn. Hierdoor kunnen we de scheidingslijn herhaaldelijk gebruiken in onze berichten. Dit vereenvoudigt niet alleen het proces van het schrijven van een artikel, het geeft ons ook de mogelijkheid om het blokontwerp voor de hele site veel gemakkelijker bij te werken. In dit artikel hebben we laten zien hoe u een sectieverdeler kunt toevoegen als een herbruikbaar blok, maar dezelfde techniek kan om talloze andere redenen worden gebruikt om eindeloze herbruikbare Divi-lay-outblokken te maken.
