Het maken van waardevolle blogposts kost tijd en moeite. Naast het vinden van de beste onderwerpen om in uw niche te schrijven, is het ook belangrijk om lezers betrokken te houden en hen in staat te stellen snel de informatie te vinden waarnaar ze op zoek zijn.
Een goede manier om dit soort gebruikerservaring te benaderen, is door een visueel samenvattingsvak aan het einde van uw blogbericht te delen, vlak voor de laatste gedachten.
Met de nieuwe lay-outblokken van Divi kunt u nu moeiteloos een samenvattingsvak maken met de ingebouwde opties van Divi. In deze tutorial zullen we je door het proces leiden en je kunt ook het layout JSON-bestand gratis downloaden!
Laten we beginnen met recreëren!
Gebruik de publicatiesjabloon voor het zesde themapakket
Download het zesde Theme Builder-pakket
Het overzichtsvak dat we in deze tutorial opnieuw zullen maken, komt perfect overeen met de postsjabloon van het Sixth Theme Builder Pack en is gratis. Toegang krijgen totblog artikel en download het volledige pakket.
Ga naar Divi Theme Builder
Ga dan naar de Divi Theme Builder.
Download de publicatiesjabloon
Klik op het pictogram in de rechterbovenhoek en download de postsjabloon uit het Theme Building Pack. Zorg ervoor dat u achteraf eventuele wijzigingen in de themabouwer bewerkt.
Open een bestaande Gutenberg-publicatie of maak een nieuwe
Nu je de bijbehorende postsjabloon hebt toegevoegd, is het tijd om het overzichtsvenster te maken. Open of maak een nieuw bericht met Gutenberg.
Voeg een samenvatting van titel H2 toe
Tegen het einde van het blogbericht voegen we een nieuwe H2-titel toe.
Voeg online een nieuw Divi-blok toe
Vervolgens voegen we een nieuw Divi-layoutblok toe.
Maak een nieuwe lay-out in het Divi-blok
Nadat je het blok hebt toegevoegd, heb je twee opties. Kies ervoor om een ​​nieuwe lay-out te maken.
Sectie-instellingen
Achtergrond kleur
In de Divi-lay-outblokeditor ziet u een sectie. Open dit gedeelte en gebruik er een witte achtergrond voor.
- Achtergrondkleur: #FFFFFF
tussenruimte
Schakel over naar het sectieontwerp-tabblad en voeg aangepaste marge- en opvulwaarden toe.
- Bovenmarge: 100px
- Linkermarge: -10% (kantoor), 0% (tablet en telefoon)
- Rechter marge: -10% (kantoor), 0% (tablet en telefoon)
- Bovenste vulling: 0 px
- Vulling onderkant: 0px
grens
Voeg ook een randradius toe.
- Linksonder: 16 px
- Rechtsonder: 16 px
Schaduw doos
Met een subtiele schaduw van de doos.
- Box Shadow Blur Strength: 60 px
- Voortplantingskracht boxschaduw: 10px
- Schaduwkleur: rgba (0,0,0,0,08)
Voeg een nieuwe regel toe
Kolomstructuur
Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:
sizing
Open de rij-instellingen zonder nog een module toe te voegen en laat de rij de volledige breedte van de sectiecontainer innemen.
- Gebruik een aangepaste gootbreedte: Ja
- Dakgootbreedte: 1
- Kolomhoogten gelijk maken: Ja
- Breedte: 100%
- Max breedte: 100%
tussenruimte
Verwijder vervolgens de standaard bovenste en onderste vulling van de lijn.
- Bovenste vulling: 0 px
- Vulling onderkant: 0px
Kolom 1 instellingen
Achtergrond kleur
Open vervolgens de instellingen in kolom 1 en gebruik hiervoor een witte achtergrondkleur.
- Achtergrondkleur: #FFFFFF
tussenruimte
Voeg ook aangepaste vulwaarden toe.
- Bovenste vulling: 70 px
- Vulling onderkant: 70px
- Vulling links: 70 px
- Vulling rechts: 70 px
Schaduw doos
Ga verder door een subtiele doosschaduw toe te voegen met een andere standaard- en zweefschaduwkleur.
- Box Shadow Blur Strength: 50 px
- Standaard schaduwkleur: rgba (0,0,0,0)
- Hover schaduwkleur: rgba (0,0,0,0,15)
Beweeg transformatieschaal
Bij zweven willen we de kolom ook enigszins schalen.
- Rechts: 105%
- Laag: 105%
Zweef Z-index
Voltooi de kolomparameters door een zweefindex z toe te voegen.
- Hover Index Z: 11
Voeg tekstmodule # 1 toe aan de kolom
Voeg een nummer toe aan het inhoudsgebied
Het is tijd om modules toe te voegen, te beginnen met een eerste tekstmodule. Voeg een nummer toe aan het vak inhoud.
Achtergrond met kleurovergang
Voeg vervolgens een achtergrond met kleurovergang toe.
- Kleur 1: # ff5e92
- Kleur 2: # ffd4b6
- Verlooprichting: 165 graden
Tekst instellingen
Ga naar het tabblad moduleontwerp en wijzig de tekstinstellingen als volgt:
- Tekstlettertype: Poppins
- Tekstkleur: #ffffff
- Tekstgrootte: 26px
- Uitlijning van de tekst: midden
sizing
Wijs vervolgens een breedte en een hoogte toe.
- Breedte: 150 px
- Hoogte: 150px
grens
Voeg ook een randradius toe.
- Linksonder, rechtsboven en rechtsonder: 100 pixels
CSS hoofdelement
Om de tekst in onze container te centreren, moeten we een paar regels CSS-code toevoegen aan het hoofdmodule-element op het tabblad Geavanceerd.
display: flex;align-items: center;justify-content: center;
Positie
En we zullen de moduleparameters beëindigen door de module te verplaatsen.
- Positie: absoluut
- Locatie: linksboven
Voeg tekstmodule # 2 toe aan de kolom
Voeg H3-inhoud toe
Laten we verder gaan met de volgende tekstmodule. Voeg wat toe inhoud H3 naar keuze.
H3 tekstinstellingen
Wijzig vervolgens de grootte van de H3-tekst van de module.
- Titel 3 Tekstgrootte: 23px
tussenruimte
Wijzig ook de instellingen voor de afstand.
- Bovenmarge: 100px
- Ondermarge: 20px
Voeg een scheidingsmodule toe aan de kolom
zichtbaarheid
De volgende module die we nodig hebben, is een scheidingsmodule. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.
- Scheidingsteken tonen: Ja
Lijn instellingen
Schakel over naar het tabblad moduleontwerp en wijzig de rij-instellingen als volgt:
- Lijnkleur: # ff5e92
- Lijnstijl: solide
- Lijnpositie: hoog
sizing
Wijzig ook de grootte van de module.
- Gewicht verdeler: 2px
- Breedte: 20%
Voeg tekstmodule # 3 toe aan de kolom
Voeg inhoud toe
Laten we verder gaan met de volgende en laatste tekstmodule. Voeg wat toe inhoud de votre choix.
Klonen kolom
Nadat u de kolom en alle modules hebt voltooid, kunt u de hele kolom klonen.
Wijzig de schaduwkleur van het standaardvak
Open de instellingen in kolom 2 en verander de standaard schaduwkleur.
- Schaduwkleur: rgba (0,0,0,0,06)
Wijzig de verloopachtergrond van tekstmodule nr. 1
Open de eerste tekstmodule in de volgende 2 kolommen en verander de verloopachtergrond.
- Kleur 1: # 7e5ce6
- Kleur 2: # 25b8ee
Wijzig de rand van tekstmodule nr. 1
Wijzig ook de randinstellingen van de module.
- Linksboven, linksonder en rechtsonder: 100 pixels
Wijzig de positie van tekstmodule # 1
En verplaats de module naar het geavanceerde tabblad.
- Locatie: rechtsboven
Wijzig de kleur van het scheidingsteken
Ga verder met het openen van de instellingen voor de separatiemodule. Verander de kleur van de lijn zodat deze in het nieuwe kleurenschema past.
- Lijnkleur: # 7e5ce6
Verander alle inhoud
Wijzig ten slotte de volledige inhoud van de module in kolom 2.
Kloon het hele gedeelte twee keer
Nadat u het eerste gedeelte hebt voltooid, kunt u het twee keer klonen.
Wijzig de afstand tussen de eerste dubbele sectie
Open de instellingen in het eerste gedeelte van het duplicaat en wijzig de marginwaarden dienovereenkomstig:
- Linkermarge: -5% (desktopcomputer), 0% (tablet en telefoon)
- Rechter marge: -5% (kantoor), 0% (tablet en telefoon)
Wijzig de afstand van de tweede dubbele sectie
Open ook het tweede duplicaat, verwijder alle margewaarden en voeg in plaats daarvan een lagere marge toe.
- Ondermarge: 100px
Verander alle inhoud
Wijzig ten slotte de volledige inhoud van de module.
Bewaar de lay-out in de Divi-bibliotheek voor hergebruik
Als je van plan bent om dit samenvattingsvak in andere blogberichten te gebruiken, sla het dan op in je Divi-bibliotheek, zodat je er gemakkelijk toegang toe hebt! Dat is het !
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Final gedachten
In dit artikel hebben we je laten zien hoe je een samenvattingsvak aan je Gutenberg-bericht kunt toevoegen met de nieuwe lay-outblokken van Divi. Samenvattingsvakken zijn een geweldige visuele manier om je te helpen bezoekers om de informatie te vinden waarnaar ze op zoek zijn.
Je kon ook het layout JSON-bestand gratis downloaden! Als u vragen heeft, kunt u een reactie achterlaten in het commentaargedeelte hieronder.
