Avada Core plugin

Inzicht in de plugins van het Avada thema

Wanneer je de backend van een website met het Avada thema onderzoekt, zul je diverse plugins tegenkomen die specifiek voor dit WordPress thema zijn ontwikkeld. Deze WordPress plugins zijn niet alleen bedoeld om extra functionaliteit aan de website toe te voegen, maar zijn ook cruciaal voor het correct functioneren van je website binnen het Avada-framework.

1. Fusion Core plugin:

Dit is de belangrijkste plugin die je in de lijst zult zien. Fusion Core is de ruggengraat van het Avada-thema en biedt de kernfunctionaliteit die de unieke ontwerp elementen en functies van Avada mogelijk maakt. Het is van essentieel belang dat deze plugin actief is. Een belangrijk punt om te onthouden is dat de Fusion Core plugin zo geïntegreerd is met het Avada-thema dat je deze niet kunt deïnstalleren. Dit garandeert dat essentiële functies van je website altijd beschikbaar blijven.

2. Fusion Builder:

Hoewel je slechts twee plugins hebt genoemd, is het ook de moeite waard om de Fusion Builder te noemen, een ander kernonderdeel van het Avada-thema. Deze plugin stelt gebruikers in staat om eenvoudig en visueel pagina’s te bouwen met een drag-and-drop interface. Het maakt het creëren van complexe layouts en paginastructuren eenvoudig, zelfs voor degenen zonder technische kennis.

Waarom zijn deze plugins zo belangrijk?

Zonder deze plugins zou het Avada-thema een groot deel van zijn functionaliteit verliezen. Ze zorgen ervoor dat gebruikers op een intuïtieve manier websites kunnen bouwen en aanpassen, waardoor de behoefte aan externe tools of uitgebreide codering wordt verminderd. Ben je geïnteresseerd in verdere details of overweeg je om het Avada-thema voor je eigen project te gebruiken? Lees dan alles over het Avada-thema in ons gedetailleerde artikel over Avada. Als je overtuigd bent van de kracht en veelzijdigheid van Avada, kun je het thema ook direct bestellen*.

Lees alles over het Avada thema in ons artikel over Avada.

Bestel direct het Avada thema*

Avada, een populair WordPress thema, biedt ontwikkelaars een scala aan mogelijkheden om het uiterlijk en de functionaliteit van hun website aan te passen met behulp van hooks. Deze hooks stellen ontwikkelaars in staat om op specifieke plekken in de code hun eigen aangepaste code in te voegen. Hier is een uitgebreide uitleg over hoe je dit kunt doen:

Wat zijn Avada hooks?

Hooks zijn in essentie ‘ankerpunten’ binnen de thema-structuur waar je je eigen code kunt toevoegen of bestaande code kunt wijzigen. Er zijn twee hoofdtypen hooks: actions en filters. Met ‘actions’ kun je eigen code toevoegen op een specifiek punt binnen het thema, terwijl ‘filters’ je in staat stellen om bestaande content of functionaliteit te wijzigen.

Hoe gebruik je Avada hooks?

1. Bepaal de positie van de hook: Beslis eerst waar je de aangepaste code wilt hebben. Dit kan bijvoorbeeld boven de header, na het footer, tussen blogberichten enzovoort zijn.
2. Vind de juiste hook: Avada heeft een uitgebreide documentatie waarin alle beschikbare hooks worden vermeld. Ga naar Avada’s Developer Documentation en zoek naar de hook die overeenkomt met de positie die je hebt gekozen.
3. Kopieer de hook-naam: Zodra je de juiste hook hebt gevonden, kopieer je de naam om later in je functie te gebruiken.
4. Schrijf je functie: Maak een nieuwe functie in het functions.php bestand van je (child) thema. Deze functie zal de aangepaste code bevatten die je wilt toevoegen.

function my_custom_head_function_for_avada() {
   // Hier kun je je eigen HTML-code schrijven
    echo '<div class="my-custom-class">Hier is mijn aangepaste content!</div>';
}

1. Voeg de hook toe: Met behulp van add_filter of add_action (afhankelijk van de hook) koppel je je functie aan de specifieke Avada hook:

add_filter( 'avada_after_header_wrapper', 'my_custom_head_function_for_avada' );

1. Opslaan en testen: Sla het functions.php bestand op en controleer je website om te zien of de wijzigingen correct worden weergegeven.

Avada hooks zijn een krachtig hulpmiddel voor ontwikkelaars om hun website te personaliseren. Door de bovenstaande stappen te volgen, kun je eenvoudig je eigen code integreren in het Avada-thema en het ontwerp en de functionaliteit van je website naar wens aanpassen.

Het Avada-thema voor WordPress biedt standaard mogelijkheden voor het weergeven van een cookie-melding. Deze melding is niet alleen een kwestie van goede praktijk, maar ook een wettelijke verplichting in veel landen om de privacy van websitebezoekers te waarborgen. Hieronder vind je gedetailleerde stappen om deze cookie-melding te optimaliseren voor een betere gebruikerservaring:

1. Toegang tot het Avada dashboard:

• Log in op het WordPress-dashboard.
• Zoek naar de “Avada” optie in het zijmenu.

2. Aanpassen via Thema-opties:

• Navigeer vanuit het Avada-dashboard naar ‘Theme Options’.
• Ga naar het tabblad ‘Privacy’.

3. Instellen van de privacy bar:

• In het ‘Privacy’ tabblad, zoek naar de ‘Privacy Bar’ sectie.
• Hier kun je de instellingen van de Privacy Bar bewerken.

4. Aanpassen van de padding:

• Pas de padding van de cookie-melding aan om het minder opdringerig te maken.
• Stel bijvoorbeeld de padding in op ‘5px’ aan de boven- en onderkant.

5. Personaliseren van de privacy bar tekst:

• In het veld ‘Privacy Bar Text’ kun je de standaardtekst wijzigen.
• Voor een duidelijke communicatie, overweeg bijvoorbeeld: “Deze website gebruikt alleen geanonimiseerde cookies.”

6. Extra aanpassingsopties:

• Overweeg ook het aanpassen van de lettergrootte, lettertype, en kleur om de melding in lijn te brengen met het ontwerp van je website.
• Je kunt ook de plaatsing van de melding wijzigen, bijvoorbeeld onderaan of bovenaan de pagina.

7. Testen en feedback:

• Na het aanpassen, test de weergave van de cookie-melding op verschillende apparaten en browsers.
• Vraag feedback van gebruikers om te verzekeren dat de melding duidelijk en niet hinderlijk is.

Het aanpassen van de cookiemelding in het Avada-thema verbetert niet alleen de naleving van privacywetten, maar verhoogt ook de gebruiksvriendelijkheid van je website. Door deze aanpassingen te maken, laat je zien dat je waarde hecht aan zowel de privacy van je bezoekers als aan een aangename website-ervaring.

Binnen het Avada thema voor WordPress, is het mogelijk om aangepaste JavaScript-code in te voegen. Dit kan bijzonder nuttig zijn voor het toevoegen van specifieke functionaliteiten of integraties met externe services.

Waar vind je de optie voor het inladen van JavaScript?

1. Navigeren naar Theme Options: Ga naar je WordPress-dashboard en klik op ‘Avada’ om toegang te krijgen tot de Theme Options.
2. Advanced Sectie: In de Theme Options, zoek naar het tabblad ‘Advanced’. Dit is meestal te vinden in de bovenste navigatiebalk.
3. Code Fields: Onder de Advanced opties, zoek naar ‘Code Fields’. Dit gedeelte is speciaal ontworpen voor het toevoegen van aangepaste code.

Hoe voeg je JavaScript-code toe?

1. Open de Code Fields: Klik op ‘Code Fields’ onder de Advanced opties.
2. JavaScript-velden: Je vindt hier velden voor het toevoegen van JavaScript. Dit kan bijvoorbeeld zijn: ‘Space before </head>’ en ‘Space before </body>’.
   • Space before </head>: Voeg hier scripts toe die in de head van je website geladen moeten worden. Dit is nuttig voor scripts die moeten laden voordat de pagina-inhoud wordt geladen.
   • Space before </body>: Voeg hier scripts toe die aan het einde van de body moeten worden geladen. Dit is ideaal voor scripts die functionaliteit toevoegen nadat de pagina volledig is geladen.

Belangrijke overwegingen

• Controleer op conflicten: Zorg ervoor dat de JavaScript-code die je toevoegt geen conflicten veroorzaakt met bestaande scripts of functionaliteiten van de website.
• Minimaliseer de code: Probeer de hoeveelheid JavaScript-code die je toevoegt te minimaliseren om de laadtijden van de website niet negatief te beïnvloeden.
• Gebruik externe scripts zorgvuldig: Als je externe scripts of bibliotheken inlaadt, controleer dan de betrouwbaarheid en beveiliging ervan.

Voorbeeld van het inladen van een script

Stel je wilt Google Analytics inladen via Avada Theme options:

1. Ga naar ‘Advanced’ > ‘Code Fields’ > ‘Space before </body>’.
2. Plak hier de trackingcode van Google Analytics.
3. Sla de wijzigingen op en controleer of de code correct wordt uitgevoerd.

Door deze stappen te volgen, kun je aangepaste JavaScript-functionaliteit toevoegen aan je Avada-thema-website, wat kan bijdragen aan verbeterde gebruikerservaringen of integratie met externe tools.

Tekst toevoegen aan het mobiele menu van Avada

Wanneer je de Avada WordPress thema gebruikt, biedt het standaard een mobiel menu icoon (vaak hamburger-icoon genoemd) zonder begeleidende tekst. Maar soms willen gebruikers het woord “Menu” naast het icoon plaatsen om het voor bezoekers duidelijker te maken. Hieronder vind je een stapsgewijze handleiding over hoe je dit kunt doen:

Stappenplan:

1. Login in je WordPress Dashboard. Ga naar je WordPress dashboard door jouwdomeinnaam.nl/wp-admin in te voeren in je browser en in te loggen met je inloggegevens.
2. Navigeer naar Avada’s Custom CSS gebied. Ga naar Avada > Theme Options > Custom CSS. Hier kun je aangepaste CSS toevoegen die op de hele website van toepassing zal zijn.
3. Voeg de Custom CSS toe. Kopieer en plak de onderstaande code in het Custom CSS veld:

.fusion-icon-bars::after { 
content: "Menu"; 
font-style: normal; 
text-transform: uppercase; 
font-size: 10px; 
padding-left: 0; 
position: absolute; 
float: right; 
margin-top: 30px; 
right:4px; 
font-family: Quicksand; }

Deze code doet het volgende:

• Het voegt het woord “Menu” toe naast het hamburger-icoon.
• Het stelt het lettertype in op “Quicksand”.
• Het past de grootte, positie en styling van de tekst aan voor een optimale zichtbaarheid en afstemming met het icoon.

Opslaan en controleren. Klik op de ‘Opslaan’ knop om je wijzigingen te bewaren. Ga vervolgens naar je website en verklein je browservenster of bezoek je website vanaf een mobiel apparaat om de veranderingen in het mobiele menu te bekijken.

Thema opties van Avada?

Avada is een van de best verkopende WordPress-thema’s op de markt en biedt een schat aan aanpassingsmogelijkheden. Een van de kernonderdelen van dit thema is het “Theme Options” paneel. Dit paneel biedt gebruikers de mogelijkheid om de look en feel van hun website te personaliseren zonder enige code te hoeven schrijven. Hier is hoe je toegang krijgt tot deze opties.

Stappen om de thema opties van Avada te bereiken:

1. Inloggen op je WordPress dashboard:
   Voordat je iets kunt wijzigen aan je Avada-thema, moet je inloggen op je WordPress dashboard. Dit doe je door naar je website te gaan gevolgd door /wp-admin, bijvoorbeeld: www.jouwwebsite.nl/wp-admin. Dit kun je wijzigen met bijvoorbeeld de WPS Hide plugin.
2. Navigeer naar Avada op je dashboard:
   Eenmaal ingelogd, zie je aan de linkerkant van je scherm een verticale navigatiebalk. Zoek naar “Avada” in deze lijst.
3. Klik op “Options”:
   Onder het “Avada”-tabblad in de navigatiebalk vind je een reeks subopties. Klik op “Options” om toegang te krijgen tot de uitgebreide reeks personalisatie-opties die Avada biedt.

Wat kun je aanpassen in de thema opties?

Eenmaal binnen het “Options” paneel, zal je verschillende secties zien zoals:

• Algemene instellingen: Waar je basisinstellingen zoals je logo, favicon, en globale lay-out kunt instellen.
• Kleur & styling: Pas de kleurenschema’s van je website aan en stel specifieke kleuren in voor elementen zoals headers, voetteksten en tekst.
• Kop & footer: Hier kun je de layout van je kop- en voettekstgebieden aanpassen, evenals de inhoud die daar wordt weergegeven.
• Typografie: Pas de lettertypen, lettergroottes en andere typografische elementen van je website aan.
• En veel meer: Avada biedt een breed scala aan secties om alles aan te passen, van blog layouts tot portfolio instellingen en meer.

Avada’s “Options” is een krachtig hulpmiddel voor elke website-eigenaar die de volledige controle wil hebben over de uitstraling van hun site zonder de noodzaak van codering. Door bovenstaande stappen te volgen, heb je snel en gemakkelijk toegang tot deze opties en kun je je website personaliseren zoals jij dat wilt.

Widget toevoegen in het Avada thema?

Het Avada-thema is een van de populairste WordPress thema’s. Als je een aangepaste widget of content direct na de header van je Avada-thema wilt toevoegen, kun je dit eenvoudig doen door een actie hook te gebruiken. Hier is een stapsgewijze handleiding om dit te bereiken:

1. Maak een back-up van je website

Voordat je wijzigingen aanbrengt in je thema, is het altijd aan te raden om een volledige back-up van je website te maken. Dit zorgt ervoor dat je terug kunt gaan naar de vorige versie van je site als er iets misgaat.

2. Kies de plek voor de code

Je hebt twee keuzes om de code toe te voegen:

Direct in het functions.php bestand van je (child) thema.
Met behulp van een plug-in zoals “Code Snippets”, waarmee je stukjes PHP-code aan je WordPress-site kunt toevoegen zonder het thema zelf te bewerken.

Voor de meeste gebruikers is de Code Snippets plug-in een veiligere keuze, omdat je hiermee wijzigingen kunt ongedaan maken zonder toegang tot de server of bestanden.

3. De code toevoegen

Voeg de volgende code toe:

add_action( 'avada_after_header_wrapper', 'avada_add_banner' );
function avada_add_banner() {
echo do_shortcode('[shortcodeaanpassen]');
}

Zorg ervoor dat je [shortcodeaanpassen] vervangt door de daadwerkelijke shortcode van de widget of content die je wilt toevoegen.

4. Opslaan en controleren

Nadat je de code hebt toegevoegd, sla je wijzigingen op en bekijk je je website. De widget of content zou nu direct na de header moeten verschijnen.

Het toevoegen van een widget na de header in het Avada-thema is vrij eenvoudig als je weet welke actie-hook je moet gebruiken. Door bovenstaande stappen te volgen, kun je gemakkelijk een aangepaste widget of content aan je Avada-website toevoegen. Zorg er altijd voor dat je wijzigingen test op een ontwikkelings- of staging-site voordat je ze op je live site toepast.

Flatsome ux-builder voor header categoriepagina gebruiken?

Als je een banner met een afbeelding bovenaan een categorie pagina wilt tonen van een webshop die gebouwd is met het Flatsome thema dan kan dit met de UX builder. In deze uitleg staat stap voor stap beschreven hoe je deze header maakt in de ux builder.

UX Builder uitleg

1. Navigatie naar het dashboard
   Open je webbrowser en log in op je WordPress dashboard. Dit is meestal te vinden op jouwwebsite.nl/wp-admin. Behalve als je de url gewijzigd hebt met bijvoorbeeld WPS Hide.
2. Toegang tot UX Blocks
   Eenmaal ingelogd, navigeer je naar de ‘UX Blocks’ sectie in het linkermenu van het dashboard.
3. Creëren van een nieuwe pagina
   Klik in de UX Blocks sectie op de knop ‘Nieuwe pagina’ of ‘Add New’ om een nieuw block te starten.
   Voer een passende naam in voor het block, die het gemakkelijk identificeerbaar maakt.
4. Aanpassen in de UX Builder
   Nadat je het nieuwe block hebt gemaakt, open je de UX-Builder om het block aan te passen.
   Voeg de gewenste elementen en content toe aan het block, zoals afbeeldingen, tekst en links.
   Let op de layout en styling om ervoor te zorgen dat het block er goed uitziet en functioneert op de categoriepagina.
   Sla de wijzigingen op zodra je tevreden bent met het ontwerp.
5. Kopieer de shortcode
   Ga terug naar de UX Blocks sectie en vind het zojuist aangemaakte block.
   Aan de rechterkant van het scherm vind je de ‘shortcode’ van het block. Kopieer deze code.
6. Plakken van de shortcode
   Navigeer nu naar de categoriepagina waar je de banner wilt plaatsen.
   Zoek naar het ‘Top content’ veld in de achtergrondinstellingen van de categorie.
   Plak de gekopieerde shortcode in dit veld en sla de wijzigingen op.

Testen van je shortcode

Na het voltooien van bovenstaande stappen, is het belangrijk om te controleren of de banner correct wordt weergegeven op de categoriepagina. Test de functionaliteit en visuele weergave op verschillende apparaten en browsers om er zeker van te zijn dat alle gebruikers een optimale ervaring hebben. Indien nodig, keer terug naar de UX Builder om verdere aanpassingen te maken.

Extra tips voor UX Builder

• SEO en toegankelijkheid
  Overweeg SEO-elementen zoals alt-tags voor afbeeldingen en juiste koppen om de pagina SEO-vriendelijk te maken.
  Zorg voor toegankelijkheidsfeatures zoals alt-teksten en correcte contrastverhoudingen om de pagina toegankelijk te maken voor alle gebruikers.
• Performance optimalisatie
  Optimaliseer afbeeldingen en andere media-elementen om de laadtijden te verminderen.
  Maak gebruik van browsercaching en content delivery networks (CDNs) om de performance van de pagina verder te verbeteren.

Door deze stappen zorgvuldig te volgen en te letten op details zoals SEO, toegankelijkheid en performance, kun je een effectieve en gebruikersvriendelijke banner creëren voor elke categoriepagina in Flatsome met de UX-Builder.

Je kunt het Flatsome thema hier aanschaffen*

Aangepaste viewport instellen in het Flatsome thema

Wanneer je een website of webwinkel in WordPress ontwikkelt of aanpast, kan het soms nodig zijn om de viewport te forceren om een ​​bepaald gedrag op mobiele apparaten te bereiken. In het geval van het Flatsome thema, kan dit worden bereikt door aangepaste code toe te voegen. Hieronder wordt uitgelegd hoe je dit kunt doen.

Wat is een viewport?

Een viewport is het zichtbare gebied van een webpagina op een displayapparaat. Het bepaalt hoe de inhoud op verschillende schermen en apparaten wordt geschaald en weergegeven. Het forceren van de viewport kan nuttig zijn om een ​​betere gebruikerservaring op mobiele apparaten te garanderen.

Stap voor stap: viewport forceren in Flatsome

1. Toegang tot code: Open je functions.php bestand van je thema of gebruik een plug-in zoals Code Snippets. Dit bestand wordt meestal gevonden in de themamap van je WordPress installatie.
2. Code toevoegen: Voeg de volgende code toe aan je functions.php bestand of als een nieuw snippet via Code Snippets:

function flatsome_allow_mobile_zooming(){
   print ' ';
   print "n";
}

add_action( 'wp_head' , 'flatsome_allow_mobile_zooming', 9999999 );

Deze code zal de viewport tag in de head sectie van je website plaatsen, waardoor gebruikers kunnen in- en uitzoomen op mobiele apparaten.

Sla de wijzigingen op en bekijk je website op een mobiel apparaat om te controleren of de veranderingen succesvol zijn doorgevoerd.

Tips voor viewport aanpassingen

• Het is essentieel om back-ups van je website te maken voordat je wijzigingen in de code aanbrengt, om eventueel gegevensverlies te voorkomen.
• Zorg ervoor dat de toegevoegde code geen conflicten veroorzaakt met andere functies of plug-ins op je website.
• Als je niet comfortabel bent met het rechtstreeks wijzigen van themabestanden, overweeg dan om een ​​child-theme te gebruiken of vraag hulp aan een WordPress ontwikkelaar.

Het forceren van de viewport in het Flatsome thema kan helpen om een ​​meer responsieve en gebruiksvriendelijke ervaring te creëren op mobiele apparaten. Door de bovenstaande stappen te volgen en de nodige voorzorgsmaatregelen te nemen, kun je de viewport van je website eenvoudig aanpassen en optimaliseren.

Je kunt het Flatsome thema hier aanschaffen*