Volgen

WordPress Tutorial | Header sliders op je site beheren

Vaak verwerken we in websites een sfeerbeeld dat terugkeert bovenaan pagina's. Dat kunnen ook verschillende beelden voor verschillende pagina's zijn, of zelfs meerdere sfeerbeelden boven één pagina. In het laatste geval zullen de beelden gaan rouleren. Je kunt die beelden zelf beheren met de functie "Header Slides" in WordPress.

Als je op deze functie klikt, zie je daaronder een subfunctie "Slide" en een subfunctie "Sliders":

Dit wil zeggen dat je slides en sliders kunt maken. Het principe is vergelijkbaar met dia's en een diashow:

Je maakt dus eerst afzonderlijke slides. Die zet je in een slider. En die slider kun je vervolgens in een pagina zetten, zodat boven de slider boven de pagina wordt getoond. Overigens: ook als je maar één afbeelding boven de pagina wilt tonen, moet je toch die ene slide in een slider zetten.

Hieronder zie je een paar toegepaste voorbeelden van de Header Slides functie:

(Bekijk de hele site op www.intrimotiv.nl)

(Bekijk de hele site op www.gestaltpraktijkamsterdam.nl)

Afzonderlijke slides maken

  • Klik op Header Slides > Nieuwe slide
  • Geef de slide bovenin het volgende scherm een voor jezelf logische naam.
  • Upload bij Afbeelding een afbeelding die je als slide wilt gebruiken.
    • Wij adviseren een afbeelding van 1920 pixels breed. De hoogte is afhankelijk van hoe hoog je de slide op je website wilt tonen. Maak de afbeelding niet al te zwaar, dat kan je site vertragen.
  • Bovenin het scherm kun je tekst invoeren. Die tekst wordt over de afbeelding heen gelegd.
  • Verder naar onderen in het scherm kun je allerlei instellingen voor die tekst beheren:
    • Tekstopmaak: het lettertype, kleur, grootte en meer.
    • Positie tekstvenster: bepaal de positie van het tekstvenster, door de afstanden (marge) tot boven, beneden, links en rechts in te voeren (in principe volstaat het om links en boven in te voeren).
    • Randen en hoekronding tekstvenster: je kunt het tekstkader hier een rand geven en het kader eventueel ook ronde hoekjes geven.
    • Hoogte en Breedte tekstvenster: bepaal de hoogte en breedte van het tekstkader.
    • Achtergrondkleur tekstvenster: geef het tekstkader een achtergrondkleur.
    • Transparantie tekstvenster: maak de achtergrondkleur transparant (zodat je de achterliggende afbeelding er nog een beetje doorheen kunt zien).
    • Padding: de afstand tussen de tekst en de randen van het tekstkader.

Als je op deze manier een of meerdere slides hebt gemaakt, kun je deze in een slider plaatsen.

Een slider maken en vullen met slides

  • Klik op Sliders > Nieuwe slider
  • Geef de slider bovenin het volgende scherm een voor jezelf logische naam. Dat kan bijvoorbeeld de naam zijn van de pagina waar je de slide wilt gebruiken.
  • In het veld Slider Alias vul je een naam in die je later zult gebruiken bij het invoegen van de slider in een pagina. Gebruik voor het gemak korte, makkelijk te onthouden namen, bijvoorbeeld "home" of "algemeen".
  • Bij Hoogte bepaal je de hoogte van de slider. Maak die in ieder geval nooit groter dan de hoogte van de slides die je in de slider gaat plaatsen (anders krijg je een witte strook onder de afbeelding).
  • Als je meerdere slides in de slider zet, zullen die rouleren met een "fade in, fade out" effect.
    • In de velden Ingangssnelheid en Uitgangssnelheid bepaal je de snelheid van respectievelijk de "fade in" en "fade out".
    • In het veld Duur bepaal je hoelang de slide in beeld blijft staan voordag de "fade out" begint en naar de volgende slider wordt doorgerouleerd.
  • Klik op de blauwe knop Slide rechtsonderin om slide toe te voegen: je kunt nu kiezen uit de slides die je hebt aangemaakt. Je kunt meerdere slides toevoegen.
    • Om de volgorde te veranderen, kun je slides aan de linkerkant "oppakken" en verslepen.
    • Om een slide te verwijderen ga je met je muis over de rechterkant van het balkje. Er verschijnt een bolletje met een min-teken: klik daarop om de slide te verwijderen.

Een algemene slider instellen voor alle pagina's in de site

Het is nogal bewerkelijk om boven elke pagina apart een slider in te stellen. Daarom kun je centraal één slider instellen die boven alle pagina's wordt getoond, behalve boven pagina's waarin je aangeeft wél een eigen specifieke slider te willen gebruiken.

Je stelt een algemene slider als volgt in:

  • Ga naar Option > Slider in de linkerwerkbalk van WordPress
  • Vul in het veld Slider alias voor hele site de alias in van de slider die je als algemene slider wilt gebruiken.
  • Vul in het veld Slider alias voor blog de alias in van de slider die je boven de blogoverzichtspagina en afzonderlijke blogartikelen wilt tonen.

Ook kun je hier bij Rand aangeven of je onderaan de slider een kaderlijntje wilt tonen. Die instelling geldt voor alle sliders door de hele site.

Een specifieke slider instellen op een pagina

  • Ga naar Pagina's en open de gewenste pagina.
  • Onderin het scherm zie je een veld waar je de alias kunt invullen van de slider die je op die pagina wilt laten zien. Vul je daar niks in, dan zal de algemene slider boven de pagina worden getoond.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0
Hebt u meer vragen? Een aanvraag indienen

Opmerkingen