Voordat u een Samenvatting-module aan uw pagina kunt toevoegen, moet u eerst de Divi Builder openen. Zodra de Divi-thema geïnstalleerd op uw Site web, je ziet een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Door op deze knop te klikken, activeert u Divi Builder, waarmee u toegang krijgt tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw bladert Site web upstream als u bent ingelogd op uw WordPress-dashboard.

Eenmaal ingevoerd in Visual Builder, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen rijen worden toegevoegd. Als u een nieuwe pagina begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen.

Zoek de Samenvatting-module in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "Samenvatting" kunt typen en vervolgens op enter kunt klikken om de beschrijvende tekstmodule automatisch te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet met de lijst met module-opties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .

gebruik case om bedrijfsdiensten op de homepage te vermelden

Omdat de Summary-module zowel afbeeldingen als tekst combineert om bepaalde functies te demonstreren, kunt u deze gebruiken om een ​​lijst met uw zakelijke services aan uw startpagina toe te voegen. Met de Blurb-module kunt u ook uw afbeelding / pictogram en titel omzetten in een link naar uw servicepagina. Voor dit voorbeeld ga ik de Blurb-module gebruiken om vier aanbevolen services aan een startpagina toe te voegen.

Om alle vier de Blurbs aan uw pagina toe te voegen, gebruikt u de visuele builder om een ​​standaardsectie met een rij met vier kolommen toe te voegen. Voeg vervolgens een Blurb-module toe aan de eerste kolom van uw rij.

Werk de Blurb-instellingen als volgt bij:

Inhoud opties

Titel: [vul servicetitel in]
Inhoud: [vul een korte beschrijving van de dienst in]
URL: [voeg een URL toe aan de servicepagina]
Gebruik het pictogram: JA
Pictogram: [selecteer een pictogram dat uw service illustreert]

Ontwerpopties

Pictogramkleur: # 42bb99 (maak de kleur die past bij het ontwerp van de site)
Gebruik het pictogram Tekengrootte: JA
Grootte pictogramlettertype: 68px (past de pictogramgrootte aan)
Tekstrichting: midden -
Hoofdlettergrootte: 24px
Lettergrootte: 18px
Lichaamslengte: 1.5em

Nu is je eerste inleidende tekst klaar.

Dupliceer nu de Samenvattingsmodule die u zojuist hebt gemaakt drie keer en sleep elk van de gedupliceerde samenvattingen naar de andere drie kolommen. Omdat uw ontwerpinstellingen zijn geïntegreerd in uw dubbele modules, hoeft u alleen maar de inhoud (koptekst, inhoud, pictogram, URL, enz.) en pas de kleuren aan om ze aan elk van uw services aan te passen.

Samenvatting inhoudsopties

Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module zal altijd op dit tabblad staan.

Titel

Geef uw tekst een titel die vetgedrukt boven de tekst wordt weergegeven. Met de URL-optie onder het veld Titel kunt u van uw titel een hyperlink maken.

Inhoud

Dit veld is waar u de inhoud van uw tekst kunt invoeren. Blurb-tekst beslaat ook de volledige breedte van uw kolom tot 550 px.

URL

Plaats een geldige web-URL in dit veld om uw Blurb-titel in een link te veranderen. Als u dit veld leeg laat, blijft uw titel een statisch element.

Openings-URL

Hier kunt u kiezen of uw link wel of niet in een nieuw venster wordt geopend.

Gebruik pictogram

Als je Blurbs gebruikt, kun je ervoor kiezen om een ​​pictogram of een afbeelding bij je tekst te gebruiken. Als u "Ja" selecteert bij de optie "Pictogram gebruiken", krijgt u de volgende opties aangeboden om uw pictogram aan te passen. Als u er niet voor kiest om een ​​pictogram te gebruiken, wordt u gevraagd om een ​​afbeelding te uploaden.

icon

Als u “Ja” heeft gekozen bij de instelling “Pictogram gebruiken”, zal deze optie verschijnen. Deze optie geeft u een lijst met beschikbare pictogrammen die u met uw blurb kunt gebruiken. Klik gewoon op het pictogram dat u wilt gebruiken en het zal in uw tekst verschijnen.

Beeld

Als u er niet voor heeft gekozen om een ​​pictogram te gebruiken, wordt deze instelling weergegeven. Plaats hier een geldige afbeeldings-url, of kies / upload een afbeelding via de WordPress mediabibliotheek. Afbeeldingen in de Samenvatting-module verschijnen altijd gecentreerd in hun kolommen en beslaan de volledige breedte van uw kolom tot 550 px. Uw afbeelding zal echter nooit groter zijn dan de oorspronkelijke uploadgrootte. De hoogte van de presentatie-afbeelding wordt bepaald door de hoogte-breedteverhouding van uw originele afbeelding. Het is daarom aan te raden om al uw presentatiebeelden op dezelfde hoogte te plaatsen als u ze naast elkaar plaatst.

Achtergrondkleur

Definieer een aangepaste achtergrondkleur voor uw module of laat leeg om de standaardkleur te gebruiken.

Achtergrond afbeelding

Indien ingesteld, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een ​​achtergrondafbeelding te verwijderen, verwijdert u gewoon de URL uit het veld Instellingen. De achtergrondafbeeldingen verschijnen bovenop de achtergrondkleuren, wat betekent dat uw achtergrondkleur niet zichtbaar is wanneer een achtergrondafbeelding wordt toegepast.

Admin-label

Hierdoor wordt het modulelabel in de generator gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.

Samenvatting module ontwerpopties

Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Op dit tabblad kunt u het uiterlijk van uw module wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles aan te passen.

Icoon kleur

Als u “Ja” heeft gekozen bij de instelling “Pictogram gebruiken”, zal deze optie verschijnen. Met deze optie kunt u de kleur van uw pictogram aanpassen. Standaard zijn pictogrammen ingesteld op de accentkleur van uw thema.

Cirkel pictogram

Als u “Ja” heeft gekozen bij de instelling “Pictogram gebruiken”, zal deze optie verschijnen. Met deze optie kunt u uw pictogram in een gekleurde cirkel plaatsen. Als u "ja" selecteert voor deze instelling, krijgt u extra opties aangeboden om de kleur en rand van uw cirkel aan te passen.

Kleur van de cirkel

Als u "Ja" hebt gekozen voor de instelling "Cirkelpictogram", verschijnt deze optie. Hier kun je een kleur kiezen om voor je cirkel te gebruiken. Deze kleur is onafhankelijk van de kleur van uw eerder geselecteerde pictogram. Uw pictogram, in zijn kleur, verschijnt in een cirkel met de kleur die u hier selecteert.

Laat de rand van de cirkel zien

Als u "Ja" hebt gekozen voor de instelling "Cirkelpictogram", verschijnt deze optie. Met deze optie kun je een rand voor je cirkel activeren. Als deze optie is geselecteerd, verschijnt er een extra optie om uw randkleur te selecteren.

Cirkelrandkleur

Als u "Ja" hebt gekozen voor de instelling "Cirkelrand weergeven", verschijnt deze optie. Hier kunt u de kleur van de rand van de cirkel aanpassen.

Afbeelding / pictogram plaatsing

Hier kunt u de locatie van uw afbeelding/pictogram kiezen. Het kan boven de tekst of links van de tekst worden weergegeven. Door de afbeelding/icoon links van uw tekst te plaatsen, wordt de afbeelding kleiner dan wanneer deze bovenaan wordt geplaatst.

Gebruik de tekengrootte van het pictogram

Als deze optie is ingeschakeld, kunt u een aangepast formaat invoeren voor het pictogram dat hierboven wordt weergegeven of twee links van uw blurb.

Tekstkleur

Als uw blurb op een donkere achtergrond wordt geplaatst, moet de tekstkleur worden ingesteld op "Donker". Omgekeerd, als uw blurb op een lichte achtergrond wordt geplaatst, moet de tekstkleur worden ingesteld op "Licht".

Tekstoriëntatie

Met dit vervolgkeuzemenu kunt u de richting van uw tekst specificeren die links uitgelijnd, gecentreerd of rechts uitgelijnd moet worden.

Header lettertype

U kunt het lettertype van uw koptekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Lettergrootte koptekst

Hier kunt u de grootte van uw koptekst aanpassen. U kunt de intervalschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Kleur koptekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw koptekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.

Tussenruimte koptekst

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw koptekst wilt vergroten, gebruikt u de intervalschuifregelaar om de spatie aan te passen of voert u de grootte van de gewenste ruimte in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Hoogte koprij

Rijhoogte is van invloed op de ruimte tussen elke rij van uw koptekst. Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Lichaamsdoopvont

U kunt uw hoofdlettertype wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Tekst lettergrootte

Hier kunt u de grootte van uw hoofdtekst aanpassen. U kunt de intervalschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt rechtstreeks de gewenste waarde voor de tekstgrootte invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Tekstkleur hoofdtekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw hoofdtekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.

Afstand van hoofdletters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw hoofdtekst wilt vergroten, gebruikt u de intervalschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Hoogte van de lichaamslijn

De regelhoogte is van invloed op de ruimte tussen elke regel met hoofdtekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de intervalschuifregelaar om de ruimte aan te passen of voert u de gewenste grootte van de ruimte in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Gebruik de rand

Als u deze optie inschakelt, wordt een rand rond uw module geplaatst. Deze rand kan worden aangepast met behulp van de volgende voorwaardelijke parameters.

Kleur van de rand

Deze optie heeft invloed op de kleur van uw rand. Selecteer een aangepaste kleur uit de kleurkiezer om deze op uw rand toe te passen.

Breedte van de rand

Standaard zijn de randen 1 pixel breed. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of een aangepaste waarde in het invoerveld rechts van de schuifregelaar in te voeren. Ondersteunt aangepaste maateenheden, wat betekent dat u de standaardeenheid kunt wijzigen van "px" in iets anders zoals em, vh, vw enz.

Randstijl

Randen ondersteunen acht verschillende stijlen, waaronder: massief, gestippeld, gestippeld, dubbel, groef, rand, inzet en begin. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.

Maximale afbeeldingsbreedte

Als u hier een maximale breedtewaarde toepast, wordt de breedte van de presentatie-afbeelding beperkt. Dit heeft alleen betrekking op blurbs die niet in de pictogrammodus staan.

Aangepaste marge

De marge is de ruimte die aan de buitenkant van uw module wordt toegevoegd, tussen de module en het volgende element erboven, eronder of links en rechts ervan. U kunt aangepaste margewaarden toevoegen aan elk van de vier zijden van de module. Om een ​​aangepaste marge te verwijderen, verwijdert u de toegevoegde waarde uit het invoerveld. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.

Aangepaste opvulling

Opvulling is de ruimte die in uw module wordt toegevoegd, tussen de rand van de module en de interne elementen. U kunt aangepaste opvulwaarden toevoegen aan elk van de vier zijden van de module. Om een ​​aangepaste marge te verwijderen, verwijdert u de toegevoegde waarde uit het invoerveld. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.

Geavanceerde opties Samenvatting module

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.

CSS ID

Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een ​​aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.

CSS-klasse

Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-styling te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze lessen kunnen worden gebruikt in uw Divi-thema Kind of in de aangepaste CSS die u toevoegt aan uw pagina of uw Site web met behulp van Divi-themaopties of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u CSS rechtstreeks aan elk element kunt toevoegen. CSS-items in deze instellingen zijn al ingesloten met stijltags. U hoeft dus alleen maar CSS-regels in te voeren, gescheiden door puntkomma's.

Afbeelding / pictogramanimatie

Dit bepaalt de richting van de lazy loading-animatie.

ALT-tekst uit afbeelding

Als u er niet voor heeft gekozen om een ​​pictogram te gebruiken, wordt deze instelling weergegeven. Andere tekst biedt alle informatie die nodig is als de afbeelding niet wordt geladen, niet correct wordt weergegeven of in een andere situatie waarin een gebruiker de afbeelding niet kan zien. Het zorgt er ook voor dat de afbeelding kan worden gelezen en herkend door zoekmachines.

zichtbaarheid

Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

Dat is het voor deze tutorial. We hopen u te hebben laten zien hoe u de overzichtsmodule op Divi kunt gebruiken.