WordPress: Avada thema voor beginners

Om te bepalen hoe je WordPress site eruit ziet kies je een Thema (Theme). Je bent daar helemaal vrij in, kunt op Internet kiezen uit een grote hoeveelheid Thema’s voor WordPress.  Desgewenst kan Hoasted Avada al voor je installeren. Avada is een betaald thema dat zeer eenvoudig aan te passen is in alle aspecten, zonder dat je met ingewikkelde code’s hoeft te werken. Avada is bovendien snel te laden en kan jaren meegaan. 

Updaten van Avada

Wil je gemakkelijk de updates kunnen installeren met vaak nieuwe features en de beveiligingsupgrades, koop dan een  Avada licentie. Je krijgt dan een registratie-code die je kunt plakken in het registratie-tabblad van Avada in je Dashboard. 

Stappen:

  1. Maak een Backup van je site, zie Installatron - Backup van website maken en terugplaatsen. Mocht er iets misgaan, dan kun je snel een backup terugplaatsen,
  2. Je krijgt dan in je Dashboard de standaard links met wat je kunt upgraden en daar zal dan Avada theme bij staan als er een update is. Druk op de knop en die wordt geupgrade. 
  3. Klik na upgraden in de Avada submenus op Plugins en kijk of er plugins bij zijn die ook een update hebben.
  4. Klik in Avada submenu Fusion Patcher en installeer de patches die nog gedaan moeten worden

Handmatig updaten Avada.

Themeforest raadt zelf het automatisch updaten af en beveelt aan van te voren een backup te maken van site en database. Handmatig updaten kan met FTP of via WordPress zelf. In het laatste geval werkt het alleen goed als er een child theme gebruikt wordt, anders gaan de instellingen verloren in het update proces (het theme moet namelijk verwijderd worden alvorens de nieuwe versie avada.zip geupload kan worden).

Met FTP raadt Themeforest aan de map met de oude versie te verwijderen of verplaatsen en dan de nieuwe versie te uploaden.

Updates door Hoasted laten uitvoeren

Uiteraard kun je ook je hosting-abonnement aanvullen met een  WordPress onderhoudsabonnement. Hoasted zorgt dan voor de updates van je site en zo blijft je website veilig en up-to-date.

Werken met Avada

Om te beginnen log je in op je website via de wp-admin pagina en klik je links Avada en dan op Demos en bekijk de themes via de Preview knop en bepaal je keuze door die te installeren. (klik in Avada Demos bij het Demo op Install).

Standaard komt elke Avada met ruim 100 demopagina’s waar we al een aantal van hebben verwijderd om jouw pagina overzicht wat overzichtelijker te houden. Klik links maar eens op pagina’s en bekijk ze maar (je kunt via de voorbeeld-knop zien hoe de bezoeker de pagina in beeld krijgt).

In je Dashboard heb je links de menukeuze Avada. Klik je daarop, dan verschijnen in de linkerkolom een aantal submenu’s. Om het thema vorm te geven kies je Theme Options.

Je krijgt dan een lange lijst in beeld van Thema instellingen die je kunt aanpassen:

Hier heb je alle mogelijkheden om je website er precies zo uit te laten zien als je zelf graag wilt. Niet alleen het lettertype (Typography), de menu’s, maar ook je logo, de header, de footer, de kleuren, de tekst en links, je contactformulier, je footer, enz. Wel als je iets aangepast hebt even op Save klikken. Experimenteer volop tot je tevreden bent!

In Avada > Theme Options klik je links op header en bepaal je welk type header je wilt voor je website.
Meer informatie hierover lees je op: https://theme-fusion.com/avada-doc/header/, zoals hoe je je logo kunt plaatsen, menu-knoppen of ikoontjes toevoegen en vele andere zaken.

Als je je Demo gekozen hebt, wil je je Nederlandse menu, verwijzend naar jouw pagina’s. Als je WordPress met Avada hebt laten installeren door Hoasted, zie je het het volgende menu dat we gemaakt hebben bovenin:

Waarschijnlijk zul je enkele onderdelen niet willen en andere willen toevoegen. Ga daarvoor in het Dashboard naar Weergave > Menu’s. Klik op het pijltje rechts boven een menu item dat je wilt verwijderen en dan onderin op Remove, tot alleen die onderdelen over zijn die je wel wilt.

Ga dan in je Dashboard links naar Pagina’s > Nieuwe pagina. Geef de titel van het menu item dat je wilt toevoegen en klik rechts op Publiceren (de inhoud kun je later aanmaken).

Als je voor alle menu items die jij wilt zo een pagina gemaakt hebt, ga dan terug naar Weergave > Menu’s.Bij Pagina’s zie je nu jouw pagina’s bovenaan staan. Vink je pagina aan, klik op Aan menu toevoegen en het komt onderaan. Daarvandaan kun je het slepen naar de plaats waarin het in het menu getoond moet worden. Je kunt ook Submenu’s maken door het naar iets rechts onder een hoofdmenu item te plaatsen.Meer uitleg lees je op: https://theme-fusion.com/avada-doc/header/setting-up-the-menu/

Widgets

Avada heeft ingebouwde widgets (onderdelen) die je bijvoorbeeld kunt gebruiken in de footer.

Om widgets in de footer te activeren ga je naar Avada > Theme Options > Footer en zet je de Footer Widgets op On en definieer je het aantal kolommen, bijvoorbeeld drie. Als je ook de rest hebt doorgelopen sla je dit op. Vervolgens ga je naar Weergave > Widgets en daar kun je een widget slepen naar de betreffende plaats. Ook kun je deze openen en bijvoorbeeld de tekst plaatsen die getoond moet worden:

Om bijvoorbeeld de Social Links widget toe te voegen moet je eerst een Widget Section toevoegen.

Ga daarvoor naar Weergave > Widgets en klik rechts op “Add New Widget Section”.  Geef er een naam aan en sla het op.

Aan de linkerkant zie je alle Widgets die je kunt toevoegen. Kies Avada: Social Links en sleep die naar jouw Widget en pas de links aan. Bijvoorbeeld als je een Facebook link wilt, dan moet je de link invullen bij de Facebook Link.

Om zelf een Widget Area toe te voegen:

  1. Maak een nieuwe pagina met Fusion Builder (zie verderop in de handleiding)
  2. Klik op + Container en kies het aantal kolommen
  3. Kies op + Element en kies Widget. Daar selecteer je de Widget area section uit de Dropdown lijst.
  4. Klik op Save

Verdere documentatie over de Avada Widgets: https://theme-fusion.com/support/documentation/avada-documentation/#page-item-394717

Editor om pagina's te maken: Fusion Builder

Bij Avada krijg je ook een editor met fantastisch veel mogelijkheden: Fusion Builder. Daarmee kun je elke pagina er precies zo uit laten zien als je wilt. Je kunt onderdelen in een pagina slepen naar de plek waar je het wilt hebben (drag and drop). Daarvoor gelden natuurlijk alle zaken die in de Algemene Wordpress Handleidingen al uitgelegd worden: http://www.wpsitemaken.nl/wordpress-handleiding-voor-beginners Met de Fusion Builder kun je gemakkelijk de lay-out van je berichten, de indeling (tabellen), toepassingen als een slider (foto’s die na elkaar getoond worden), en andere zaken aan te passen of in te stellen. De Engelstalige documentatie van Fusion Builder is te vinden op: https://theme-fusion.com/support/documentation/fusion-builder-documentation/ En een wat snelle Engelstalige uitleg op Youtube: https://www.youtube.com/watch?v=UDyNsnB_COA

Hieronder volgt de uitleg van enkele basiszaken.

Als je in het WordPress menu links gekozen hebt voor Nieuwe pagina toevoegen klik op de "Use Fusion Builder"-knop. Bovenin zie je dan deze zwarte balk:

Standaard staat deze op Builder. In de Library staan de templates (indelingen die je hebt opgeslagen als uitgangspunt voor andere pagina’s of onderdelen van pagina’s), om daarmee snel een soortgelijke pagina te kunnen maken

Deze  knop gebruik je om de pagina onderdelen uit te vouwen (naar beneden) of in te klappen (naar boven)

Met deze knop kun je eigen CSS code toevoegen aan de pagin

Als je van de pagina lay-out een template wilt bewaren om die vaker te gebruiken klik je op deze knop. Je geeft een naam, en die naam komt dan in de Library te staan als  template voor andere pagina’s

Hiermee verwijder je de pagina lay-out

Hiermee kun je terugschakelen als je een fout gemaakt hebt naar de situatie toen de pagina nog OK was.

De pagina-inhoud

Je komt dan in een scherm dat dit bevat

Klik op de blauwe "+ Container"-knop. Je krijgt dan de keus in hoeveel kolommen je (het eerste gedeelte) van je pagina wilt hebben en hoe die over de breedte verdeeld moeten zijn:

Klik op een van de getoonde indelingen en je krijgt het volgende scherm

Bovenin staat er een lijstje van de betekenis van de ikoontjes:


Klik nu op het + teken voor Element. Dan krijg je alle mogelijkheden te zien om verschillende soorten inhoud toe te voegen. Naast Text Block en Table bijvoorbeeld ook Button, Slider (om afbeeldingen automatisch te laten tonen), een afbeelding, een Google Map, een checklist, een galerie, enz. Deze werken alle vaak veel eenvoudiger dan als je met de standaard editor van WordPress werkt. Stel je wilt een Google Map op je contact pagina. Je klikt dan op +Element en kiest Google Maps. Vul het adres in, pas eventueel nog wat andere zaken aan en klaar ben je. Dit bespaart je veel werk en uitzoeken hoe je dat voor elkaar krijgt in de standaard editor. Hetzelfde met Button: Type de tekst die de knop moet tonen, de URL die getoond moet worden, eventueel nog of die op een andere browsertab getoond moet worden of niet en klaar ben je! De lay-out bepaal je in je Avada instellingen.

Wil je nu weer een andere indeling onder de eerste container, klik dan rechtsonder op de +Container knop

Ook kun je dus achteraf nog kolommen toevoegen in de bestaande container door op + Columns te klikken.Wil je een gedeelte op een andere plaats op de pagina: sleep het er naar toe en laat het los. Zo eenvoudig werkt dat!

Tussentijds even zien hoe de bezoeker het in beeld zou krijgen: klik rechts op de Voorbeeld knop. Wil je er later verder aan werken, kies Concept opslaan. Is het OK, dan op de blauwe Publiceren knop helemaal rechts

Tot slot: kijk ook even in WordPress handleidingen op Internet om daarin thuis te raken of zoek even in Google als je ergens vastloopt. Je mag ook altijd onze supportafdeling vragen stellen (een e-mail aan support@hoasted.com).

Nog steeds hulp nodig? Contact ons Contact ons