WPBakery - Voor / Na Foto Slider

WPBakery Voor/Na Foto Slider

Voor WPBakery (Visual Composer) zijn er erg veel plugins (Add-On’s) te verkrijgen. In ons vorige artikel (WPBakery Elementen Maken) maakten we al een start met het zelf maken van WPBakery Elementen.

Een leuke plugin om twee afbeeldingen te tonen in één slider, waarmee de bezoeker een idee krijgt van het resultaat van voor en na een behandeling is de “Voor/Na Foto Slider” -plugin.

Zo’n behandeling kan dan bijvoorbeeld zijn: een bezoekje aan de schoonheidsspecialist, de kapper of van de hond of kat aan de trimsalon.

Er zijn via WordPress.org een aantal van die plugins te verkrijgen. Wij hebben er één zelf “gemaakt”. Niet 100% zelf gemaakt, de volgende plugin is gebaseerd op de Slider Plugin van TwentyTwenty en hebben wij aangepast en uitgebreid met een aantal leuke instellingen. Tevens hebben we alles vertaald naar het Nederlands.

Voorbeeld:

WPBakery Voor Na Foto Slider Trimbehandeling WPBakery Voor Na Foto Slider Trimbehandeling Na

In dit voorbeeld wordt een hond getoond van voor en na de trimbehandeling.

Via de instellingen van deze plugin worden dan twee afbeeldingen gekozen:

Voor na Foto Slider Foto's toevoegen

Slider Foto’s Toevoegen

Met de optie “Slider Positie” kan de slider links, gecentreerd of rechts op de pagine getoond worden. Het is ook mogelijk om de grootte van de slider in te stellen.

Design Opties

Via de “Design Opties” is het dan nog mogelijk om een rand en rand-kleur in te stellen. Tevens is het bij die opties ook mogelijk om “afgeronde” hoeken in te stellen:

Voor Na Foto Slider Randen Instellen

Randen en hoeken afronden

WPBakery Element

In de pagina-editor wordt de slider dan getoond, met miniatuur-weergaven van de foto’s:

Voor Na Foto Slider Element op pagina-editor

Element op pagina-editor

Dat is erg handig als er meerdere Voor/Na -Sliders op één pagina getoond worden. Zo zien we dan precies welke slider welke foto’s bevat.


Uitbreidingen

Een eerste uitbreiding van deze slider is toegevoegd naar aanleiding van een vraag van één van onze bezoekers voor een extra optie voor de startpositie van de sliderbalk. Dit is nu mogelijk via de algemene instelling van dit WPBakery-Element. Tevens hebben we nog een optie toegevoegd om de sliderbalk of horizontaal (van links naar rechts en v.v.) of verticaal (van boven naar beneden en v.v.) te gebruiken:

Heb je ideeën voor nog meer extra’s functies voor deze “Voor/Na Foto Slider “, dan horen we die graag via een reactie onderaan deze pagina.


Zelf leren maken ?

Wil je ook zelf een WPBakery Plugin kunnen aanpassen of maken, de extra mogelijkheden van WPBakery onder de knie krijgen ? We geven met regelmaat trainingen in het aanpassen van WordPress Thema’s, het maken van Plugins en zo ook in het personaliseren van WPBakery.

Meer info, bekijk ons training aanbod hier: WordPress Trainingen.

Vragen & Info

Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

We verzorgen ook trainingen speciaal voor WordPress Design en WPBakery. Voor meer info, bekijk dan deze pagina: WordPress Trainingen.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Overige Artikelen


Reacties

  1. Hallo QWAIN Team,

    Wat een leuke toepassing. Is het misschien mogelijk om het startpunt van de sliderbalk in te stellen. Nu staat die op de helft, dus zeg maar 50%.

    Het zou ook wel leuk zijn om die bijvoorbeeld op 10% te zetten (of een andere waarde).

    Hoor het graag…

    Groet, Hans

    • Hallo Hans,

      Dank je voor je reactie. Leuke optie welke we in een volgende update van dit artikel zullen meenemen.

      Zodra we dat gedaan hebben brengen we je hiervan zeker op de hoogte.

      Groeten, QWAIN

      • Beste Hans,

        We hebben de slider-functie aangepast met een optie om de start-positie van de slider-balk in te kunnen stellen.

        Groet, team QWAIN

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *