Met de opmerkingenmodule kunt u een formulier opmerkingen overal op uw pagina. Als u een standaardpagina of -bericht gebruikt zonder de Divi Builder, verschijnen er nog steeds opmerkingen onder de inhoud van uw bericht.

Zodra de Divi Builder is geactiveerd, kunt u de opmerkingenmodule overal op uw pagina plaatsen en plaatsen formulier opmerkingen verschijnen op de locatie van de module. Dit geeft je veel meer controle over je opmerkingen!

Een commentaarmodule toevoegen aan uw pagina

Voordat u een commentaarmodule aan uw pagina kunt toevoegen, moet u eerst de Divi Builder openen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de uitgever telkens 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 upstream-website bladert en u bent aangemeld bij 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 opmerkingenmodule 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 "opmerkingen" kunt typen en vervolgens op enter kunt klikken om de opmerkingenmodule 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 een case om een ​​commentaarsectie toe te voegen aan uw blogbericht

Voor dit voorbeeld laat ik je zien hoe gemakkelijk het is om een ​​opmerkingenmodule in je bericht in te voegen en op te maken met Visual Builder.

Merk op dat het commentaargedeelte wordt toegevoegd onder de inhoud van het bericht en boven een voettekstgedeelte met drie kolommen. De commentaarmodule had echter overal kunnen worden toegevoegd.

Voeg met Visual Builder een standaardsectie toe met een rij over de volledige breedte (1 kolom) onder de modules die uw berichtinhoud bevatten. Voeg vervolgens de opmerkingenmodule toe aan de rij.

Werk de reactie-instellingen als volgt bij:

Inhoud opties

Achtergrondkleur van de velden: #ffffff

Ontwerpopties

Tekstkleur: donker
Commentaar Police: PT Sans
Opmerking Lettergrootte: 20px
Tekstkleur opmerking:
Police Field: PT Sans
Veldlettergrootte: 20px
Meta Font: PT Sans, Italic, Hoofdletters
Meta-tekengrootte: 16px
Field Border Radius: 0px
Gebruik rand: JA
Kleur van de rand: #aaaaaa
Breedte van de rand: 1px
Gebruik aangepaste stijlen voor de knop: JA
Tekstgrootte knop: 20
Knoptekstkleur: #ffffff
Achtergrondkleur knop: # 02b875
Breedte van de rand van
knop: 3px

Sommige items, zoals meta-informatie van berichten en avatarafbeeldingen, worden alleen weergegeven als jij of iemand anders een opmerking aan het bericht toevoegt.

Dat is alles. Het mooie van deze module is dat je extra inhoud kunt toevoegen na het commentaargedeelte (zoals een call-to-action of een Contact formulier), wat niet eenvoudig is met een standaard WordPress.

Inhoudsopties van de module Opmerking

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.

Avatar van auteur weergeven

Als u deze optie uitschakelt, wordt de avatar van de auteur van de opmerking verwijderd uit de opmerkingenlijst.

Toon antwoordknop

Als de knop Antwoord weergeven is uitgeschakeld, kunnen gebruikers niet reageren op opmerkingen in de opmerkingenlijst.

Bekijk reacties

Indien uitgeschakeld, wordt het totale aantal opmerkingen niet langer weergegeven boven de opmerkingenlijst.

Achtergrondkleur van de velden

De commentaarmodule toont een formulier opmerking samengesteld uit verschillende invoervelden. Standaard hebben deze invoervelden een grijze achtergrondkleur. U kunt deze kleur wijzigen door een aangepaste kleur te kiezen in de kleurenkiezer.

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.

Opmerkingen 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.

Tekstkleur

Hier kunt u de waarde van uw tekst kiezen. Als u met een donkere achtergrond werkt, moet uw tekst worden gemarkeerd. Als u met een lichte achtergrond werkt, moet uw tekst donker zijn.

Commentaar lettertype

U kunt het lettertype van uw opmerking 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, alleen hoofdletters en onderstrepen.

Tekengrootte van opmerking

Hier kunt u de grootte van uw commentaarlettertype aanpassen. U kunt de intervalschuifregelaar slepen om de grootte van uw tekst te vergroten of 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 van opmerkingen

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

Afstand van commentaarbrieven

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw commentaartekst 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 commentaarregel

De regelhoogte is van invloed op de ruimte tussen elke regel met commentaartekst. Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de intervalschuifregelaar om de ruimte 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.

Politieveld

U kunt het lettertype van uw tekst 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, alleen hoofdletters en onderstrepen.

Veldlettergrootte

Hier kunt u de grootte van uw veldtekst aanpassen. U kunt de intervalschuifregelaar slepen om de grootte van uw tekst te vergroten of 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.

Veld tekstkleur

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

Afstand van veldletters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van de tekst in uw veld 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.

Veldlijnhoogte

De regelhoogte is van invloed op de ruimte tussen elke regel tekst in uw veld. Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de intervalschuifregelaar om de ruimte 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.

Meta Font

U kunt het lettertype van uw metatekst 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, alleen hoofdletters en onderstrepen.

Meta-lettergrootte

Hier kunt u de grootte van uw metatekst 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.

Kleur van de metatekst

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

Spatiëring van meta-letters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw metatekst 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 meta-lijn

De regelhoogte heeft invloed op de ruimte tussen elke regel in uw metatekst. 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.

Veldgrensradius

De straal van de rand bepaalt hoe de hoeken van elk invoerveld worden afgerond. Hoe hoger de waarde, hoe meer de vier hoeken van elk invoerveld zijn afgerond. U kunt de waarde verlagen tot 0 om rechthoekige invoervelden te maken of de waarde aanzienlijk verhogen om invoervelden met ronde randen te maken.

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.

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.

Gebruik aangepaste stijlen voor knoppen

Als u deze optie inschakelt, worden de verschillende instellingen voor het aanpassen van knoppen weergegeven die u kunt gebruiken om het uiterlijk van de knop van uw module te wijzigen.

Knop tekstgrootte

Deze instelling kan worden gebruikt om de grootte van de tekst in de knop te vergroten of te verkleinen. De knop wordt geschaald naarmate de tekst groter en kleiner wordt.

Knop tekstkleur

Standaard krijgen knoppen de accentkleur van uw thema, zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste tekstkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de knopkleur te wijzigen.

Knop achtergrondkleur

Standaard hebben de knoppen een transparante achtergrondkleur. Dit kan worden gewijzigd door de gewenste achtergrondkleur te selecteren in de kleurenkiezer.

Breedte van de knoprand

Alle Divi-knoppen hebben standaard een rand van 2 px. Met deze instelling kan deze rand worden vergroot of verkleind. Randen kunnen worden verwijderd door de waarde 0 in te voeren.

Knooprandkleur

Knopranden krijgen standaard de accentkleur van uw thema, zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste randkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de kleur van de knoprand te wijzigen.

Radiusrandknop

De straal van de rand bepaalt hoe de hoeken van uw knoppen worden afgerond. Standaard hebben de knoppen in Divi een kleine straal die de hoeken met 3 pixels rond maakt. U kunt het terugbrengen tot 0 om een ​​vierkante knop te maken of aanzienlijk vergroten om knoppen met ronde randen te maken.

Afstand van knopletters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van de knoptekst wilt vergroten, gebruikt u de bereikschuifregelaar 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.

Politieknop

U kunt het lettertype van uw tekst 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, alleen hoofdletters en onderstrepen.

Knoppictogram toevoegen

Uitgeschakeld verwijdert deze instelling pictogrammen van uw knop. Standaard geven alle Divi-knoppen een pijlpictogram weer wanneer u de muisaanwijzer plaatst.

Knop pictogram

Als pictogrammen zijn ingeschakeld, kunt u deze instelling gebruiken om het pictogram te selecteren dat u in uw knop wilt gebruiken. Divi heeft verschillende pictogrammen om uit te kiezen.

Knop pictogram kleur

Als u deze instelling aanpast, verandert de kleur van het pictogram dat op uw knop wordt weergegeven. Standaard is de kleur van het pictogram hetzelfde als de tekstkleur van uw knop, maar met deze instelling kunt u de kleur onafhankelijk aanpassen.

Knop pictogram locatie

U kunt ervoor kiezen om het pictogram van uw knop links of rechts van uw knop weer te geven.

Alleen zweefpictogram voor knop weergeven

Standaard worden knoppictogrammen alleen weergegeven tijdens het zweven. Schakel deze instelling uit als u wilt dat het pictogram altijd wordt weergegeven.

Knop flyover tekstkleur

Wanneer de muis van de bezoeker over de knop beweegt, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.

Achtergrondkleur van de muis

Wanneer de muis van de bezoeker over de knop beweegt, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.

Kleur van rand zweven

Wanneer de muis van de bezoeker over de knop beweegt, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.

Zwevende Radius-knop

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.

Afstand-knop rollover letters

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.

Opmerkingen Geavanceerde opties

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 Onderliggende of in aangepaste CSS die u aan uw pagina of website toevoegt met behulp van Divi Theme Options of Divi Builder Page Settings.

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.

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.