Elementor fonts instellen

Hoe je lettertypes instelt in Elementor

Elementor biedt een gebruiksvriendelijke manier om fonts in te stellen en aan te passen voor je WordPress website. Het aanpassen van je fonts kan een groot verschil maken in de uitstraling en leesbaarheid van je site. In dit artikel vind je stap voor stap hoe je de fonts in Elementor kunt aanpassen.

Elementor dashboard openen

Om te beginnen, log in op je WordPress dashboard. Ga naar het menu aan de linkerkant en klik op Elementor. Dit opent het Elementor dashboard waar je toegang hebt tot verschillende instellingen en tools.

Lettertypen instellen in de site-instellingen

Ga naar de site-instellingen: Klik op de Elementor tab in je WordPress-dashboard en selecteer site-instellingen.
Kies typografie: In de Site-instellingen klik je op Typografie. Hier kun je de standaard lettertypen voor je hele site instellen.
Typografie instellen: Je ziet verschillende opties zoals Body, Koppen, Linkteksten en meer. Klik op elk van deze om de standaard lettertypen, groottes en stijlen in te stellen.

• Voor de Body tekst kun je bijvoorbeeld een font kiezen zoals Arial of Roboto, en de grootte instellen op 16px.
• Voor Koppen (H1, H2, H3, etc.) kun je een ander font kiezen dat goed past bij het body lettertype, zoals Montserrat voor een moderne uitstraling.

Google Fonts en custom fonts toevoegen

Google Fonts

Automatisch beschikbaar: Elementor heeft al toegang tot alle Google Fonts, dus je hoeft niets extra’s te doen om deze te gebruiken.
Selecteer een Google Font: Bij het kiezen van een lettertype in de typografie-instellingen kun je gewoon de naam van het Google Font typen dat je wilt gebruiken.

Aangepaste lettertypen in Elementor

Aangepaste lettertypen uploaden: Ga naar Elementor > Aangepaste Lettertypen in je WordPress dashboard.
Nieuw lettertype toevoegen: Klik op Nieuw toevoegen. Geef je lettertype een naam en upload de verschillende formaten (WOFF, TTF, SVG, EOT).
Opslaan en gebruiken: Na het uploaden kun je het lettertype opslaan. Dit lettertype wordt nu beschikbaar in de typografie-instellingen onder ‘Aangepaste Lettertypen’.

Lettertypen per widget aanpassen

Je kunt ook een specifiek font gebruiken voor een bepaalde sectie of widget in Elementor.

Elementor editor openen: Ga naar de pagina of het bericht dat je wilt bewerken en klik op Bewerken met Elementor.
Widget selecteren: Klik op de widget waarvoor je het lettertype wilt aanpassen (bijvoorbeeld een koptekst of tekstvak).
Stijl tab: In de linker zijbalk, ga naar het Stijl tabblad.
Typografie instellingen: Klik op Typografie en pas het lettertype, de grootte, dikte, lijnhoogte en andere instellingen aan.

Voorbeeld bekijken en publiceren

Nadat je de gewenste aanpassingen hebt gemaakt, kun je een voorbeeld van je Elementor WordPress pagina bekijken om te zien hoe de nieuwe fonts eruitzien.

Voorbeeld bekijken: Klik op het oog-icoontje om een voorbeeld van je pagina te bekijken.
Pagina publiceren: Als je tevreden bent met de aanpassingen, klik je op Publiceren om de wijzigingen live te zetten.

Log als eerste in op je hosting server via SSH. Dit kun je bijvoorbeeld in de terminal van je Mac apparaat doen.

Hieronder zullen we stapsgewijs doorlopen wat er nodig is om WordPress te installeren via de SSH verbinding van je server met WP CLI.

WordPress installeren via WP CLI

Ga naar de directory waarin je WordPress wilt installeren. Als de WordPress installatie voor je primaire website is, zou dit public_html zijn. Om naar je public_html-directory te gaan, typ en voer je het volgende in:

cd public_html

Of als je WordPress op een addon-domein installeert, navigeer dan naar de home directory van het addon-domein met behulp van het onderstaande commando:

cd yourdomainname.com

Met het wget-commando downloaden we WordPress naar onze huidige directory.

wget http://wordpress.org/latest.tar.gz

Om de inhoud van het bestand latest.tar.gz uit te pakken, typ je het volgende commando:

tar xfz latest.tar.gz

Gebruik het commando ls -l om de inhoud van je huidige directory te bekijken. Je zult zien dat er nu een directory genaamd wordpress is. Laten we de inhoud van die directory verplaatsen naar onze huidige directory. Hiervoor gebruik je het volgende commando:

mv wordpress/* ./

Laten we nu opruimen. We hebben de ‘WordPress’-directory en het bestand latest.tar.gz niet meer nodig. Om deze items te verwijderen, gebruik je het volgende commando:

rm -rf latest.tar.gz ./wordpress/

Database aanmaken

Vervolgens moet je een database en een database gebruiker aanmaken die we aan elkaar kunnen koppelen. Log in op bijvoorbeeld cPanel en gebruik de zoekfunctie om naar MySQL Databases te navigeren. Maak de nieuwe database aan en koppel die aan de gebruiker.

Voer vervolgens in je wp-config.php bestand de juiste database gegevens en navigeer naar de url van je website. Je krijgt hier een WordPress configuratiescherm en je kunt de stappen van de installatie doorlopen en afronden.

Als je gebruik maakt van de premium zoekfunctie van Fibosearch op je webshop heb je standaard geen mogelijkheid om de resultaten te sorteren op datum. Je kunt dit met de onderstaande aanpassing mogelijk maken.

Let wel op dat je een aanpassing maakt in een bestand van de plugin. Zorg dat je dit in een childthema zet.

Fibosearch sorteren op datum

 if ( $order === 'relevance' ) {
$order = 'date-desc';
}

return $order;
} );

Voeg deze code toe in een bestand met de naam fibosearch.php in je child-theme map. Je kunt geen submap gebruiken, dan werkt deze oplossing namelijk niet.

WP-CLI’s search-replace commando is een krachtig hulpmiddel waarmee je zoek- en vervangoperaties kunt uitvoeren in je WordPress database. Dit kan bijzonder nuttig zijn bij het migreren van een website naar een nieuwe domeinnaam, het corrigeren van fouten of het bijwerken van URL’s. Hier is een uitleg over hoe het werkt:

WP search replace

Het wp search replace commando zoekt naar een specifieke string (tekst) in je WordPress database en vervangt deze met een andere string. Dit kan worden toegepast op de hele database of beperkt worden tot bepaalde tabellen.

Basis van WP search replace

Het basisgebruik van het commando is als volgt:

wp search-replace 'oude-tekst' 'nieuwe-tekst'

URL’s bijwerken met wp search replace

Stel dat je je website verhuist van oude-domein.com naar nieuwe-domein.com. Om alle oude URL’s in de database bij te werken naar de nieuwe URL, zou je het volgende commando gebruiken:

wp search-replace 'https://oude-domein.com' 'https://nieuwe-domein.com'

Opties voor search replace

Er zijn verschillende opties die je kunt gebruiken met wp search-replace om de werking ervan aan te passen.

Specifieke Tabellen: Je kunt specifieke tabellen targeten door ze als extra parameters toe te voegen.

wp search-replace 'oude-tekst' 'nieuwe-tekst' wp_posts wp_postmeta

Droogloop: Je kunt eerst een “droogloop” uitvoeren om te zien welke veranderingen gemaakt zouden worden zonder de database daadwerkelijk te wijzigen.

wp search-replace 'oude-tekst' 'nieuwe-tekst' --dry-run

Exporteren: Je kunt de resultaten van de zoek-en-vervangoperatie exporteren naar een SQL-bestand.

wp search-replace 'oude-tekst' 'nieuwe-tekst' --export=database-update.sql

Het wp search-replace commando van WP-CLI is een krachtig hulpmiddel voor het uitvoeren van zoek-en-vervangoperaties in je WordPress database. Het is flexibel, kan omgaan met seriële data en kan veilig worden gebruikt met de juiste voorzorgsmaatregelen. Het is een onmisbare tool voor elke WordPress beheerder, vooral bij migraties en grootschalige updates.

Wat is WP-CLI?

WP-CLI is een handige tool voor WordPress die je helpt om allerlei taken op je WordPress website snel en efficiënt uit te voeren, zonder dat je hiervoor de WordPress backend hoeft te gebruiken.

In plaats van via het dashboard te klikken, kun je met WP-CLI opdrachten rechtstreeks in de commandoregel van je computer typen. Dit maakt het mogelijk om bijvoorbeeld WordPress plugins te installeren, updates uit te voeren voor WordPress onderhoud of berichten te beheren, allemaal met een paar eenvoudige commando’s.

Hoe werkt WP-CLI?

Stel je voor dat je een nieuwe WordPress plugin wilt installeren. Normaal gesproken zou je naar het WordPress dashboard gaan, naar “Plugins” navigeren, op “Nieuwe plugin” klikken, zoeken naar de plugin, en deze dan installeren.

Met WP-CLI doe je dit door één enkel commando in te voeren. Dit bespaart tijd en is vooral handig voor bijvoorbeeld een WordPress agency die veel met WordPress werken en meerdere websites beheren. Je kunt als je hiermee slim omgaat een aantal uren per week besparen denken wij.

In sommige hosting panels heb je de mogelijkheid om direct in de terminal in te loggen via het controlepaneel. Bijvoorbeeld cPanel en Plesk hebben deze optie. Bij de hosting van Kinsta heb je de mogelijkheid om eenvoudig de SSH inlog gegevens die je nodig hebt uit het dashboard op te halen en te verbinden via bijvoorbeeld de terminal van je Mac computer.

Meest gebruikte WP CLI commando’s

In het onderstaande overzicht vind je de vijf meest gebruikt WP-CLI commando’s.

Voordelen van WP-CLI

Een ander groot voordeel van WP-CLI is dat je meerdere taken tegelijk kunt uitvoeren. Als je bijvoorbeeld alle plugins op je site wilt updaten, kun je dit met één commando doen. Ook kun je met WP-CLI backups maken, databases optimaliseren en zelfs complete nieuwe WordPress installaties opzetten.

Kortom, WP-CLI maakt het beheer van je WordPress site sneller en gemakkelijker, vooral als je gewend bent om met de commandoregel te werken. Het is een krachtig hulpmiddel voor iedereen die efficiënt en effectief met WordPress wil werken.

Wil je recepten indexeren in FacetWP en maak je gebruik van de WP Recipe Maker? Als je deze gratis add-on van FacetWP installeert krijg je extra facets waarmee je de mogelijkheid hebt om een filter op basis van WP Recipe Maker velden te tonen aan bezoekers van je foodblog.

WP Recipe Maker en FacetWP

Als je naar de website van FacetWP gaat vind je de gratis add-on. Je hebt wel de premium plugin van FacetWP nodig. Na het installeren van de add-on krijg je de mogelijkheid om extra opties in je facets te selecteren.

Deze add-on is overigens niet specifiek voor WP Recipe Maker maar ook geschikt voor Tasty Recipes.

Bronnen voor facets met WP Recipe Maker

Je kunt kiezen voor de volgende filter opties.

• Author name
• Average rating
• Servings
• Estimated cost
• Prep time
• Cook time
• Custom time
• Total time
• Courses
• Cuisines
• Diets
• Keywords
• Ingredients
• Ingredient units
• Equipment
• Calories
• Any WPRM-added custom fields
• Any WPRM-added custom taxonomies
• Any WPRM-added custom nutrition labels

FacetWP indexering

Wanneer WP Recipe Maker is geïnstalleerd, zie je een extra optie Indexeer receptgegevens onder Instellingen > FacetWP > Instellingen.

De twee opties die je kunt kiezen zijn blog posts of recepten.

Blogposts indexeren

Dit zorgt ervoor dat FacetWP de inhoud van blogposts scant op bijgevoegde recepten en vervolgens de receptgegevens koppelt aan de blogposts zelf. Dit is standaard. Het werkt goed voor de meeste receptindexpagina’s, aangezien deze pagina’s over het algemeen zijn geconfigureerd om lijsten met berichten weer te geven.

Recepten indexeren

Dit zorgt ervoor dat FacetWP de wprm_recipe items direct indexeert. Dit is bedoeld voor aangepaste zoekopdrachten (of grid builders) waarbij je wprm_recipe items in plaats van berichten opsomt.

Meer informatie vind je op de website van FacetWP.

FacetWP is een krachtige filter tool die je kunt gebruiken om geavanceerde zoek- en filterfunctionaliteiten toe te voegen aan je WordPress website. In combinatie met het Elementor als WordPress thema biedt het een gebruiksvriendelijke ervaring voor gebruikers die producten of inhoud willen doorzoeken. Hier is een uitleg over hoe FacetWP werkt binnen Elementor.

FacetWP met Elementor

Als je FacetWP optimaal wilt gebruiken dan heb je een extra gratis te downloaden add-on van FacetWP voor het Elementor nodig.

Deze Elementor add-on stelt je in staat om facetten weer te geven naast een reeks Elementor lijstwidgets. Deze widgets zijn beschikbaar wanneer je Elementor Pro gebruikt of een van de genoemde Elementor-plugins.

Met deze add-on geïnstalleerd, voegt FacetWP ook drie eigen widgets toe, voor het toevoegen van facetten, Listing Builder-lijsten en FacetWP-gerelateerde knoppen. Deze widgets werken ook met de gratis versie van Elementor.

Hierna kun je ook de facets toevoegen in je widgets. Meer hierover vind je in dit artikel over FacetWP facets toevoegen.

Voorbeeld voor FacetWP filters

Stel je voor dat je een online kledingwinkel hebt die is opgebouwd met het Elementor. Je wilt dat klanten snel kunnen filteren op kledingcategorie, maat, kleur en prijs. Door FacetWP filters te integreren, kun je deze filters eenvoudig op je productpagina’s toevoegen. Klanten kunnen nu bijvoorbeeld alle rode jurken in maat M onder €50 vinden door simpelweg de filters te gebruiken zonder dat de pagina opnieuw wordt geladen.

FacetWP is een krachtige filter tool die je kunt gebruiken om geavanceerde zoek- en filterfunctionaliteiten toe te voegen aan je WordPress website. In combinatie met het Flatsome WordPress thema biedt het een gebruiksvriendelijke ervaring voor gebruikers die producten of inhoud willen doorzoeken. Hier is een uitleg over hoe FacetWP werkt binnen het Flatsome thema.

FacetWP met Flatsome

Als je FacetWP optimaal wilt gebruiken dan heb je een extra gratis te downloaden add-on van FacetWP voor het Flatsome thema nodig.

Wanneer je de gratis Flatsome-integratie add-on installeert, wordt FacetWP automatisch ingesteld op je standaard WooCommerce winkelpagina.

De add-on lost enkele compatibiliteitsproblemen op met het Flatsome-thema, waaronder het niet updaten van het aantal resultaten en dat de afbeeldingslightbox en andere interactie niet werken na AJAX verversen.

Hierna kun je de facets toevoegen in je widgets. Meer hierover vind je in dit artikel over FacetWP facets toevoegen.

Voorbeeld voor FacetWP filters

Stel je voor dat je een online kledingwinkel hebt die is opgebouwd met het Flatsome thema. Je wilt dat klanten snel kunnen filteren op kledingcategorie, maat, kleur en prijs. Door FacetWP filters te integreren, kun je deze filters eenvoudig op je productpagina’s toevoegen. Klanten kunnen nu bijvoorbeeld alle rode jurken in maat M onder €50 vinden door simpelweg de filters te gebruiken zonder dat de pagina opnieuw wordt geladen.

Om afbeeldingen of andere elementen op een WordPress website in grijstinten (wij noemen het ook vaak zwart-wit maar technisch gezien is dat hetzelfde) weer te geven met CSS, kun je de CSS-eigenschap filter gebruiken. Deze eigenschap maakt het mogelijk om verschillende grafische effecten toe te passen zoals vervaging, verzadiging en kleurverschuiving, direct vanuit je stylesheet, zonder de originele inhoud te wijzigen. Voor zwart-wit effecten gebruiken we het grayscale() filter.

Grayscale filter in CSS

Het grayscale() filter converteert de kleuren van een element naar grijstinten. Het percentage dat je aan grayscale() meegeeft, bepaalt hoeveel een kleur naar grijs wordt omgezet:

• grayscale(100%) maakt een element volledig zwart-wit;
• grayscale(0%) laat de kleuren van het element ongewijzigd.

Hoe gebruik je het filter grayscale?

/* Toepassen op een afbeelding */
.img-zwart-wit {
filter: grayscale(100%);
}

/* Toepassen op een div of een ander element */
.div-zwart-wit {
filter: grayscale(100%);
}

Grayscale bij hover gebruiken

Je kunt ook interactieve effecten creëren waarbij de afbeelding of het element verandert naar zwart-wit wanneer de gebruiker er met de muis overheen gaat (hover).

.img-hover-zwart-wit {
    filter: grayscale(0%);
    transition: filter 0.5s ease; /* Maakt de overgang soepel */
}

.img-hover-zwart-wit:hover {
    filter: grayscale(100%);
}

Combineren met andere CSS filters

De filter eigenschap laat toe dat je meerdere filters combineert. Je kunt bijvoorbeeld grayscale() combineren met contrast() om de zichtbaarheid van zwart-wit afbeeldingen te verbeteren.

.img-geavanceerd {
    filter: grayscale(100%) contrast(120%);
}

Browserondersteuning CSS grayscale filter

Het filter attribuut wordt breed ondersteund in alle moderne browsers, inclusief Chrome, Firefox, Safari, en Edge. Internet Explorer ondersteunt deze eigenschap echter niet.

De filter eigenschap biedt een krachtige en flexibele manier om visuele effecten toe te passen met alleen CSS, waardoor je dynamische en aantrekkelijke designs kunt creëren zonder de noodzaak voor beeldbewerkingssoftware of extra grafische bestanden.

Wil je meer weten over CSS Filter opties? Bekijk dan de W3school.