Stel dat je logo’s in een slider (ook wel carousel genoemd) op je WordPress website wilt plaatsen, bijvoorbeeld van klanten of van sponsors. Je kunt hiervoor de plugin Meta Slider gebruiken. Ik heb verschillende plugins uitgetest en deze plugin werkt naar mijn mening het beste. In dit artikel wordt stap voor stap uitgelegd hoe je een logo slider maakt en op je WordPress website plaatst.

Logo slider in WordPress maken

Stap 1:

Zorg ervoor dat de afbeeldingen die je in de slider wilt plaatsen even groot zijn. Dit zal het mooiste resultaat opleveren. De afbeeldingen kun je bijvoorbeeld met PhotoShop even groot maken.

Stap 2:

Upload de afbeeldingen naar je WordPress website. Dit doe je via Media –> Bibliotheek.
Logo slider

Stap 3:

Installeer de plugin Meta Slider en activeer deze.

Stap 4:

Ga naar Meta Slider in het linker menu.
Logo slider

Stap 5:

Klik op Slide toevoegen om één voor één de afbeeldingen aan je slider toe te voegen. Je kunt per slide een URL toevoegen zodat wanneer je op het logo klikt de bijbehorende website wordt geopend.
Logo slider

Stap 6:

Kies bij Instellingen voor Flex Slider en kies bij de Breedte en Hoogte voor de afmetingen van je afbeeldingen. In dit voorbeeld kiezen we voor een breedte van 150 pixels en een hoogte van 60 pixels voor iedere afbeelding. Je kunt kiezen of je pijlen wilt tonen en of je een navigatie onder de slider wilt tonen. De navigatie ziet eruit als puntjes waarmee je de slider horizontaal kunt laten scrollen.
Logo slider

Stap 7:

Kies bij Geavanceerde instellingen voor Carousel modus. Je kunt er daarnaast voor kiezen of de slider automatisch moet afspelen en of je de logo’s in willekeurige volgorde wilt tonen (Willekeurig aanvinken).
Logo slider

Stap 8:

Klik op Opslaan.
Logo slider

Stap 9:

Kopieer de shortcode en plak deze op de pagina waar je de logo slider wilt plaatsen.
Logo slider

Het resultaat:

Logo slider

De slider wordt standaard met een 100% breedte geplaatst in de container. Als je de logo slider minder breed wilt maken, kun je er een div omheen plaatsen en met CSS opmaken.