WordPress & Elementor kennisbank

Social media iconen in menu toevoegen met Elementor

Inhoud van dit artikel:

Social media iconen in menu toevoegen op je WordPress website? Als je Elementor Pro gebruikt, kun je eenvoudig de social media iconen toevoegen aan je menu en/of header. Om te beginnen is het handig dat je alvast de links van je social media kanalen bij de hand hebt.

Stap 1: header maken met Elementor

Als je nog geen header hebt gemaakt met Elementor dan doe je dit eerst. Als je gebruik maakt van de header templates die Elementor al aanbiedt, zie je vaak dat de social media iconen in menu zijn geplaatst.

Stap 2: Social media iconen in menu toevoegen

Om social media iconen in menu te plaatsen op je WordPress site, gebruik je de ‘sociale iconen’ widget van Elementor. Deze is ook beschikbaar in de gratis versie (alleen kun je dan geen menu maken). Deze sleep je naar de plek waar je de iconen wilt plaatsen. Wanneer je ze naast het menu wilt hebben, kun je het beste eerst een extra kolom toevoegen. 

Stap 3: Social media iconen instellen in menu

Als je de widget op de juiste plek hebt staan, kun je nu de juiste social media iconen selecteren. Bijvoorbeeld Facebook, Instagram en Twitter. Je kunt eenvoudig social media iconen toevoegen of verwijderen door op ‘item toevoegen ‘ te klikken en op het kruisje om te verwijderen.

Stap 4: Styling van de sociale media iconen in menu

De volgende stap is om de social media iconen te stijlen. Elementor biedt hiervoor een aantal opties:

Vorm van de iconen aanpassen

Je kunt de vorm van de social media iconen aanpassen naar ‘Afgerond’, ‘Vierkant’ of ‘Cirkel’

Kleuren van van de social media iconen aanpassen

Onder het tabblad ‘Stijl’ vind je de optie om de kleuren van de social media iconen in menu aan te passen. Je kunt de officiële kleur van de social media platformen gebruiken, of de iconen zelf een kleur geven die past bij je huisstijl.

Social media iconen vergroten of verkleinen

  • Met de optie ‘Afmeting’ kun je de grootte van de iconen aanpassen. Schuif de balk heen en weer voor het beste resultaat.
  • Met de optie ‘Padding’ kun pas je de grootte van de iconen ten op zichte van de achtergrond aan.
  • Om de afstand tussen te iconen te vergroten of verkleinen, gebruik je de schuifbalk ‘Afstand’

Met de Sociale media iconen widget van Elementor kun je dus eenvoudig social media iconen in menu van je WordPress website toevoegen.

Picture of Sanne IJspeerd

Sanne IJspeerd

Eigenaar SIJ Web | WordPress & Elementor Specialist | B2B Marketing Manager in SaaS

Ook interessant voor jou

Elementor loop builder: 10 praktische voorbeelden

Transparante header WordPress maken met Elementor

Inzendingen Elementor formulier opslaan in WordPress

2 Responses

  1. Hi Sanne,
    Dank voor deze heldere omschrijving! Het werkt super op mijn website. Behalve in Explorer… daar zijn de icons ineens veel groter en de achtergrondkleuren krijg ik niet aangepast (in bvb Chrome ziet het er wel perfect uit). Heb jij toevallig enig idee hoe ik dit kan oplossen? Ik weet dat Elementor en Explorer geen vrienden zijn, maar wil toch ook graag een verzorgde website voor de Explorer-gebruikers.
    Hoop dat je me kan helpen!
    Groeten, Hannah

    1. Hoi Hannah,

      Dat Elementor en Internet Explorer geen vriendjes zijn heeft niets met Elementor te maken. Internet Explorer is een verouderde webbrowser die al enige tijd niet meer geüpdatet wordt. Je kunt je website hier dus niet voor optimaliseren. Als je dat wel wilt, zit er helaas niets anders op dan de social media iconen te verwijderen uit je header.
      Wel kun je bezoekers erop wijzen om een andere browser te gebruiken, hoe je dat doet lees je hier –> https://elementorcodes.com/elementor-ie-internet-explorer-fix/

      Groetjes,

      Sanne

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.