Iconen in Elementor - Zo optimaliseer je ze

Elementor biedt je een scala aan tools om je WordPress-site vorm te geven, een van de fundamentele bouwstenen is het pictogram. Pictogrammen zijn niet alleen decoratieve elementen, ze kunnen ook functionele gebruikerservaringen verbeteren en helpen belangrijke informatie in een oogopslag te communiceren. Leer hier hoe je pictogrammen in Elementor kunt toepassen en aanpassen om je website te verbeteren.

Belangrijkste inzichten

• Pictogrammen zijn veelzijdige elementen die zowel artistieke als informatieve functies kunnen vervullen.
• Je kunt pictogrammen individueel aanpassen, inclusief kleur, grootte, vorm en animatie.
• Een optie voor hyperlinking maakt het mogelijk om pictogrammen effectief te gebruiken voor navigatie.

Stap-voor-stap handleiding

Stap 1: Pictogram toevoegen

Om een pictogram toe te voegen aan je sectie, sleep je de Pictogram-widget naar het gewenste gebied van je pagina. Je zult zien dat er een voorselectie wordt weergegeven, meestal een sterpictogram.

Stap 2: Pictogram wijzigen

Klik op het bestaande pictogram om het selectievenster te openen. Hier kun je kiezen uit een verscheidenheid aan pictogrammen. Selecteer bijvoorbeeld een taxipictogram om een specifiek thema aan je inhoud toe te voegen.

Stap 3: Pictogramtype selecteren

Elementor biedt drie soorten pictogrammen aan: reguliere pictogrammen, solide pictogrammen en merkpictogrammen. Reguliere pictogrammen hebben meestal alleen een omtrek, terwijl solide pictogrammen volledig zijn ingevuld. Merkpictogrammen komen overeen met bekende logo's, zoals die van Amazon of Apple.

Stap 4: Weergave-instellingen aanpassen

Je kunt de weergave van je pictogram op verschillende manieren aanpassen - door "Gestapeld" (volledig ingevuld), "Ingelijst" (met omtrek) of "Achtergrond" (de weergegeven achtergrond). Kies de optie die het beste past bij de esthetiek van je website.

Stap 5: Grootte en vorm van het pictogram aanpassen

Een ander belangrijk punt is de vorm van het pictogram. Je kunt kiezen of het rond of vierkant moet zijn. Een cirkel wordt vaak als harmonieuzer ervaren, terwijl een vierkant een andere grafische indruk achterlaat.

Stap 6: Koppelen van links

Om interactiviteit te creëren, kun je een link instellen. Voer bijvoorbeeld het adres van je startpagina in, zodat bezoekers bij het klikken op het pictogram daarheen worden geleid.

Stap 7: Stijl aanpassen

Onder "Stijl" heb je de mogelijkheid om de primaire en secundaire kleur in te stellen. Voor hovereffecten kun je ook bepalen hoe de kleuren moeten veranderen. Verander bijvoorbeeld de primaire kleur in rood en de secundaire kleur in zwart.

Stap 8: Hover-effecten definiëren

Als je de interactiviteit wilt versterken, kun je ook animatie-effecten toevoegen aan het hover-element. Deze omvatten opties zoals "Push" of "Grow". Kies een gewenst effect om de gebruikerservaring te verbeteren.

Stap 9: Grootte en afstand definiëren

Je kunt de grootte van het pictogram aanpassen, terwijl de afstand, ook wel padding genoemd, bepaalt hoeveel ruimte er tussen het pictogram en zijn binnenrand is. Experimenteer met deze waarden om de gewenste balans te vinden.

Stap 10: Waarden koppelen

Als je individuele instellingen voor verschillende hoeken van een pictogram wilt maken, kun je de waarden koppelen of afzonderlijk aanpassen. Gekoppelde waarden zorgen ervoor dat wijzigingen simultaan op alle zijden worden doorgevoerd.

Stap 11: Controleer geavanceerde instellingen

Onder de geavanceerde instellingen vind je dezelfde opties als bij de basisinstellingen. Zorg ervoor dat alles correct geconfigureerd is om een consistente weergave op je website te garanderen.

Samenvatting

In deze handleiding heb je de basisstappen geleerd voor het toevoegen en aanpassen van pictogrammen in Elementor. Van het kiezen van het pictogram tot aan de kleur, grootte en koppeling - met deze technieken kun je websites maken die zowel esthetisch aantrekkelijk als functioneel zijn.