Advanced Gutenberg : Blokkeert installatie

1. Geavanceerd knopblok

Je kunt een Geavanceerde knop door op de knop te klikken in de Advanced Gutenberg sectie.

 

geavanceerde knop

 

Op het rechterpaneel kunt u enkele instellingen voor de knop aanpassen:

  • Stijlen: 4 voorgedefinieerde stijlen

    • Standaard

    • Geschetst

    • Kwadraat

    • Kwadraat overzicht

  • Knoplink:

    • Link-URL

    • Openen op nieuw tabblad: Aan / Uit.

 

adv-knop-instellingen

 

  • Tekst kleur:

    • Lettergrootte

    • Achtergrond kleur

    • Tekst kleur

 

tekst-kleur-knop-instellingen

 

  • Grens:

    • Randradius

    • Randstijl: solide, gestippeld, nok, ...

    • Rand kleur

    • Grensbreedte

 

adv-button-border

 

  • Marge: boven, rechts, onder en links.

  • Vulling: boven, rechts, onder en links.

 

geavanceerde padding

 

  • Beweeg:

    • Kleurinstellingen: Achtergrondkleur, Tekstkleur en Schaduwkleur.

    • Schaduw (H (horizontaal) offset, V (verticaal) offset, vervaging, spreiding), dekking en overgangssnelheid.

 

geavanceerde knop-hover

 

2 . Geavanceerd lijstblok

Je kunt een Geavanceerde lijst door op de knop te klikken in de categorie Advanced Gutenberg .

 

geavanceerde lijst

 

Nadat u de inhoud heeft ingevoerd, kunt u de instellingen aanpassen via het rechterpaneel:

  • Tekstinstellingen

    • Lettergrootte

  • Icoon instellingen

    • Icoon (lijst, kleur en maat)

    • Lijnhoogte

    • Marge

    • Vulling

 

geavanceerde-lijst-instellingen

 

3 . Samenvatting blok

Je kunt een Overzicht blokkeren door op de knop in de categorie Advanced Gutenberg klikken nadat u ten minste één koptag in de post of pagina heeft ingesteld. De samenvatting kan naar links, midden of rechts worden uitgelijnd. Gebruik de knop Overzicht bijwerken om het bij te werken.

 

samenvatting-gutenberg-inhoud

 

In het rechterpaneel zijn er enkele opties die u kunt aanpassen:

  • Geminimaliseerde belasting: om de samenvatting standaard te tonen / verbergen

  • Samenvatting koptitel: de koptekst van de samenvatting, die wordt weergegeven wanneer de Belasting geminimaliseerd optie is ingeschakeld

  • Anker kleur: kies een kleur voor de samenvatting

 

samenvatting-instellingen

 

4 . Counter (Count Up) Block

 

Je kunt een Optellen blok, mogelijk met een symbool, door te klikken op de knop in de categorie Advanced Gutenberg .

 

optellen

 

Vervolgens kunt u vanuit het rechterpaneel enkele opties voor de teller aanpassen:

  • Kleurinstellingen: Kleur van koptekst, kleur van optellen en kleur van beschrijving

  • Kolommen: 1-3

  • Teller nummer grootte: stel de grootte van de nummers in

  • Counter Up-symbool: voeg een teken toe voor of na de teller

  • Toggle-knop: stel de positie van het symbool in (Aan betekent dat het symbool achter de cijfers komt)

 

count-up-instellingen

 

5 . Geavanceerd beeldblok

De Geavanceerd beeld blok kan worden gebruikt om een ​​afbeelding te maken. Om er een toe te voegen, klik op de Geavanceerd beeld knop in de categorie Advanced Gutenberg en kies vervolgens een afbeelding om in te voegen.

 

geavanceerde afbeelding-knop

 

Vervolgens kunt u de afbeeldingstitel en de ondertitel wijzigen. U kunt de instellingen van de afbeelding aanpassen vanaf het rechterpaneel.

  • Actie bij klik: open de afbeelding in een lightbox of open een aangepaste URL

  • Link-URL: Link openen in nieuw tabblad (schakelknop)

  • Open link in nieuw tabblad: Aan uit

  • Afbeeldingsgrootte: of de afbeelding met volledige breedte moet worden weergegeven, of met een aangepaste hoogte en breedte

 

geavanceerde beeldinstellingen

 

  • Brandpuntkiezer: selecteer een punt om op het beeld te focussen of stel de horizontale / verticale positie in

  • Overlay-dekking standaard

  • Dekking van overlay zweven

  • Kleurinstellingen: Titelkleur, Ondertitelingskleur, Overlay-kleur

  • Tekstuitlijning: Verticale uitlijning (boven, midden, onder), horizontale uitlijning (links, midden, rechts)

 

adv-image-hover

 

6 . Getuigenisblok

U kunt een testimonial in uw inhoud invoegen door op te klikken Getuigenis knop in de Advanced Gutenberg categorie. Vervolgens kunt u de avatar, naam, functie en beschrijving van de testimonial wijzigen.

 

getuigenis-knop

 

Ten slotte kunt u in het rechterpaneel de instellingen voor de Testimonial aanpassen. Wanneer de optie Schuifweergave is uitgeschakeld, zijn hier de instellingen:

  • Kolommen: Het kolommenbereik in de normale weergave is 1-3 en in de schuifweergave 4-10.

  • Avatar: Avatar grootte, achtergrondkleur en randinstellingen, waaronder kleur, straal en breedte

  • Tekstkleuren:

    • Naam Kleur

    • Positie kleur

    • Beschrijving Kleur

 

getuigenis-instellingen

 

Wanneer u inschakelt Schuifweergave optie, zullen enkele extra opties voor slider verschijnen:

  • Aantal stuks
  • Te tonen items
  • Items om te scrollen

slider-view-kolom

  • Middenmodus
  • Pauzeer bij zweven
  • Automatisch afspelen
  • Autoplay snelheid (ms)
  • Oneindige lus
  • Overgangssnelheid (ms)
  • Stippen tonen
  • Pijlen tonen
  • Pijl grootte

 

slider-instellingen

  • Schuifkleuren:
    • Kleur van pijl en rand
    • Kleur stippen

 

slider-kleur

 

7 . Kaartblok

Om de te gebruiken Kaart blok, moet u een Google API-sleutel toevoegen in de configuratie. Daarna moet je dit volgen koppeling, Klik op Schakel API's en services in knop en zoek en schakel Geolocation API, Maps JavaScript API in.

Eenmaal toegevoegd, kunt u de kaart maken door op te klikken Kaart knop in de Advanced Gutenberg categorie.

 

kaartblok

 

Vanuit het rechterpaneel kunt u een locatie invoegen door de breedte- en lengtegraad in te voeren of door een adres in te voeren en vervolgens op de knop Locatie ophalen te drukken.

Er zijn enkele extra opties voor de kaart beschikbaar:

  • Zoomniveau

  • Hoogte

  • Markeringspictogram

  • Titel van markering

  • Markeringsbeschrijving

  • Knopinfo voor markeringen openen

  • Kaartstijlen: zilver, retro, nacht, ... en u kunt ook uw eigen stijl toevoegen.

 

kaart-instellingen

 

8 . Geavanceerd videoblok

Je kunt een video voor een bericht maken door op de te klikken Geavanceerde video knop in de Advanced Gutenberg sectie. Vervolgens kunt u de URL van YouTube of Vimeo plakken of een lokale video van uw server gebruiken. U kunt de voorbeeldafbeelding wijzigen door op de knop Bewerken in de linkerbovenhoek te klikken.

 

geavanceerde video

 

Vervolgens kunt u de instellingen voor de video aanpassen in het rechterpaneel.

  • Open video in lichtbak: de lightbox biedt extra weergave-opties

  • Volledige breedte: als het uit is, moet je een aangepaste breedte instellen voor de video

  • Hoogte video

  • Kleurinstellingen: Kleur overlay en kleur afspeelknop

  • Afspeelknop: Pictogramstijl, grootte van afspeelknop

 

geavanceerde video-instellingen

 

9 . Geavanceerd tafelblok

U kunt een tabel maken door op de te klikken Geavanceerde tafel knop in de Advanced Gutenberg categorie.

 

geavanceerde tafel-knop

 

U kunt de tabel bewerken na het instellen van het aantal kolommen en rijen.

 

geavanceerde tafel

 

Daarna kunt u tekst invoeren of rijen en kolommen aanpassen vanuit de editor zelf net boven het tabelblok. In het rechterpaneel kunnen meer instellingen worden gewijzigd.

  • Stijlen

    • Standaard

    • Strepen

 

stijltafel

 

  • Tabelinstellingen

    • Maximale wijdte: Stel dit in op 0 om de maximale breedte gelijk te maken aan 100%

    • Tabelcellen met vaste breedte

    • Tabelkop, voettekst

    • De grens is ingestort

 

geavanceerde-tafel-instellingen 1

 

  • Celinstellingen

    • Kleurinstellingen: Achtergrondkleur, Tekstkleur

    • Grens: randstijl, kleur en breedte

    • Vulling: vulling boven, onder, links en rechts

    • Tekstuitlijning: horizontale en verticale uitlijning

 

single-cell-instellingen

 

U kunt zelfs cellen samenvoegen (met de Shift-knop) en samengevoegde cellen splitsen met de Geavanceerde tafel blok.

10 . Geavanceerd accordeonblok

Je kunt een Geavanceerde accordeon wanneer u meer inhoud in een kleiner gebied moet weergeven door op te klikken Geavanceerd Accordeon knop in de Advanced Gutenberg categorie. Daarna worden standaard 2 groepsaccordeonelementen weergegeven.

 

adv-accordeon-blok

 

Eenmaal gemaakt, kunt u de koptekst, hoofdtekst of randopties aanpassen via het rechterpaneel.

  • Accordeoninstellingen:

    • Bodemafstand: Definieer ruimte tussen elke accordeon (alleen Frontend-weergave)

    • Oorspronkelijk samengevouwen: Zorg ervoor dat alle accordeons standaard zijn samengevouwen.

  • Kopinstellingen

    • Stijl van koptekst

    • Kleurinstellingen: Achtergrondkleur, tekstkleur en pictogramkleur

 

adv-accordeon-header

 

  • Lichaamskleurinstellingen

    • Achtergrond kleur

    • Tekst kleur

  • Randinstellingen

    • Randstijl: effen, onderbroken of gestippeld

    • Kleurinstellingen

    • Randbreedte, straal

 

adv-accordeon-instellingen

 

11 . Geavanceerde tabbladen blokkeren

Op dezelfde manier kunt u een geavanceerd maken Tab blokkeren wanneer u meer inhoud in een kleiner gebied wilt weergeven. Klik op om een ​​in te voegen Geavanceerd tabblad knop in de Advanced Gutenberg categorie.

 

tab-blok

 

Vervolgens kunt u de tab-, hoofdtekst- of randopties aanpassen via het rechterpaneel.

  • Tabs stijl
    • Desktop, tablet of mobiel
    • Horizontaal of verticaal
  • Tabbladen instellingen
    • Eerste open tabblad

 

adv-tab-instellingen

 

  • Tabkleuren

    • Achtergrond kleur

    • Tekst kleur

    • Achtergrondkleur actieve tabblad

    • Tekstkleur actieve tab

 

tabblad-instellingen

 

  • Lichaamskleuren

    • Achtergrond kleur

    • Tekst kleur

  • Randinstellingen

    • Stijl: geen, effen, gestippeld of gestippeld

    • Kleur

    • Randbreedte, straal

 

tab-instellingen 1

 

Jij kan deel uw sociale links heel gemakkelijk door gebruik te maken van de Sociale links blok, dat kan worden gemaakt door op de knop in de categorie Advanced Gutenberg klikken.

 

sociale links

 

U kunt het kant-en-klare pictogram gebruiken of uw eigen pictogram uploaden en vanuit het rechterpaneel nog enkele opties aanpassen.

  • Vooraf ingestelde pictogrammen: u kunt uw aangepaste pictogram uploaden

  • Vooraf ingestelde pictogramkleur

  • Pictogrammen instellingen

    • Pictogramgrootte, ruimte

 

social-links-instellingen

 

13 . Recente berichten blokkeren

Er zijn 3 lay-outs beschikbaar om uw recente berichten weer te geven: de raster-, lijst- en schuifweergaven. U kunt al deze weergaven maken door op de te klikken recente berichten knop in de Advanced Gutenberg categorie.

 

recent-berichten-blok

 

U kunt zien hoe de blokken in de frontend worden weergegeven in de afbeelding hierboven of in onze Advanced Gutenberg demo.

In het rechterpaneel kunt u de instellingen van elke lay-out aanpassen:

  • Bestel door

op bestelling

 

  • Categorie

  • Aantal stuks

  • Kolommen (alleen voor rasterweergave)

  • Toon uitgelichte afbeelding

  • Post Auteur weergeven

  • Postdatum weergeven

  • Lees meer link

  • Lees meer tekst

  • Postfragment weergeven

  • Eerste berichttekst als uittreksel: toon een deel van de eerste tekst in de post als uittreksel.

 

recente-berichten-instellingen

 

14 . Woo-producten blokkeren

Er zijn 2 indelingen beschikbaar voor de Woo-producten blok: de normale en diaweergaven kunnen WooCommerce-producten weergeven op uw WordPress-blog. U kunt dit blok invoegen door op de te klikken Woo-producten knop in de Advanced Gutenberg categorie.

 

woo-block

 

U kunt zien hoe de blokken in de frontend worden weergegeven in de afbeelding hierboven of in onze Advanced Gutenberg demo

Op het rechterpaneel kunt u de instellingen van elke lay-out aanpassen:

  • Producten instellingen

    • product status

    • Categorie

  • opmaak instellingen

    • Kolommen

    • Aantal producten

    • Bestellen

 

woo-instellingen

 

15 . Afbeeldingen Slider Block

Als u een aantal afbeeldingen als dia wilt weergeven, klikt u op Afbeeldingen Slider knop in de Advanced Gutenberg categorie.

 

nieuwe-afbeelding-schuifregelaar

 

Druk vervolgens op Voeg afbeeldingen toe knop om uw afbeeldingen te kiezen die in de dia worden getoond. Daarna kunt u de tekst invoeren Titel en tekst beschrijving voor elke beelden.

 

afbeelding-schuifregelaar

 

U kunt de instellingen van de schuifregelaar in het rechterpaneel bewerken.

Beeldinstellingen

  • Actie bij klikken: Geen, afbeelding openen in lightbox en aangepaste link openen

  • Volledige breedte

  • Automatische hoogte

  • Toon altijd overlay

Kleurinstellingen

  • Hover Color

  • Titelkleur

  • Tekst kleur

 

slide-settings-1

 

Tekstuitlijning

  • Verticale uitlijning

    • Top

    • Centrum

    • Bodem

  • Horizontale uitlijning

    • Links

    • Centrum

    • Rechtsaf

slide-settings-2

 

16 . Contact Formulierblok

U kunt met dit blok e-mailcontactmeldingen van klanten ontvangen. U kunt dat formulier aanmaken door op te klikken Contact Formulier knop in de Advanced Gutenberg categorie.

 

Contact Formulier

 

U kunt de instellingen van de Contact Formulier op het rechter paneel.

  • Merk op: Het verschijnt niet als u de reCAPTCHA-optie in Instellingen inschakelt.

  • E-mail afzender: Je kunt wijzigen in Instellingen. Een e-mail wordt (standaard) naar het e-mailadres van de beheerder gestuurd wanneer een contactformulier wordt ingediend.

  • Tekstlabel:

    • Naam invoer tijdelijke aanduiding

    • Tijdelijke aanduiding voor e-mailinvoer

    • Tijdelijke invoer voor berichtinvoer

    • Tekst indienen

    • Waarschuwingstekst voor leeg veld

    • Succestekst indienen

 

contact-instellingen 1

 

  • Invoerkleur: Achtergrondkleur en tekstkleur

  • Randinstellingen: Randkleur, Randstijl en Randradius

  • Knopinstellingen verzenden:

    • Kleurinstellingen: Rand en tekst, achtergrond

    • Randradius van de knop

    • Knop positie: Links, midden en rechts

contact-instellingen 2

 

17 . Nieuwsbrief blokkeren

Om de e-mail van de klant te krijgen, kunt u het e-mailblok maken door op te klikken Nieuwsbrief knop in de Advanced Gutenberg categorie.

 

nieuwsbrief

 

U kunt de instellingen van de nieuwsbrief wijzigen in het rechterpaneel.

  • Merk op: Het verschijnt niet als u de reCAPTCHA-optie in Instellingen inschakelt.

  • Formulierinstellingen:

    • Vormstijl: standaard / alternatief

    • Formulierbreedte (px)

  • Tekstlabel:

    • Tijdelijke aanduiding voor e-mailinvoer

    • Tekst indienen

    • Waarschuwingstekst voor leeg veld

    • Succestekst indienen

 

nieuwsbrief-instellingen 1

 

  • Invoerkleur: Achtergrondkleur en tekstkleur

  • Randinstellingen: Randkleur, Randstijl en Randradius

  • Knopinstellingen verzenden:

    • Kleurinstellingen: Rand en tekst, achtergrond

    • Randradius van de knop

 

nieuwsbrief-instellingen 2

 

18 . Kolommenbeheerblok

Als je een blok wilt maken met daarin andere blokken, moet je kiezen Kolommenbeheer in de categorie Advanced Gutenberg . Het zal de stijl voor het blok verschijnen bij het maken van een nieuw blok.

 

add-column-manager-block

 

Vervolgens kunt u in elke kolom elk type blok toevoegen dat u wilt. Hier is een kolombeheerblok dat 2 kolommen bevat: de linker is Geavanceerde afbeelding en de rechter is Alinea, Geavanceerde lijst.

 

column-manager-block

 

En in het rechterpaneel kunt u de instellingen van het Column Manager-blok aanpassen.

  • Responsieve instellingen

    • Stijl voor elk apparaattype: desktop, tablet, mobiel

    • Ruimte tussen kolommen

    • Vulling: Boven, Rechts, Links en Onder

    • Marge: Boven, Rechts, Links en Onder

 

kolom-instellingen-1

 

 

  • Rij-instellingen

    • Kolommen gewikkeld: als uw kolommen overvol zijn, wordt deze gescheiden naar een nieuwe regel (bijvoorbeeld: gebruik dit met kolommenafstand).

    • Wrapper Tag: Div, Header, Main, ...

    • Maximale breedte inhoud (px vw,%)

    • Minimale hoogte inhoud (px, vw, vh)

    • Maximale hoogte inhoud (px, vw, vh)

 

kolom-instellingen-2

 

19 . Login / Register Form Block

U kunt een aanmeldingsformulier of registratieformulier voor uw website maken door te klikken Login / Register Form knop in de Advanced Gutenberg sectie.

 

login-formulier-blok

 

En u kunt de weergave wijzigen van Aanmelden naar Registreren op de navigatiebalk van dit blok of op het rechterpaneel.

 

login-register-formulier

 

En dan kunt u naar het rechterpaneel gaan om meer details over het formulier aan te passen.

  • Oorspronkelijk formulier: Log in of Registreer

  • Omleiding na inloggen: Home, Dashboard of Aangepast

  • Form breedte (px)

  • Logo weergeven

  • Logo Breedte (px)

  • Invoerveldpictogram weergeven

  • Toon register- / koptekstlink

  • Kleur van koptekst

  • Link voor verloren wachtwoord weergeven

 

form-state-setttings

 

  • Tijdelijke aanduiding invoeren

    • Tijdelijke invoer voor login-invoer

    • Tijdelijke aanduiding voor gebruikersnaaminvoer

    • Tijdelijke aanduiding voor e-mailinvoer

  • Tekst- / invoerkleur

    • Achtergrondkleur invoeren

    • Invoerkleur

    • Tekst kleur

  • Randinstellingen

    • Rand kleur

    • Randstijl

    • Grensbreedte

 

input-placeholder-instellingen

 

  • Knopinstellingen verzenden

    • Rand en tekst

    • Achtergrond

    • Randradius van de knop

    • Knop positie

  • Knop Hover verzenden

    • Hover Colors: Achtergrond-, tekst- en schaduwkleur

    • Schaduw: Dekking, Overgangssnelheid en Schaduw (H (horizontaal) offset, V (verticaal) offset, vervaging, spreiding)

  • Merk op: We raden ten zeerste aan om Google reCaptcha in te schakelen om spambot te vermijden. Je kunt het inschakelen in Form Recaptcha in Adv. Gutenberg> E-mail en formulier .

 

indienen-knop-instellingen

 

20 . Zoekbalkblok

U kunt een zoektekstvak op de frontend maken door op te klikken Zoekbalk knop in de Advanced Gutenberg categorie.

 

zoekbalk-blok

 

U kunt de instellingen van de zoekbalk aanpassen in het rechterpaneel.

  • Stijlen: er zijn 2 voorgedefinieerde stijlen: Standaard en Klassiek

  • Zoek Bar State

    • Volledige breedte: aan / uit

    • Breedte

  • Instellingen zoekpictogram

    • Zoekpictogram aan de rechterkant: aan / uit

    • Zoek icoon

 

zoekbalk-instellingen

 

  • Zoek invoerinstellingen

    • Zoek tijdelijke aanduiding

    • Invoerkleur: achtergrond- en tekstkleur

 

zoek-invoer-instellingen

 

  • Zoekknopinstellingen

    • Knop Verzenden weergeven: aan / uit

    • Zoekknop links: Aan / Uit

    • Achtergrond- en tekstkleur

    • Randradius

  • Hover Colors: Achtergrond-, tekst- en schaduwkleur

  • Hover Shadow: Dekking, Overgangssnelheid en Schaduw (H (horizontaal) offset, V (verticaal) offset, vervaging, spreiding)

 

zoekknop-instellingen