De meeste bloggers hebben een foto van zichzelf in hun sidebar. Zo krijgen de bezoekers een beeld van de persoon achter de blog. Sommige WordPress themes hebben ingebouwde widgets waarmee je makkelijk een foto is je sidebar kan zetten, maar dat hebben ze lang niet allemaal. Heeft jouw theme dat niet? Dan is dit artikel voor jou! Vandaag laat ik je stap voor stap zien hoe je het zelf kunt doen zonder overbodige plugins. 

Hieronder laat ik je stap voor stap zien hoe je met HTML een afbeelding in je sidebar kan zetten. Laat je niet afschrikken door HTML, ik beloof je dat het makkelijk is! Daarnaast ga ik ook uitleggen hoe je de afbeelding kun laten linken naar een andere pagina of website.

1. Upload je foto/afbeelding

De eerste stap is het uploaden van je foto. Dit kun je gemakkelijk doen in het admin-gedeelte van je WordPress website. Klik in het linker menu op ‘Media’. Klik op ‘Nieuw bestand’ en zoek naar de foto op je computer en upload deze. Klik na het uploaden op de foto zodat het scherm met ‘Bijlagedetails’ opent.

In dit schermpje zie je aan de rechterkant het bovenstaande. Kopieer de volledige link in het vakje achter URL.

2. Maak de HTML-code

Het makkelijkste is nu om de URL die je net hebt gekopieerd even in een tekstverwerker (zoals kladblok) te plakken. Kopieer vervolgens het onderstaande stukje code. Vervang het stuk FOTO_URL door de URL die je net hebt gekopieerd uit WordPress.

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][html]<img src="FOTO_URL">[/html]

En je stukje code is al klaar! Als je wilt dat je foto linkt naar een pagina of andere website lees dan verder. Zo niet, ga dan verder met stap 3.

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][html]<a href="WEBSITE_URL">CODE _FOTO</a>[/html]

Kopieer de bovenstaande code in je tekstverwerker. Ga naar de pagina of website waar je de afbeelding naar toe wilt linken en kopieer de URL. Plak deze URL in de bovenstaande code op de plek waar WEBSITE_URL staat. Plak vervolgens de code die je hiervoor hebt gemaakt op de plek waar CODE _FOTO staat.

3. Maak de widget

Kopieer de code die je net hebt gemaakt en ga terug naar het admin gedeelte van WordPress. Klik in het linker menu op ‘Weergave’ en vervolgens op ‘Widgets’. Zoek vervolgens in de lijst naar de knop met ‘Tekst’, klik erop en voeg deze toe aan de sidebar waar je de foto wilt weergeven.

Open de knop ‘Tekst’ en plak daar de code in die je net hebt gemaakt. Klik vervolgens op ‘Opslaan’ en je bent klaar!

Succes!

Zie je? Zo moeilijk is het niet. 🙂 Hiermee kun je heel creatief je layout opleuken en interessante dingen in je sidebar plaatsen. Denk bijvoorbeeld aan zelfgemaakte social media knoppen of knoppen die verwijzen naar pagina’s. Mocht je nog vragen hebben, of lukt het niet, laat het dan weten bij de reacties! Dan doe ik me best om je te helpen. 🙂

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]