Widget

Wat is een widget?

In Elementor zijn widgets de bouwstenen voor je website. Ze voegen functionaliteit toe aan uw pagina, zodat u alles kunt doen, van het schrijven van tekst tot het toevoegen van dynamische gegevens. De meest gebruikte widgets zijn: de Heading-widget, Text Editor-widget, Afbeelding-widget en Button-widget. Deze vijf widgets alleen al kunnen je al de blokken bieden voor een basispagina met kop, een tekstgedeelte en een oproep tot actie.

In de pro versie die wij gebruiken heb je tal meer mogelijkheden dan met de standaard versie van Elementor. Dus klik er maar is doorheen en zie welke mogelijkheden er allemaal zijn. 

Een widget toevoegen

Wanneer je een pagina opent via de bewerken met elementor knop zie je direct al aan de linkerkant van je scherm elements staan. Hier staan alle widgets die je kunt gebruiken binnen elementor.

Sleep de widget die je wil gebruiken in de pagina. Waar het blauwe balkje verschijnt komt de widget in de pagina te staan. 

Je ziet direct links het editor venster komen, waar je in dit geval de titel kan wijzigen. Wanneer je de widget niet goed geplaatst hebt druk je op het potloodje en kan je het naar iedere gewenste plaats op de pagina slepen.

Soorten widgets

Er zijn vele verschillende soorten widgets met de variant die wij gebruiken is eigenlijk alles mogelijk. Hier onder staan de belangrijkste op een rijtje. Kijk gerust eens rond en wellicht vind je nog leuke extra’s voor je website. Let wel op, bij teveel widgets op een pagina kunnen de pagina’s ook langzamer worden.

  • Inner sectie : Hiermee kun je 1 kolom verdelen in meerdere kolommen. Dit kan heel handig zijn als je bijvoorbeeld 2 knoppen, iconen of afbeeldingen naast elkaar wilt plaatsen.
  • Kop : Hiermee kun je een titel of tussenkopje toevoegen en deze voorzien van een heading tag (H1 t/m H6).
  • Afbeelding : Hiermee kun je uiteraard een afbeelding toevoegen.
  • Tekstbewerker : Dit is de meest gebruikte widget, want hiermee kun je gewone tekst toevoegen zoals je dat ook in Word zou doen.
  • Video : Ook deze widget spreekt voor zich. Je kunt hier een video toevoegen vanaf YouTube, Vimeo, DailyMotion of op je eigen server. Indien gewenst kun je deze op een later punt laten starten, automatisch laten afspelen, het geluid dempen, herhalen en kiezen of je afspeelknoppen wilt weergeven.
  • Knop : Hiermee kun je uiteraard een knop toevoegen, bijvoorbeeld een contact knop of offerte aanvraag knop. Je kunt kiezen uit verschillende stijlen (of deze helemaal naar wens vormgeven), de link instellen en indien gewenst ook een icoontje toevoegen.
  • Scheiding : Hiermee kun je een lijn toevoegen, handig om bijvoorbeeld een scheiding aan te brengen tussen 2 onderwerpen in je tekst. Je kunt onder andere de stijl, dikte en kleur van je scheidingslijn instellen.
  • Afstandshouder : Hiermee voeg je een leeg blok in om witruimte te creëren. Je kunt zelf instellen hoe hoog dit blok moet zijn.
  • Google Maps : Hiermee voeg je natuurlijk een Google Maps kaartje in. Voer simpelweg het adres in, stel eventueel het gewenste zoomniveau in en klaar.
  • Icoon : Hiermee kun je een Font Awesome icoon toevoegen. Uiteraard kun je instellen welk icoon je wilt, maar ook de kleur, uitlijnen en afbeelding kun je instellen.
  • Afbeeldingsbox : Hiermee kun je een afbeelding toevoegen met daaronder een koptekst en een tekstveld. Daarmee kun je bijvoorbeeld een referentie toevoegen,
    of je producten en diensten.
  • Icoonbox : Dit is hetzelfde als bovenstaande afbeeldingsbox, maar dan met een icoon in plaats van een afbeelding.
  • Aantal sterren : Hiermee kun je een sterwaardering toevoegen, zoals je dit vaak bij reviews ziet. Je kunt o.a. de kleur en het aantal sterren aanpassen (ook halve sterren).
  • Afbeeldingsgalerij : Handig als je meerdere afbeeldingen naast elkaar wilt toevoegen. Kies o.a. welke afbeeldingen je wilt tonen en hoeveel afbeeldingen er naast elkaar komen.
  • Carroussel afbeelding : Hiermee kun je een slider met afbeeldingen toevoegen. Je kunt o.a. het formaat en aantal afbeeldingen naast elkaar instellen, of je pijlen en navigatie wilt tonen en of je de carroussel automatisch wilt laten lopen (en hoe snel).
  • Iconenlijst : Hiermee kun je een lijstje toevoegen, waarbij je per item kunt bepalen welk icoontje daarvoor gebruikt wordt. Handig voor bijvoorbeeld een vergelijkingstabel of een opsomming van features.
  • Teller : Hiermee voeg je een teller toe die oploopt tot een vooraf ingesteld getal. Dit wordt bijvoorbeeld vaak gebruikt om aan te geven hoeveel gebruikers een product heeft.
  • Voortgangsbalk : Hiermee voeg je een voortgangsbalk in die vol loopt tot een vooraf ingesteld percentage. Handig om bijvoorbeeld de voortgang van een project aan te geven.
  • Aanbeveling : Ook wel referentie of testimonial genoemd. Hiermee kun je een foto (van de klant of het project) kiezen, de naam en functie van die klant invoeren en natuurlijk ook de tekst van de aanbeveling toevoegen.
  • Tabs : Hiermee kun je meerdere tekstbewerker velden als tabbladen naast elkaar weergeven.
  • Accordeon : Hiermee kun je meerdere tekstbewerker velden onder elkaar weergeven, en deze laten openen en sluiten als er op de titel wordt geklikt. Dit wordt bijvoorbeeld vaak gebruikt voor veel gestelde vragen.
  • Wissel : Dit is hetzelfde als de accordeon, maar nu sluit de huidige tekst automatisch als je een andere titel aanklikt.
  • Sociale iconen : Hiermee kun je links naar je social netwerk pagina’s toevoegen, zoals Facebook, Twitter, LinkedIn, Instagram en Pinterest.
  • Melding : Hiermee voeg je een tekstblok op dat is opgemaakt als een melding. Je kunt kiezen uit diverse stijlen, zoals een waarschuwing, succes of info melding.
  • SoundCloud : Hiermee voeg een SoundCloud speler toe op je website, waarbij je diverse knoppen kunt toevoegen of weglaten. Vooral handig voor artiesten.
  • Shortcode : Veel plugins – bijvoorbeeld contactformulier plugins – maken gebruik van shortcodes. Met deze widget voeg je die eenvoudig toe.
  • HTML : Met deze widget kun je eigen HTML code toevoegen op je pagina. Ook handig voor iframes.
  • Menu anker : Je kunt in je menu verwijzen naar een bepaalde positie op de pagina door het toevoegen van een ID. Met deze widget kun je die positie markeren. Je kunt echter ook gewoon een ID toevoegen in de instellingen van de betreffende sectie of widget (daarover later meer) net zo makkelijk.

Widget aanpassen

Iedere widget heeft andere mogelijkheden. Wanneer je op het potlood icoontje klikt rechts van het blok, komen altijd in het linker gedeelte de verschillende instellingen te staan. Bovenin zie je 3 knoppen.

Diegene met het blauwe balkje eronder is het actieve item. 

Content
In dit deel vind je de normale instellingen denk hierbij aan tekst aanpassen in een tekstblok of een foto wijzigingen in een foto widget. 

Style
Hier vind je de stijlmogelijkheden van een widget. Lettertype, kleur, uitlijning enzovoort. 

Advanced
Hierin staan alle geavanceerde instellingen.

Widget verwijderen

Je kunt natuurlijk ook altijd een widget verwijderen. Klik dan met je rechtermuisknop op de widget en kies in het uitklap menu op verwijderen. 

Vergeet nooit om op updaten te klikken na een wijziging. Deze knop bevind zich links van de pagina aan de onderzijde van het instellingen panel.