Beaver Builder: achtergrond zijbalk op volledige hoogte/breedte

Een voorbeeld van een zijbalk met een gekleurde achtergrond op volledige hoogte/breedte. Gebouwd in Beaver Builder.

Heb je ooit geprobeerd een zijbalk te maken met een aparte achtergrondkleur en die kleur vervolgens te laten lopen over de volledige breedte en hoogte van de zijbalk? En met volledige breedte bedoel ik dat de achtergrond doorloopt tot aan de rand van het browservenster. Laat me je tonen hoe gemakkelijk dit te bouwen is met Beaver Builder.

Het idee achter deze werkwijze kan gebruikt worden in elke HTML-layout daar het eigenlijk niet meer is dan de juiste HTML-structuur toe te voegen en enkele regels CSS.

Beaver Builder - toevoegen van een 2-kolommen module
Beaver Builder – toevoegen van een 2-kolommen module

We starten in Beaver Builder met het maken van een rij met 2 kolommen. Sleep de ‘2 kolommen’ rij layout module naar je pagina.

Beaver Builder instellingen om de breedte van een rij aan te passen
Beaver Builder instellingen om de breedte van een rij aan te passen

De methode die ik hier uit de doeken doe werkt enkel als de Beaver Builder rij gezet is op volledige breedte. Ga dus naar de instellingen van de rij door te klikken op de steeksleutel. De steeksleutel komt tevoorschijn als je met je muis beweegt over de rij. In die instellingen zet je de breedte van de rij op ‘volledige breedte’. Let op, we veranderen niets aan de breedte van de inhoud daar we willen dat de inhoud nog steeds binnen de marges valt van de website.

Hoe verander je de breedte van een kolom in Beaver Builder.
Hoe verander je de breedte van een kolom in Beaver Builder.

Verander vervolgens een kolom visueel in een zijbalk door de breedtes van beide kolommen aan te pasen. We zetten de breedte van de linkerkolom op 67%. De andere kolom zal dan automatisch de resterende 33% van de breedte innemen. Uiteraard kan je andere percentages hanteren als je bijvoorbeeld wilt dat je zijbalk minder breed is.

Een pagina gebouwd met Beaver Builder met wat dummy-inhoud
Een pagina gebouwd met Beaver Builder met wat dummy-inhoud

Om onze werkwijze wat visueler te maken voegen we wat modules toe aan beide kolommen. In dit geval hebben we enkele HTML-blokken en een knop naar de kolommen gesleept. Verder hebben we Lorem Ipsum tekst toegevoegd aan de HTML-modules. Een snelle opzoeking op Google geeft verschillende mogelijkheden om snel Lorem Ipsum tekst te genereren. Dit is zo een handige generator bijvoorbeeld.

Nu gaan we twee CSS class selectors toevoegen:

Hoe geraak je in de kolominstellingen van Beaver Builder om je CSS class selectors toe te voegen aan het kolomelement
Hoe geraak je in de kolominstellingen van Beaver Builder om je CSS class selectors toe te voegen aan het kolomelement

Het maakt niets uit welke naamgeving je hanteert voor die class selectors. Bij de rij voegen we ‘wbm-row-sidebar-full-width-background’ toe als een class selector. Vervolgens voegen we ‘wbm-col-sidebar-full-width-background’ toe als een CSS class selector aan de kolom die de zijbalk voorstelt.

Nu is het tijd om onze CSS te schrijven. Persoonlijk prefereer ik een extern CSS-bestand. Als je niet weet hoe dat werkt maakt Beaver Builder je het gemakkelijk door een eenvoudige plek te bieden om je eigen CSS toe te voegen.

Beaver Builder: plekken om je eigen CSS toe te voegen
Beaver Builder: plekken om je eigen CSS toe te voegen

Aan de bovenkant van het scherm klik je op de ‘tools’ knop. Nu heb je twee opties om je eigen CSS toe te voegen in Beaver Builder: paginaspecifieke CSS of globale CSS. Als je wilt dat de CSS enkel geldt voor de huidige pagina dan kies je voor paginaspecifieke CSS (Layout CSS / Javascript in het popupvenster). Wil je hetzelfde truukje met de zijbalk op meerdere pagina’s toepassen, kies dan voor de globale CSS (via de algemene instellingen). Welke weg je ook kiest, je eindigt uiteindelijk met een veld waar je je CSS in kan typen.

Voeg volgende regels CSS toe en klik op bewaren:

.wbm-row-sidebar-full-width-background .fl-row-content-wrap {
    position: relative;
    overflow: hidden;
}
.wbm-col-sidebar-full-width-background .fl-col-content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 1500px;
    height: 100%;
    background: #eeeeee;
    visibility: visible;
    z-index: -99;
}

We voegen de achtergrond toe aan onze zijbalk-kolom door gebruik te maken van het ‘before’ pseudo-element. Dit pseudo-element geven we een hoogte van 100% en een breedte die breed genoeg is om de meest brede computerschermen te bedekken. Geen schrik, je zal de volledige breedte van het element nooit zien. We zien enkel het gedeelte dat uitstrekt tot aan de rand van het browservenster. Om dit te bereiken geven we het parent-element een ‘position: relative’ en een ‘overflow: hidden’.

[socialpug_tweet tweet=”Maak een zijbalk in Beaver Builder met een achtergrondkleur over de gehele breedte/hoogte van de zijbalk. @BeaverBuilder #WordPress”]

Tot slot gaan we ervoor zorgen dat onze zijbalk altijd goed wordt weergegeven ongeacht de breedte van het scherm. Met andere woorden, we gaan onze oplossing ook responsive maken. Met een eenvoudige mediaquery bereiken we dit resultaat.

@media screen and (max-width: 768px) {
    .wbm-col-sidebar-full-width-background .fl-col-content:before {
        display: none;
    }
    .wbm-col-sidebar-full-width-background {
        background: #eeeeee;
    }
}

Op een klein scherm springt de zijbalk onder het blok met de hoofdinhoud van de pagina. De achtergrond wordt op dat moment een beetje vreemd gerenderd. Met deze mediaquery zetten we ons pseudo-element onzichtbaar met ‘display: none’. Vervolgens voegen we onze achtergrondkleur rechtstreeks toe aan de zijbalk-kolom.

Beaver Builder instellingen om de responsieve breekpunten aan te passen
Beaver Builder instellingen om de responsieve breekpunten aan te passen

Hoe weet ik dat ik 768px moet gebruiken als responsief breekpunt? In Beaver Builder zijn er steeds twee breekpunten: medium en small. Je kan de waarde van ieder breekpunt aanpassen in de algemene instellingen. Klik bovenaan op de ‘Tools’-knop en kies voor de algemene instellingen. Als je dan naar beneden scrolt zie je settings waar je in pixels de breedte voor beide breekpunten kan aanpasen. Je kan de standaardwaarden gebruiken (1024px voor medium en 768px voor small) of je eigen waarden opgeven.

Kolominstellingen in Beaver Builder om een standaardbreedte op te geven bij het mobiele breekpunt
Kolominstellingen in Beaver Builder om een standaardbreedte op te geven bij het mobiele breekpunt

Nog een laatste opmerking. Standaard zorgt Beaver Builder dat elke kolom niet de volledige breedte beslaat wanneer je voorbij het ‘small’-breekpunt gaat. Je kan dit gedrag eenvoudig aanpassen door naar de kolominstellingen te gaan en te klikken op de tab ‘geavanceerd’. Daar kan je de ‘Klein schermbreedte’ aanpassen naar 100%.

Tot slot, hier is nog een keer de volledige CSS om alles aan de praat te krijgen:

.wbm-row-sidebar-full-width-background .fl-row-content-wrap {
    position: relative;
    overflow: hidden;
}
.wbm-col-sidebar-full-width-background .fl-col-content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 1500px;
    height: 100%;
    background: #eeeeee;
    visibility: visible;
    z-index: -99;
}
@media screen and (max-width: 768px) {
    .wbm-col-sidebar-full-width-background .fl-col-content:before {
        display: none;
    }
    .wbm-col-sidebar-full-width-background {
        background: #eeeeee;
    }
}
    Geef een reactie

    Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

    Onze klanten aan het woord

    4.7
    Gebaseerd op 19 reviews
    Christophe Bollaers
    november 3, 2023

    Zeer tevreden over webmatic. Leuke samenwerking met Koen. Hij denkt mee en zit vol leuke ideeën. Een aanrader voor iedereen.

    Jan Vandaele
    oktober 5, 2023

    Prima uitwerking, oplossingsgericht en steeds bereikbaar. Zeer angename ervaring.

    luc Buntinx
    juni 28, 2023

    The collaboration with Koen runs very smooth and in a professional manner. He knows his trade and can (within de borders of the system) make the requested changes.

    Creëer een online avontuur met jou als winnaar!

    Klaar voor je online avontuur?

    © 2024 Webmatic - Alle rechten voorbehouden
    gebouwd door Webmatic