Asfalt.be Dé online infobron over asfaltwerken en de bijhorende prijzen.
Vergelijk meer dan 75+ erkende bestratingswerkers online!
header image
Asfalt.be
Andere varianten

Snelmenu

Kies voor een H1 als hoofdtitel van je artikel

De header van je artikel start steeds met een H1 header. Je mag deze maar 1x gebruiken in het artikel. Deze bevat de meest interessante woorden die gerelateerd zijn aan je artikel. Een H1 heading mag nooit langer zijn dan 1 regel.

Snel menu layout voorbeelden: Buldit 1: Asfalt.beBuldit 2: Printbeton.nlBuldit 3: crepi.be

Alle buldit theme varianten hebben dezelfde stijlelementen. Onderstaande code kan dus voor allen gekopieerd worden. Styling gaat natuurlijk net iets anders zijn.

Met je H2 kies je de subheaders

Subheaders zijn een belangrijk onderdeel van je tekstopmaak en helpt mensen om sneller te vinden wat ze zoeken. Subheaders zijn een belangrijk onderdeel van je tekstopmaak en helpt mensen om sneller te vinden wat ze zoeken. Subheaders zijn een belangrijk onderdeel van je tekstopmaak en helpt mensen om sneller te vinden wat ze zoeken. Aan de hand van vette markering kan je bepaalde woorden in grote stukken tekst er laten uitspringen. Meestal doen we dit voor gemiddelde prijzen toe te lichten.

Dan zijn er ook nog de H3’s

H3’s en optioneel H4’s zijn de diepste subheaders die we gebruiken voor onze websites.

Ten slotte heb je ook nog de H4

De H4 subheader wordt zelden gebruikt. Enkel bij uitgebreide artikels kan het wel eens handig zijn om deze te gebruiken. Subheaders kleiner dan H4 worden niet gebruikt bij Buldit.


Standaard bullets

Wil je iets duidelijk maken dan kan dit aan de hand van Bullets:

Vinkjes

Bij de Buldit 1 theme zijn de vinkjes steeds in het geel. Buldit 2 en 3 afhankelijk van het kleurenpallet van de website.
class: list:fas_fa-check

<ul class="list:fas_fa-check">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Opeenvolgende vinkjes

Je kan ook gebruikmaken van opeenvolgende vinkjes. Doorgaans gebruiken we deze niet in de tekst maar wel bij de intro van de offerteformulieren.
class: list:inline

<ul class="list:fas_fa-check list:inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Lijsten met andere Font awesome icoontjes

Lijsten zoals hierboven met vinkjes werken ook met alle andere Font Awesome icoontjes, bvb:
fas fa-plus -> list:fas_fa-plus

<ul class="list:fas_fa-plus">
<li>Item 1</li>
</ul>

<ul class="list:fas_fa-minus">
<li>Item 1</li>
</ul>

Gemengde lijsten

Bij gemengde lijsten moeten de icons manueel in elk list item gestoken worden.

class: list:fa
icon vb: <i class="fas fa-plus"></i>

<ul class="list:fa">
<li><i class="fas fa-plus"></i>Item 1</li>
<li><i class="fas fa-minus"></i>Item 2</li>
<li><i class="fas fa-check"></i>Item 3</li>
</ul>

Gemengde lijsten met andere kleuren

Bij gemengde lijsten moeten de icons manueel in elk list item gestoken worden.

class vb: icon-green

<ul class="list:fa">
<li class="icon-green"><i class="fas fa-plus"></i>Item 1</li>
<li class="icon-red"><i class="fas fa-minus"></i>Item 2</li>
<li class="icon-yellow"><i class="fas fa-check"></i>Item 3</li>
</ul>

Lijsten met alle Font awesome icoontjes in andere kleuren

class voorbeeld: list:fa-primary

<ul class="list:fas_fa-check list:fa-primary">
<li>Item 1</li>
</ul>

<ul class="list:fas_fa-plus list:fa-green">
<li>Item 1</li>
</ul>

<ul class="list:fas_fa-minus list:fa-red">
<li>Item 1</li>
</ul>

Afstand tussen lijst-items

Werkt in combinatie met alle bovenstaande of solo
class: list:spacing

<ul class="list:spacing-none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

<ul class="list:spacing-sm">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Checklist

class: list:rounded

Werken met een checklist (deze h3 titel ≠ verplicht)

  1. Ook bij de opsomming kan je werken met een titel indien gewenst
    Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.
  2. Vergelijk & Bespaar. Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.. Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.
  3. Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.
  4. Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.
<div class="list:rounded">
<h3>Optionele titel</h3>
<ol>
<li><strong>Optionele bold tekst</strong>
Tekst
</li>
<li>Tekst</li>
<li>Tekst</li>
<li>Tekst</li>
</ol>
</div>

Relative date

Toont een datum relatief tegenover vandaag.
Hoe je een datum kiest, lijkt vrij hard op gewoon Engels
Hoe je een datum formatteert, vervangt de symbooltjes door de betekenis. Alle andere tekst wordt gewoon zo getoont.

Er zijn ook presets voor veel voorkomende of complexere structuren (als je 1 wilt toevoegen let me know):

Voorbeelden:
28 Apr 2022
29 Jun 2022
08/07/2022
28-06-2022
2022
2022
2022
06-06-2022
20-06-2022

[relative-date date="2 months ago" format="d M Y"]
[relative-date date="tomorrow" format="d M Y"]
[relative-date date="10 days" format="d/m/Y"]
[relative-date date="today" format="d-m-Y"]
[relative-date format="Y"]
[relative-date preset="year-transition"]
[relative-date preset="year-transition-single"]
[relative-date preset="monthly-update" format="d-m-Y"]
[relative-date preset="weekly-update" format="d-m-Y"]

Blockquotes

De standaard blockquote ziet er zo uit:

Wil je genieten van het verlaagde BTW-tarief, dan moet je dus een beroep doen op een erkende aannemer. Gratis en vrijblijvend prijsvoorstellen op maat aanvragen voor isolatiewerken kan via onze offertepagina. Klik hier om offertes op maat te ontvangen.

<blockquote>
Tekst
</blockquote>

Blockquotes met font awesome iconen

Wil je jouw blockquote meer pit geven, dan kan je gebruikmaken van Font Awesome iconen.
class: blockquote-fa
Onderstaand vind je de meest toepasselijke voor Buldit:

Optionele titel

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="lightbulb" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="calculator" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="euro-sign" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="hand-point-right" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="info" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="thumbs-up" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="thumbs-down" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="angle-double-right" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="quote-right" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="exclamation" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="smile" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.

<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="user" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>

Blockquotes als Call To Action

class: blockquote-cta

Vraag vrijblijvend een offerte aan en vergelijk!
<blockquote class="blockquote-fa blockquote-cta">
<div class="blockquote-icon">
[icon name="calculator" prefix="far"]
</div>
<div class="blockquote-content">
Aandacht trekkende titel
</div>
<div class="blockquote-btn">
<a class="btn btn-primary" href="#">button</a>
</div>
</blockquote>

Buttons

classes: btn btn-primary

Button
<a class="btn btn-primary" href="#">Button</a>

Button
<a class="btn btn-accent" href="#">Button</a>

Button
<a class="btn btn-accent-2" href="#">Button</a>

Button
<a class="btn btn-accent-3" href="#">Button</a>

Kleine buttons

class: btn--small

Button
<a class="btn btn-primary btn--small" href="#">Button</a>

Button
<a class="btn btn-accent btn--small" href="#">Button</a>

Button
<a class="btn btn-accent-2 btn--small" href="#">Button</a>

Button
<a class="btn btn-accent-3 btn--small" href="#">Button</a>

Button
<a class="btn--light" href="#">Button</a>

Popup button code

Widget aan maken in de popup area met naam altijd in lowercase en underscores ipv spaties.
Dan op de button data-popup="widget_naam" zetten. Dit kan ook op andere elementen.
Interessante stuk: data-popup="widget_naam"

Open popup <a class="btn btn-primary" data-popup="widget_naam">
Popup button tekst
</a>

Accordion menu

class wrapper: accordion__container
class title: accordion__title
class content: accordion__content

<ul class="accordion__container">
<li>
<div class="accordion__title">
<i class="fas fa-plus-square accordion__open-icon"></i>
<i class="fas fa-minus-square accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
<li>
<div class="accordion__title">
<i class="fas fa-plus-square accordion__open-icon"></i>
<i class="fas fa-minus-square accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
<li>
<div class="accordion__title">
<i class="fas fa-plus-square accordion__open-icon"></i>
<i class="fas fa-minus-square accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
</ul>

Accordion menu met grijze achtergrond

class: accordion__container--background

<ul class="accordion__container accordion__container--background">
<li>
<div class="accordion__title">
<i class="fas fa-plus-square accordion__open-icon"></i>
<i class="fas fa-minus-square accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
<li>
<div class="accordion__title">
<i class="fas fa-plus-square accordion__open-icon"></i>
<i class="fas fa-minus-square accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
<li>
<div class="accordion__title">
<i class="fas fa-plus-square accordion__open-icon"></i>
<i class="fas fa-minus-square accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
</ul>