Afgeronde hoekjes: hoe doe je dat?

Ben je niet zo van dat strakke hoekige en wil je onderdelen (zoals knoppen, afbeeldingen, vlakken) liever met afgeronde hoekjes?

In dit artikel ga ik uitleggen hoe je dat voor elkaar krijgt. Het is helaas niet één klik op de knop, maar het is ook niet moeilijk en de moeite waard als afgerond beter bij je huisstijl past.

Stap 1: afbeeldingen en (de meeste) knoppen afgerond maken

Dit is gelukkig wel met één knop aan te passen. Maar niet alle knoppen zullen hierdoor veranderen (zoals die op de homepagina in de aanbodblokjes) en moet je met de hand aanpassen. Maar dat doen we in de volgende stap.

1. Open op een pagina waarop je afbeeldingen en knoppen hebt (zodat je het verschil kunt zien) de Elementor builder. Klik daarna linksboven op het menu-icoontje.

2. Klik op ‘Site instellingen’ en dan ‘Afbeeldingen’.
3. Vul bij afgeronde hoeken bijvoorbeeld 10 in. Alle afbeeldingen op de site zullen nu afgeronde hoekjes hebben.

4. Ga terug met het pijltje linksboven en klik nu op ‘Knoppen’.
5. Vul bij afgeronde hoeken +/- 8 in voor kleine afgeronde hoekjes, of 99 voor volledig ronde hoeken zoals in dit voorbeeld:

Knoppen handmatig afgerond maken

Je zult merken dat helaas niet alle knoppen ‘luisteren’ naar de globale instelling die je hierboven hebt gedaan. Sommigen moeten we even met de hand instellen. Bijvoorbeeld die op de homepagina in de aanbod blokjes:

1. Open de Elementor builder van de homepagina en klik op het aanbodblokje (of ga via de navigator naar de ‘Call to Action’).
2. Klik op ‘Stijl’ en verander de ‘Border radius’ naar +/- 8 voor kleine afgronde hoekjes of 99 voor volledig ronde hoeken.

3. Nu kun je de stijl van deze ‘Call to Action’ (= het aanbodblokje in zijn geheel met afbeelding, tekst en knop) kopiëren door er rechts in te klikken en dan ‘Kopieer’.

5. Klik daarna rechts in de volgende blokjes en klik op ‘Plak stijl’ (niet Plakken) om de stijl van de knop snel te kunnen toepassen. Let op: dit kopiëren + plakken werkt alleen per type element, dus je kunt deze stijl nu niet plakken op alle soorten knoppen. Je kunt alleen stijlen van ‘Knoppen’ plakken op ‘Knoppen’, en van ‘Call to Action’-blokjes op ‘Call to Action’-blokjes.

Aanbodblokjes op de homepagina afgerond maken

Volg deze stappen als je de vlakjes van de aanbodblokjes afgerond wilt maken:

1. Open de Elementor Builder van de homepagina en klik de container (!) aan van het aanbodblokje. Dit kun je het beste via de Navigator in de rechterbalk doen (zie 1 in screenshot). Het gaat om Dienst #1 t/m #3. Onder Diensten -> Overzicht.
2. Klik eerst Dienst #1 aan, klik daarna in de linkerbalk op het tabje ‘Stijl’.
3. Klap ‘Rand’ open en vul bij afgeronde hoeken daar +/- 10 in. Je ziet het alleen onderin veranderen, maar dat klopt en de bovenkant komt nog!

4. Klik nu rechts in de navigator op Dienst #1 en ‘Kopieer’.
5. Klik dan rechts in de navigator op Dienst #2 en dan ‘Plak stijl’. Herhaal dit voor Dienst #3.

6. Om de bovenkant ook rond te krijgen moeten we de ‘Call to Action’ blokjes ook afgerond maken. Klik daarom op een ‘Call to Action’ en klik op het tabje ‘Geavanceerd’.
7. Klap ‘Rand’ open en vul bij afgeronde hoeken hetzelfde als wat je bij stap 3 hebt ingevuld.

8. Klik nu rechts in ‘Call to Action’ via de navigator en dan ‘Kopieer’.
9. Klik rechts in de volgende ‘Call to Action’ via de navigator blokjes en dan ‘Plak stijl’. Nu hebben de aanbod-blokjes afgeronde hoekjes!

Overige onderdelen afgerond maken

Voor overige onderdelen is het gelukkig heel rechttoe rechtaan. Je klikt het juiste element aan, gaat naar Rand (de ene keer staat hij onder Stijl, de andere keer onder Geavanceerd) en past de ‘Afgeronde hoeken’ of ‘Border radius’ aan.

Bijvoorbeeld bij de FAQ op de aanbodpagina (het element heet via de nagivator ‘Classic Accordion’) doe je het zo:

En bij gekleurde vlakken moet je de Container selecteren die de achtergrondkleur bepaalt (in dit voorbeeld ‘Pakket 3’ die een witte achtergrond heeft):

Zijn er nog meer onderdelen die je afgerond wilt krijgen en lukt het niet? Vraag het vooral even, dan help ik je!