Standaard heeft wordpress beperkte mogelijkheden om een pagina op te bouwen. Met een "page builder" wordt dit een stuk makkelijker. De Avada Builder van het thema Avada is een hele krachtige en gebruiksvriendelijke pagina opbouw mogelijkheid binnen WordPress. Je kunt d.m.v. containers (rijen) indeling makkelijk bepalen waar wat komt te staan. Een container is ingedeeld in kolommen. In een kolom werk je met elementen. Een element kan een afbeelding zijn, tekst, slider, icoon, extra ruimte etc.

Afhankelijk van jou bevoegdheden kun je onderdelen aanpassen.

1. Opbouw pagina uitleg

Een pagina wordt opgebouwd in het thema Avada via een vast stramien. Dit stramien ziet er in hierarchische volgorde als volgt uit.

  1. Pagina; de hele pagina.
  2. Container; is een onderdeel in een pagina. Het is een rij van links naar rechts van de pagina. In een container staan kolommen.
  3. Kolom, is weer een onderdeel van een container. Je hebt een kolom met volledige 100% breedte of twee keer een helft of drie keer één derde etc. Even breuken weer omhoog halen. Je hoeft de hele container niet te vullen tot 100% maar dit is wel logisch in de opbouw.
  4. Element; is een onderdeel in een kolom waar je de uiteindelijke inhoud mee laat zien. Afhankelijk van je pakket zal je hier meer of minder keuze hebben. Er zijn veel soorten elementen. Een paar hele belangrijke en veel gebruikte zijn:
    1. Titel
    2. Tekstblok
    3. Afbeelding
    4. Lijst
    5. Knop
    6. Video
    7. Tabel
    8. etc

2. Avada Builder aanzetten

Ga naar de plek, dit kan een pagina, bericht, portfolio etc zijn, en wees er zeker van dat je de Fusion Builder gebruikt. Je kan dit zien door dat je bovenin de pagina "Avada Builder" ziet staan. Zie je dit niet dan moet je de volgende stappen nemen.

  1. In de pagina waar je wilt werken met de "Avada Builder" kijk je onder de titel. Daar staat een grote knop die heet "Use Avada Builder"(gebruik Avada Builder". Klik hierop en je ziet dat je scherm veranderd.
  2. De knop is veranderd naar "Default editor" en je ziet nu een scherm met "Avada Builder" bovenaan.
  3. Klik op "Container" om een eerste container toe te voegen. Je krijgt een keuze van indeling van de container.
  4. Klik op "Pre build page" om een reeds eerder bewaarde pagina te laden.
  5. Lees welke iconen voor welke functie staan.

2.1 Eerst een container kiezen

Om te beginnen kies je een container. Ik ga er nu van uit dat je nog geen andere "Pre built pagina’s" eerder hebt opgelsagen.

  • je hebt op "+ container" geklikt.
  • Kies een layout waar je mee wilt beginnen.

2.2 Layout container

Je keuze in het vorige hoofdstuk zal het volgende resultaat tonen.

2.3 Inhoud toevoegen

Vervolgens klik je op "+ element" om inhoud in je container toe te voegen. Het volgende scherm wordt getoond. Zoek bovenin rechtsnaar het gewilde element en klik het aan. In het voorbeeld klikken we "Afbeelding" aan.

2.4 Details van je inhoud

Nu ga je de details invullen. Loop alle opties na. Meestal gebruik je er maar een paar. Kies in ieder geval een afbeelding voor deze test. En natuurlijk "Opslaan".

2.5 Tekst toevoegen

Ik heb nog een element Tekstblok toegevoegd.

2.6 Resultaat

Dit resulteert in de volgende pagina

3. Interface Avada Builder

In dit hoofdstuk leg ik uit hoe de verschillende onderdelen werken. Ik ga hier bij uit dat ik reeds een pagina opbouw voor je heb gemaakt. Je wilt een stukje in jouw website aanpassen. Hierbij denk ik aan simpele dingen zoals tekst aanpassen en een afbeelding veranderen. Houd wel rekening wanneer je een afbeelding veranderd dat de verhouding moeten kloppen.

Je moet natuurlijk eerst ingelogd zijn om iets aan je website aan te kunnen passen. Ga naar de pagina die je wilt bewerken.

Welke onderdelen zijn belangrijk voor de Avada Builder?

  1. De title moet zichtbaar zijn zodat je weet dat je in Avada Builder zit.
  2. Zorg ervoor dat je in de bouwer (Builder) zit.
  3. Titel van de container.
  4. Bewerk opties van de container.
  5. Bewerk optie van de kolom.
  6. Bewerk opties van de elementen.
  7. Nieuw element toevoegen.

4. Container

Een container is een onderdeel in een pagina. Het is een rij van links naar rechts van de pagina. In een container staan kolommen.

4.1 Container opties

  1. Titel van de container
  2. Bewerk opties van deze container
  3. Dupliceer container
  4. Bewaar container
  5. Verwijder container
  6. Klap container venster dicht

4.2 Container opties bewerken

  1. In de algemene instellingen van een Rij heb je de instel mogelijkheden van wanneer je de Rij wilt laten zien. Op welk apparaat en wanneer?
  2. Op welk apparaat, desktop, tablet of smartphone wil je dat deze container getoond wordt?
  3. Wanneer wil je dat deze container getoond wordt?
    1. Gepubliceerd; nu gelijk.
    2. Gepubliceerd tot; De container blijft zichtbaar tot de gekozen datum.
    3. Gepubliceerd na; de container wordt zichtbaar na de gekozen datum.
    4. Concept; de container is opgeslagen als concept

4.3 Container achtergrond instellen

  1. Wil je de instellingen van een container aanpassen dan klik je op het pennetje in de blauwe balk.
  2. In het volgende venster kies je bovenin "BG(Background)"
  3. Kies "Kleur" en je kan de kleur veranderen.
  4. Kies "Gradient" en je kan de achtergrond in een gradient kleur veranderen.
  5. Kies "Afbeelding" en je kan de afbeelding veranderen.
  6. Kies "Video" en je kan de achtergrond in een video veranderen.

5. Kollomen

Een kolom is een onderdeel van een container. Je hebt een kolom met volledige 100% breedte of twee keer een helft of drie keer één derde etc. Even breuken weer omhoog halen. Je hoeft de hele container niet te vullen tot 100% maar dit is wel logisch in de opbouw.

5.1 Kollom opties

  1. Kollom breedte
  2. Kollom bewerk opties
  3. Dupliceer kollom
  4. Bewaar kollom
  5. Verwijder kollom

5.2 Kolom opties bewerken

6. Elementen

Een element is een onderdeel in een kolom waar je de uiteindelijke inhoud mee laat zien. Afhankelijk van je pakket zal je hier meer of minder keuze hebben. Er zijn veel soorten elementen.

6.1 Element opties

Bij elementen geldt dat waneer je er overheen hovered (met je muis er overheen gaat) dat je dan de opties te zien krijgt. De volgende opties zijn:

  1. Element bewerk opties
  2. Element dupliceren
  3. Element opslaan
  4. Element verwijderen

6.2 Element opties bewerken

7. Element soorten

Ik bespreek hier de elementen die het meest voorkomen.

7.1 Tekstblok

Klik op het potlood teken in het element om de bewerk opties te zien. Je komt in de tekstbewerker. Deze is bijna gelijk aan de basis bewerker van WordPress. Deze is besproken in dit artikel.

7.2 Afbeelding

Klik op het potlood teken in het element om de bewerk opties te zien.

  1. Om te afbeelding te verwijderen kies je "verwijder" (Remove)
  2. Om de afbeelding te bewerken kies je "Bewerk" (Edit)

7.3 Witruimte

Soms wil je wat extra ruimte creeëren tussen onderdelen. In sommige elementen kun je dat doen met marges(margins). Maar in een afbeelding element heb je dat niet. Daar gebruik je dan het element "witruimte" (separator) voor. Je kan deze in verschillende varianten gebruiken.

  • Geen stijl
  • Enkele lijn
  • Dubbele lijn
  • Schaduw (geen varianten)

En dan heb je deze in de varianten:

  • Hele lijn
  • Streepjes
  • Stippen

Er zijn twee tabjes te gebruiken als je het element hebt gekozen.

  • Algemeen (General)
    • Stijl (Style); hiermee geef je aan welke lijn je wilt gebruiken.
  • Ontwerp (Design)
    • Witruimte kleur (separator color); de kleur van de witruimte
    • Marges (Margins) geeft de extra witruimte boven of onder aan.
    • Lijn dikte (Border size); geef de dikte van de lijn aan als je die wilt gebruiken.

 

7.4 Woo product carousel

Speciaal voor Woocommerce zitten er ook elementen in de Avada builder. De Woo product carousel is er één van. Hiermee kun je producten uit bepaalde categoriën tonen. De basis zal ik goed hebben ingesteld voor je. Maar ik kan me voorstellen dat je af en toe een andere categorie wilt kiezen zodat het wat dynamischer lijkt.

Om een andere categorie te kiezen kun je heel eenvoudig de naam veranderen:

  1. Klik bij categorieën op de prullenbak om de huidige categorie te verwijderen.
  2. Wanneer je dan in het veld klikt krijg je de verschillende categorieën met het product aantal er achter waar je uit kan kiezen te zien.
  3. Maak een keuze en klik hier op.
  4. Je keuze staat in veld.

7.5 Woo shortcodes

Met dit element kun je verschillende dingen doen. Je moet wel wat vertrouwd met code zijn. Ga niet dingen zitten doen waarvan je niet zeker weet wat het doet.

Je kan verschillende soorten Woocommerce functionaliteiten toevoegen. Dit element genereert een stukje begrijpbare code waar je een aantal parameters kan veranderen.

Dit element kan o.a. de volgende onderdelen tonen:

  • recente producten
  • product categorie
  • aanbevolen producten
  • en meer

8. Desktop, mobiel of tablet

In Avada heb je mogelijkheden om onderdelen van je site anders te laten zien op smartphone, Tablet of desktop. Soms is het nodig om gebruiksvriendelijkheid goed te houden. In deze uitleg laat ik dit zien. Alleen als je de Fusion Builder gebruikt kan je beinvloeden op welk apparaat je wat laat zien. Je kan dat aanzetten zoals hierboven beschreven in hoofdstuk "Aanzetten".

Je wilt een onderdeel laten zien op een specifieke manier op mobiel en niet op een desktop. Dit kan door de volgende stappen te volgen:

  1. In de blauwe balk klik je op het potloodje.
  2. Onder "General" zie je "weergave andere schermen" met drievlakjes die nu blauw zijn.
  3. Klik op een vakje om deze container niet te tonen op dit apparaat.
  4. Bewaar dit door op "Opslaan" te klikken.
  5. En nu de hele pagina bewaren door op "Bijwerken" te klikken.

8.1 Een hele container

Je wilt een onderdeel laten zien op een specifieke manier op mobiel en niet op een desktop. Dit kan door de volgende stappen te volgen:

  1. In de blauwe balk klik je op het potloodje.
  2. Onder "General" zie je "weergave andere schermen" met drievlakjes die nu blauw zijn.
  3. Klik op een vakje om deze container niet te tonen op dit apparaat.
  4. Bewaar dit door op "Opslaan" te klikken.
  5. En nu de hele pagina bewaren door op "Bijwerken" te klikken.

8.2 Een kolom

8.3 Een element

Sommige elementen kun je ook blokkeren voor specifieke apparaten.

  1. Klik op potloodje van een specifiek element.
  2. Klik op een vakje om dit element niet te tonen op dit apparaat.
  3. Bewaar dit door op "Opslaan" te klikken.
  4. En nu de hele pagina bewaren door op "Bijwerken" te klikken.

9. Een ankerlink

Een ankerlink(anchor link) is een link naar een specifieke plek in je pagina. Het is niet zoals bij een gewone link dat je naar een pagina verwijst. Je verwijst wel naar een pagina maar een specifieke plek in die pagina. Een ankerlink zorgt er dan ook voor dat je meteen naar de specifieke plek scrollt.

Je moet met de volgende onderdelen rekening houden:

  1. Een container; hier geef je de naam van verankering link.
  2. Een element met een link naar de ankerlink.

9.1 Binnen de pagina

Je wilt een link van een bepaalde plek binnen een pagina naar een andere plek op de pagina maken

  1. Klik op het pen icoon van de blauwe balk van de container.
  2. Kies de naam van verankering link. Dit is de plek waarnaar je naartoe linkt.
  3. Gebruik een element of een link binnen je tekst die linkt naar de verankering link. Bijvoorbeeld het element "knop" of een link tekst

9.2 Buiten de pagina

Inhoudsopgave