Hoe voeg je zelf een afbeelding toe in WordPress wanneer de WPBakery Page Builder wordt gebruikt? Een WordPress website laten maken en wil je dit graag weten, lees dan verder. Op deze pagina laten we zien hoe jij zelf een afbeelding kunt toevoegen via de back-end editor van WPBakery.
Open de WPBakery back-end editor #
Een website laten bouwen en tijd voor nieuwe afbeeldingen? Navigeer via het linker menu naar de ‘Pagina’s’ pagina. Klik bij de pagina waar de afbeelding op moet komen te staan op ‘bewerken’. De WPBakery back-end editor is nu geopend.
Ben je ingelogd en bekijk je de pagina die je wilt bewerken via de voorkant? Dan kan je ook via hier naar de back-end editor. Boven in de balk staat dan ‘pagina bewerken’. Klik hierop en de back-end editor van WPBakery page builder wordt geopend.
Voeg een blok toe #
Wanneer de back-end editor van WPBakery is geopend zie je het volgende:
Om een nieuwe afbeelding toe te voegen moet er eerst een blok worden gemaakt waar deze afbeelding in komt te staan. Onder de bestaande blokken kan je op een ‘+’ icoon klikken.
Selecteer hier welk blok je wilt toevoegen. In dit geval kiezen we ‘afbeelding’. Dit blok kun je vinden door rechts boven het zoekwoord in te typen of ga via het tabblad ‘inhoud’ naar het blok afbeelding.
Afbeelding instellen & instellingen #
Er zijn binnen het afbeelding blok een aantal instellingen die je kunt aanpassen, namelijk;
- Je kunt de widget een naam geven, zo kun je deze later gemakkelijk herkennen
- Je kunt instellen welke afbeelding je wilt laten zien
- Er zijn nog een aantal andere opties, deze hebben te maken met de vormgeving
Widget title #
De ‘widget titel’ is een naam die je het nieuw toegevoegde blok geeft om het tijdens het editen goed te herkennen. Dit zie je alleen wanneer de editor is geopend en niet op je webpagina.
Image source #
Hier stel je in waar de afbeelding vandaan wordt gehaald. Vaak zal dit ‘Media libary’ zijn, dit is de standaard mediabibliotheek die in WordPress zit en waar je waarschijnlijk alle afbeeldingen in hebt staan. Andere opties zijn ‘External link’ en ‘Featured image’.
Wil je een afbeelding gebruiken die je zelf hebt gemaakt of al hebt geüpload, dan kies je voor ‘Media libary’. Klik onder ‘afbeelding’ op het plus icoontje en selecteer hier een afbeelding uit de bibliotheek. Wil je een afbeelding uploaden klik dan links boven op ‘bestand uploaden’ en volg de stappen. Of sleep een bestand naar dit geopende venster, dan uploadt de foto automatisch.
Wil je de afbeelding tonen via een externe link, dan kies je voor de optie ‘External link’. Voeg vervolgens de link toe, eventueel de afmetingen van de afbeelding en de ‘caption’, oftewel de omschrijving.
Tot slot kun je kiezen om de ‘Featured image’ te tonen. Dit is de afbeelding die je voor deze pagina in hebt gesteld als ‘uitgelichte afbeelding’. Het instellen van deze afbeelding gebeurt buiten de WPBakery editor in het menu rechts op de pagina.
Afbeeldingsformaat #
Geef hier eventueel aan welk formaat de afbeelding heeft/moet krijgen. Dit kan een vooraf gedefinieerde maat zijn zoals onder dit veld beschreven, of een handmatig in te vullen afmeting.
Add caption #
Wil je de omschrijving van de afbeelding tonen? Vink dan dit vakje aan.
Afbeelding uitlijnen #
Hier bepaal je hoe de afbeelding uitgelijnd moet worden (binnen het blok/de widget). De afbeelding kan dus links, rechts of gecentreerd worden binnen de ruimte die het blok heeft.
Image style #
Hier zijn verschillende vooringestelde stijlen voor de afbeelding te vinden. Wil je de afbeelding ‘gewoon’ laten zien zoals deze is, laat deze instelling dan op default staan. Wil je iets anders, bekijk dan deze opties eens en probeer ze uit om te zien wat ze doen, je kunt altijd weer terug naar default!
Actie bij klikken #
Wat moet er gebeuren als er op de afbeelding wordt geklikt? Wil je de afbeelding linken naar een andere pagina o.i.d. kies dan voor ‘Open aangepaste link’, hier kan je vervolgens zelf een link in zetten waar de afbeelding heen moet gaan na het klikken. De andere opties spreken voor zich, dit zijn: Link naar afbeelding op volledige grootte, Open lightbox en Inzoomen.
CSS animatie #
Een effect toepassen op de afbeelding wanneer de pagina wordt geladen kan hier. Denk aan een ‘zoom’ of een ‘fade’ animatie. Hierbij geldt ook: probeer het uit! Kijk wat je er van vindt en je kunt altijd terug naar ‘Geen’ als je het niet mooi vindt.
Afbeelding widget opslaan #
Klik na het instellen van de afbeelding op ‘opslaan’. Het nieuw aangemaakte blok is nu onder de andere blokken te zien in de editor.
Blok verplaatsen #
Om het blok te verplaatsen, naar bijvoorbeeld de bovenkant van de pagina, klik je op het meest linkse icoontje boven aan het blok. Klik en sleep het blok vervolgens naar de plaats waar het moet komen te staan.
Update de pagina #
Tot slot klik je rechts in het menu op ‘Updaten’. Dit zorgt ervoor dat je wijzigingen worden opgeslagen. Check daarna altijd nog even op de voorkant van de website of alles er zo uitziet als je had bedacht.
