IN DEZE HANDLEIDING:
- 1 Standaardrij- en modulemarges en padding wijzigen in WP Beaver Builder
- 2 Werken met kolomlagen, modulelagen en onderliggende kolommen (child kolommen)
- 3 Tips voor werken met kolommen
- 4 Cursus WordPress op maat beginners & gevorderden
- 5 WordPress Pop-up Bootcamp spoedcursus op maat
- 6 WordPress Bootcamp all-in one spoedcursus
Standaardrij- en modulemarges en padding wijzigen in WP Beaver Builder
WP Beaver Builder heeft de volgende standaardmarges en opvulling waarmee de beginwaarden worden ingesteld wanneer je een afzonderlijke rij of kolom opent voor bewerking. Deze instellingen zijn aan alle kanten (boven, onder, links, rechts) en op alle apparaten hetzelfde.
Type | Standaardwaarde |
Row margins | 0px |
Row padding | 20px |
Column margins | 0px |
Column padding | 0px |
Module margins | 20px |
Module padding | n.v.t. |
Het kan handig zijn om deze waarden te veranderen voor je WordPress website. Ik zet meestal de Row padding op 0 (nul).
Handleiding standaardmarges en opvulling voor de hele site wijzigen:
- Open een van uw pagina’s in Page Builder.
- Klik in de rechterbovenhoek op Extra> Algemene instellingen.
Als u de algemene waarden voor rijen wilt wijzigen, gaat u naar de sectie Rijen en wijzigt u de waarden voor Marges en Opvulling. - Als u de algemene waarden voor modules wilt wijzigen, gaat u naar de sectie Modules en wijzigt u de waarde Marges in de sectie Modules.
- U kunt door de apparaatweergaven schakelen om de instellingen per apparaat te controleren. Klik op het bureaubladpictogram in elke rij om over te schakelen naar de tablet- en mobiele weergave, zoals weergegeven in de volgende schermafbeelding.
Het is goed om te controleren, omdat een marge-instelling die u op het bureaublad toepast, automatisch van toepassing is op alle drie apparaatgroottes, maar een padding-instelling die u op het bureaublad toepast, alleen op grote apparaten. - Klik op Opslaan om uw instellingen op te slaan en het gebied Tools te verlaten. U kunt Page Builder op elke willekeurige manier afsluiten.
Werken met kolomlagen, modulelagen en onderliggende kolommen (child kolommen)
In elke rij kunt u meerdere verticale lagen bovenliggende kolommen, onderliggende kolommen en modules hebben. Op de site van Beaver Builder staat dit goed uitgelegd:
kb.wpbeaverbuilder.com/article/46-column-layouts-overview#layers
De onderstaande video legt dit ook goed uit:
Handleidingen over kolommen
- Kolombreedte wijzigen of resetten
- Afgeronde hoeken op kolommen en foto’s
- Voorkom stapelen van kolommen met aangepaste breedten
- Stapelvolgorde omgekeerde kolom (handig voor responsive en mobiele weergave)
- Kolommen invoegen
- Bewerken van een kolom
- Verplaatsen van een kolom
- Verwijder een module of kolom
- Een kolom dupliceren
- Een aangepaste kolombreedte blijft veranderen
- Kolommen in kolommen uitschakelen
Tips voor werken met kolommen
1 Sleep in de lay-out voordat u inhoud invoegt
U kunt een nieuwe hoofdkolom maken door een module naar rechts of links van een bestaande kolom te slepen. Maar wanneer u nieuwe lagen in een verticale kolom maakt, maakt slepen in een module niet altijd zijn eigen kolom. De veiligste manier om onderliggende kolommen in te voegen, is door Inhoud toevoegen > Rijlay-outs (Add content > Row layouts) te gebruiken. Bovendien kan het bij complexe kolomlay-outs nuttig zijn om eerst de rijlay-out te bouwen en vervolgens de inhoud en modules toe te voegen. Hier is bijvoorbeeld een lay-out voor drie hoofdkolommen (twee bovenaan, één onderaan) waarin de eerste kolom (aan de linkerkant) een laag met vier onderliggende kolommen bevat en de tweede kolom (aan de rechterkant) een laag met twee onderliggende bevat kolommen.
Nadat u de structuur hebt ingesteld, kunt u eenvoudig inhoudsmodules slepen, zoals in het volgende voorbeeld.
Merk op dat de eerste onderliggende kolom in de tweede laag aan de rechterkant twee modules heeft, de tekst en de kleine foto. Als u die kolom verplaatst, zullen de twee modules altijd samen bewegen.
U kunt nog steeds een eenvoudige kolomstructuur maken door modules rechtstreeks naar een rij te slepen en u kunt kolommen verplaatsen om een nieuwe structuur te maken. Zie de gerelateerde artikelen voor meer informatie over het invoegen van kolommen.
2 Kolomstructuur uitzoeken voor bestaande kolommen
Klik op het pictogram Kolom bewerken voor een module en ga vervolgens met de muis over Kolom verplaatsen – u ziet het bereik van de kolom waarin de module zich bevindt, zoals weergegeven in deze screenshot.
In sommige gevallen met een laag kolommen, vindt u een module die zich niet in een eigen kolom bevindt die u afzonderlijk wilt stijlen. Volg in dit geval Tip 1 om een rijlay-out van een enkele kolom te slepen en verplaats die module erin. U kunt tegen het niveau van kolomnesting aanlopen, maar u kunt een andere manier vinden om de kolomlagen te organiseren zodat u de module in een eigen kolom kunt krijgen.
3 Het verwijderen van modules is veiliger dan het verwijderen van kolommen
Wanneer u met de muis over de kolom Verwijderen beweegt, ziet u het bereik van wat u gaat verwijderen. Maar omdat er geen ongedaan maken is, is het nog veiliger om eerst modules te verwijderen en vervolgens de kolomstructuur te verwijderen. Zie de gerelateerde artikelen voor informatie over het verwijderen van kolommen.
Leer alles over goed WordPressen webdesign bij een designtraining
Cursus WordPress op maat beginners & gevorderden
POPULAIR Wordpress cursus of training op maat voor gevorderden of voor beginners. Haal zo veel mogelijk uit je WordPress website. Leer je website maken op elk niveau.
WordPress Pop-up Bootcamp spoedcursus op maat
Organiseer zelf je WordPress Bootcamp training. Werk in deze spoedcursus in 3 dagen in een klein groepje aan meerdere WordPress sites. Overal in Nederland en België.
WordPress Bootcamp all-in one spoedcursus
All-in-one Wordpress training. Basis, design en SEO. In 3 dagen (Amsterdam, Den Haag en Antwerpen) of 5 ochtenden online maak je je site met deze spoedcursus.
Meer handleidingen over beaver builder page builder
- Pagina kopieren WordPress Bakery Beaver Elementor builder
- Beeldvullende pagina maken foto volledige breedte scherm
- Class CSS stijlen maken WP Beaver page builder gevorderden
- CSS aanpassen Beaver builder basis voor beginners
- Livemesh Addons Beaver WordPress page builder plugin
- Ultimate Beaver builder add-on plugin voor extra modules
- WP Beaver Builder training pagina’s bouwen met WP plugin