Laatste menu item in je hoofdmenu laten opvallen

Laatste menu-item laten opvallen

Er zijn tal van situaties waarin je wellicht de behoefte hebt om het laatste menu-item op je website te laten opvallen. Dit kan bijvoorbeeld het geval zijn bij een WordPress-website waar je graag de aandacht wilt vestigen op een offerte-aanvraag, of in een webshop waar het laatste menu-item je ‘sale’-categorie vertegenwoordigt.

Deze elementen verdienen extra aandacht om je bezoekers te verleiden. Maar hoe kun je dit effectief bereiken? Een doeltreffende manier is door de presentatie van dit menu-item aan te passen, zoals het veranderen van de achtergrond in een opvallende Call To Action-kleur of het wijzigen van alleen de tekstkleur.

Een van de grote voordelen van CSS (Cascading Style Sheets) is dat je nauwkeurig en doelgericht wijzigingen kunt aanbrengen aan specifieke elementen op je website, zoals dat laatste menu-item.

Menu item stylen met css

1. Basis CSS-regel
De specifieke CSS-regel voor het laatste menu-item kan variëren afhankelijk van het thema dat je gebruikt. Over het algemeen kun je echter deze basis-CSS-regel als uitgangspunt nemen en aanpassen aan de classes die jouw specifieke thema hanteert:

#header .main-menu > li.menu-item:last-child > a { 
   color: #db8778 !important ; 
}

Het gebruik van :last-child in deze regel zorgt ervoor dat de stijl alleen wordt toegepast op het laatste menu-item. Als je het eerste menu-item wilt aanpassen, kun je in plaats daarvan :first-child gebruiken.

2. Achtergrondkleur wijzigen:
Als je de achtergrondkleur van het laatste menu-item wilt aanpassen, kun je de CSS-eigenschap background-color gebruiken in plaats van color. Bijvoorbeeld:

#header .main-menu > li.menu-item:last-child > a { 
background-color: #db8778!important; 
}

Hiermee geef je het laatste menu-item een opvallende achtergrondkleur.

3. Andere opmaakopties:
Naast kleuren kun je met CSS nog veel meer opmaakopties aanpassen, zoals lettertypen, tekstgrootte, marges, enzovoort. Hierdoor kun je het laatste menu-item op elke gewenste manier laten opvallen.

Het aanpassen van het laatste menu-item kan de website of webshop verbeteren en de conversie verhogen, vooral als je belangrijke elementen, zoals offerte-aanvragen of promoties, wilt benadrukken. Experimenteer met verschillende stijlen en kleuren om te ontdekken wat het beste werkt voor jouw website en thema. Los van de hier beschreven methode zou je ook een css class toe kunnen voegen aan het menu item wat je wilt laten opvallen en hierop stylen.

Het integreren van een lijst met je sociale media kanalen in de footer van je WordPress website is een slimme zet. Hiermee geef je je bezoekers de mogelijkheid om rechtstreeks door te klikken naar jouw verschillende sociale mediaprofielen. Maar hoe voer je dit nu precies uit? Hier laten we je zien hoe je een widget kunt maken en een ongeordende lijst met de benodigde kanalen kunt toevoegen aan je website, inclusief stijlvolle pictogrammen.

1.HTML-structuur

Om te beginnen, creëer een WordPress widget in je websitecode. Hier is een voorbeeld van de HTML-structuur die je kunt gebruiken:

<ul class="social>
<li class="facebook" title="Like onze facebook pagina"><a href="https://www.facebook.com/jouwkanaal/" target="_blank" rel="noopener">Like ons op facebook</a></li>
<li class="instagram" title="Like onze Instagram pagina"> <a href="https://www.instagram.com/jouwbedrijf/" target="_blank" rel="noopener">Volg ons op instagram</a></li>
<li class="linkedin" title="Volg ons via LinkedIn"> <a href="https://nl.linkedin.com/company/jouwbedrijf/" target="_blank" rel="noopener">Volg ons via LinkedIn</a></li>
</ul>

In dit voorbeeld hebben we drie sociale media kanalen toegevoegd: Facebook, Instagram en LinkedIn. Elk kanaal heeft zijn eigen class en een bijbehorende link.

2. De CSS-styling

Nu moeten we deze lijst stylen en de pictogrammen voor de sociale media kanalen toevoegen. Hier is de CSS-code die je kunt gebruiken:

ul.social li + li + li::before {
content: '\f167'; /*LinkedIn*/
}
ul.social li + li::before {
content: '\f16d'; /*Instagram*/
}
ul.social li::before {
display: inline-block;
margin: 0 5px 0 0;
font-family: 'Font Awesome 5 Brands';
font-size: 22px;
color: #FFFFFF;
content: '\f09a'; /*Facebook*/
text-align: center;
width: 25px;
float: left;
}

De bovenstaande CSS-code voegt Font Awesome-pictogrammen toe aan elk lijstitem op basis van hun class. Hierdoor krijg je stijlvolle pictogrammen die de sociale media kanalen vertegenwoordigen.

3. Aanvullende aanpassingen

Je kunt de CSS-code aanpassen om de pictogrammen verder te personaliseren. Als je andere sociale media-icoontjes wilt gebruiken, kun je de Font Awesome-codes voor die specifieke iconen gebruiken. Font Awesome biedt een uitgebreide bibliotheek met pictogrammen die je kunt vinden op hun website.

Met deze eenvoudige stappen kun je een aantrekkelijke lijst met je sociale media kanalen toevoegen aan de footer van je website. Het geeft je bezoekers een gemakkelijke manier om verbonden te blijven met jouw merk op verschillende sociale platforms.

Je hebt binnen je website een standaard opmaak voor je tekst en uiteraard maak je voor de beste SEO resultaten gebruik van bijvoorbeeld H1- en H2-koppen. Sliders gebruik jij natuurlijk niet, wil je weten waarom stuur ons dan gerust een berichtje, maar een mooie website zul je mogelijk wel voorzien van een headerfoto.

Tekst leesbaar maken met text-shadow in CSS

Let wel op dat je deze niet zo hoog maakt dat het voor je bezoekers niet duidelijk is dat er nog meer te zien is op een pagina, maar dat is het onderwerp gebruiksvriendelijke websites en daar hebben we al meerdere blogs over geschreven, dus dat laten we nu rusten.

Stel je gebruikt een headerfoto van 500 pixels hoog in je website. Daar wil je een tekst in zetten. Alleen wat krijgt de meeste aandacht? De tekst of de foto’s? Je zult zien dat als je de tekst bijvoorbeeld standaard wit maakt, het slecht leesbaar is. Hoe verbeter je die leesbaarheid? Voeg een schaduw toe aan de tekst. Het makkelijkste is als je een class toevoegt aan de titels want dan kun je heel specifiek de schaduw aan die titels toekennen. Hoe dat werkt leggen we hieronder uit.

Je hebt een H2 in de header staan en hier de class ‘header’ aan gekoppeld. Plaats dan deze code in je style.css.

.header h2 { text-shadow: rgba(0,0,0,0.5) 1px 1px 2px !important; }

• De kleur kun je in dit geval vervangen voor een andere rgb kleur, dit is de eerste 0,0,0.
• Met de 0.5 kun je de transparantie aanpassen.
• De afsluitende px-waardes geven aan hoe groot/breed de schaduw moet worden. Dit kun je uiteraard naar wens aanpassen.

Leesbaarheid verbeteren met schaduw

Is dit de beste optie om een tekst leesbaar te maken? Als je tekst over een foto wilt plaatsen en geen achtergrond kleur bij de tekst wilt geven wel. Het is voor iedereen goed te lezen wat er staat en niemand heeft problemen.

Als je meer wilt leren verwijzen we je graag naar ons artikel over CSS.

Een stylesheet specifiek voor mobiel. Dit kan bijvoorbeeld ook een stylesheet zijn voor WooCommerce of voor de styling van Gravity Forms. Bijkomend voordeel is dat je dit voor één website kunt maken en vervolgens bij andere websites kunt integreren. Hiermee bespaar je dus op termijn tijd en ontwikkel je een eenduidige werkwijze binnen je WordPress agency.

Extra stylesheet inladen

We gaan er vanuit dat je een child-theme gebruikt voor de website. Voeg de onderstaande code toe aan je functions.php.

De eerste regel staat er waarschijnlijk al, voeg dan alleen het stukje ‘wp_enqueue’ toe aan de bestaande code.

function theme_enqueue_styles() {
		wp_enqueue_style( 'mobile-style', get_stylesheet_directory_uri() . '/css/mobile.css');
}

Zorg dat je in je child-theme folder een map ‘CSS’ hebt en dat hier een CSS-bestand in staat met de naam die je definieert in de functions.php.

@media screen and (max-width: 600px) {
a {
color: #ff0000;
}
}

De bovenstaande code kun je plaatsen in mobile.css. Alle links zullen dan op schermgroottes tot 600 pixels rood zijn. Als je in je thema opties of een andere stylesheet ook de a gedefinieerd hebt zal vanaf 600 pixels die kleur getoond worden. Eventueel zou je deze nog kunnen overschrijven met !important. Je code zal dan worden.

a {
color: #000 !important;
}
}

Je bent klaar om verder te werken naar een professionelere webdesign standaard.

Er zijn heel veel verschillende plaatsen waar je de CSS kunt plaatsen voor je website. We zullen een aantal opties opsommen waar je de CSS nog meer zou kunnen plaatsen.

CSS in de customizer van WordPress

Deze vind je via het dashboard van je website en dan ga je naar Customizer. Daarin vind je de optie Extra CSS. Hier kun je de code plaatsen die je nodig hebt.

CSS toevoegen in je thema

Eigenlijk ieder WordPress thema heeft een optie om extra CSS toe te voegen.

CSS toevoegen met een plugin

In principe is een extra WordPress plugin absoluut niet nodig om dit soort zaken te verwerken binnen je website. Maar er kunnen redenen denkbaar zijn (denk bijvoorbeeld aan een website of webshop die je niet zelf beheert maar waarin wel aanpassingen gemaakt moeten worden) om wel te kiezen voor een plugin. Je kunt dan bijvoorbeeld de plugin Simple Custom CSS and JS gebruiken.

Simple Custom CSS and JS

In stylesheet child-theme

Ons advies is sowieso om met een child-theme te werken om wijzigingen in de toekomst bij updates van je WordPress website nog steeds te laten werken. Wil je het voor jezelf nog duidelijker maken dan raden we zelfs aan te om bijvoorbeeld een mobile.css aan te maken waarin je alle styling voor de responsive weergave van je website verwerkt. Hierover verderop in deze blog meer.

De beste optie is om te werken in een child theme en dan in de stylesheet.css binnen die map.

Als het Figma design van je WooCommerce webshop klaar is kun je starten met het invoeren van producten. In de meeste webshops die wij bouwen plaatsen wij geen producten. Dit is een behoorlijk arbeidsintensief werk dat na de oplevering alsnog door de klant zelf overgenomen wordt.

De enige uitzondering hierop is als het veel producten zijn die geplaatst moeten worden en wij deze in zijn geheel importeren. Maar dan moet er wel een complete import-file als een CSV beschikbaar zijn.

WooCommerce product maken

Hoe maak je een WooCommerce product? Wij leren onze klanten van linksboven naar beneden te werken en van rechtsonder naar rechtsboven. Klinkt heel simpel, blijkt in de praktijk voor veel mensen best lastig te zijn. We zullen kort benoemen wat je tegenkomt en waar je op moet letten. In dit geval gaan we er vanuit dat je de Yoast SEO plugin al geïnstalleerd hebt. Voor hetzelfde geval kun je ook RankMath SEO gebruiken.

Wat vul je in bij het WooCommerce product?

• Producttitel – Hier voer je zoals de naam al aangeeft de titel van het product in. Verwerk hierin ook direct de zoekterm. Dus gaat het bijvoorbeeld om een zilveren ketting, geef als producttitel dan mee ‘Zilveren ketting 30 centimeter met bedel’ of iets dergelijks.
• Lange productomschrijving – De lange productomschrijving wordt getoond onderaan de productpagina. Dit is mogelijk verwarrend, maar als je het weet dan gaat dit altijd goed. Maak in deze omschrijving gebruik van H2 koppen en goede teksten om de vindbaarheid van je producten te verbeteren.
• Soort product – Maak hier de keuze of het een simpel product is of een variabel product. Als je voor variabel kiest zul je bij eigenschappen ook op moeten geven waar de variaties uit bestaan. Dit laten we voor nu achterwege.
• Reguliere prijs – Een product moet een prijs hebben, anders wordt het niet getoond. Afhankelijk van je decimalen-instellingen zul je een een punt of een komma moeten gebruiken.
• SKU / Artikelnummer – In het tabblad voorraad heb je de mogelijkheid om zelf een SKU nummer in te voeren. Dit moet een uniek nummer per product zijn.
• Voorraadbeheer – Kies onder het tabblad ‘voorraad’ of je wel of geen voorraadbeheer wilt voor dit product.
• Voorraad – Als je gekozen hebt voor voorraadbeheer kun je hier de variabelen voor het voorraadbeheer instellen, waaronder het aantal op voorraad.
• Focus keyword – Dit is onderdeel van de Yoast en ook de RankMath plugin. Hiermee geef je aan wat de belangrijkste zoekterm van je product is. Als je meer wilt weten over de algemene werking van de Yoast plugin en waar je op moet letten verwijs ik je graag naar deze blog over Yoast van Optimus Online.
• SEO Title – Ook onderdeel van de Yoast of de RankMath plugin. Hiermee geef je aan wat je voorkeurstitel in Google is.
• Meta description – De omschrijving vanuit de Yoast of RankMath plugin die in Google getoond gaat worden. Niet belangrijk voor je vindbaarheid, maar wel zeer belangrijk voor de CTR: hoe aantrekkelijk/verleidelijk is dit voor bezoekers die dit lezen en waarom gaan ze doorklikken.
• Korte productomschrijving – Deze wordt in de meeste thema’s getoond tussen de producttitel en de productprijs op de productpagina. Geef hier de belangrijkste kenmerken van je product weer.
• Productgalerij – Heb je meer dan één foto? Dan kun je deze uploaden in de galerij.
• Productafbeelding – De uitgelichte productafbeelding. Wordt als eerste getoond op de productpagina en ook op de overzichtspagina van je webshop.
• Producttags – Deze zijn optioneel in te voeren. Let wel op dat je niet voor ieder product nieuwe tags verzint, maar zorg dat je de producttags kunt hergebruiken waardoor je eenvoudig bepaalde producten kunt groeperen.
• Productcategorieën – Hier vink je aan onder welke productcategorie jouw product getoond moet worden.

Dat is een behoorlijke lijst geworden.

WooCommerce product opties

Heb je hiermee alle mogelijkheden gehad? Nee absoluut niet. We hebben echt de basis gegeven waarmee je simpele WooCommerce producten toe kunt voegen en verschillende productcategorieën kunt vullen. Er zijn nog diverse afwijkingen links of rechts te bedenken.

Een voorbeeld hiervan is bijvoorbeeld een verzendklasse die je aan een product toe kunt voegen. Wat is dit? Stel je verkoopt al je producten tegen verzendkosten van 6,95 euro, maar je verkoopt één product dat alleen per pallet verzonden kan worden. Dat red je meestal niet voor het genoemde tarief.

Als je een verzendklasse ‘pallet’ aanmaakt en je koppelt dit aan het bewuste product dan worden de aangepaste verzendkosten voor dat product gerekend. Zo zijn er nog tientallen uitzonderingen te bedenken.

Een webshop zonder betaalmethodes is geen WordPress webshop. Dat is een simpele conclusie. Er zijn verschillende Payment Service Providers (PSP’s). Wij adviseren onze klanten vaak om gebruik te maken van Mollie als betaalprovider voor hun webshop.

Waarom? Zij ondersteunen veel betaalmethodes, zijn zeer goed en gemakkelijk te koppelen aan WooCommerce en rekenen daarnaast redelijke commissies bij verschillende betaalmethodes.

Mollie betaalmethodes en WooCommerce webshop

Het voordeel van alle betaalmethodes via één betaalprovider is dat je administratie op orde is en blijft omdat je overzicht hebt en kunt houden op je betalingen, credits, etc.

Bij de instellingen van Mollie in je WooCommerce webshop kun je instellen welke betaalmethodes je actief wilt zien.

Let op dat je een betaalmethode sowieso binnen het dashboard van Mollie zelf moet activeren voordat je deze kunt activeren binnen je webshop. Verder kun je hier ook nog instellen wat er moet gebeuren met orderstatussen en dergelijke na een afgeronde betaling.

Als je je webshop nog aan het bouwen bent kun je deze instellen op een testmodus. Hiermee kun je dus onbeperkt testen zoals bezoekers je live webshop ook zullen zien.

Mollie betaalmethodes per land

Een extra toevoeging om je webshop gebruiksvriendelijker te maken is om per land de betaalmethodes te tonen. In België bijvoorbeeld bestaat onze iDEAL niet, verberg deze daarom zodat bezoekers niet twijfelen bij het afrekenen.

Dit kun je eenvoudig doen binnen de Mollie instellingen en als je meer geavanceerde regels wilt maken kun je dit doen met de plugin Country Based Payments.

Je vindt alles rondom verzendkosten in je WooCommerce webshop via deze url https://jouwwebshops.nl/wp-admin/admin.php?page=wc-settings&tab=shipping. Van belang is dat je eerst verzendzones definieert. Je komt dan in de WooCommerce instellingen in het tabblad Verzendmethoden.

Je werkt binnen WooCommerce met verzendzones en binnen deze verzendzones definieer je verzendmethoden.

Verzendzones in WooCommerce

Verzend je naar Nederland en België, voeg dan twee verzendzones toe. Tenzij je voor beide landen dezelfde tarieven hanteert, wat op zich niet direct logisch zou zijn.

Zorg dat je adres van je webshop ook ingevuld is op het tabblad algemeen. Dit zal gebruikt worden voor het berekenen van de verzendkosten van jouw bezoekers.

Als voorbeeld maken we een verzendzone Nederland. De regio’s die we hierin aangeven zijn ook alleen Nederland. Vervolgens maak je hier een aantal verzendmethodes aan. Je kunt bijvoorbeeld pakketpost en brievenbuspost aanmaken. Afhankelijk van de volgorde waarin je de verzendmethodes plaatst zullen ze getoond worden.

Onze ervaring is dat je als je meer verschillende opties wilt aanbieden aan je bezoekers je al vrij snel uitkomt bij een plugin als Tablerate shipping. Hier zijn verschillende varianten voor te vinden, onder andere. WooCommerce zelf biedt er een aan. Hiermee kun je op basis van gewicht, aantal, totaalbedrag, etc. instellen wat de verzendkosten zijn.

Gratis verzending in WooCommerce webshop

Gratis verzending voeg je eenvoudig toe door de verzendmethode ‘gratis verzending’ toe te voegen en het drempelbedrag hiervoor in te stellen. Eventueel kun je nog kiezen om ook gratis verzending te bieden met een kortingscode.

Eventueel heb je nog een mogelijkheid om je webshop zo in te stellen dat je alleen verzendt naar de landen waar je aan verkoopt. Bij de algemene opties van je webshop kun je dit aangeven onder verkooplocatie(s) en verzendlocatie(s). Er is bij verzendzones altijd een verzendzone ‘locaties niet gedekt door je overige zones’. Hier kun je bijvoorbeeld een globaal tarief instellen voor landen waar je weinig aan verkoopt. Als je wilt is dit jouw vangnet.

Als je gebruikt maakt van Myparcel dan is het sterk aan te raden om hun plugin te gebruiken. Hiermee kun je direct vanuit de backend van je webshop verzendlabels aanmaken en je pakket alvast aanmelden bij PostNL. Er zijn diverse aanbieders van pakketten, Myparcel is degene die wij voor onze klanten aanraden.

Veel WooCommerce webshops zullen BTW moeten berekenen aan hun klanten. Aangezien er in Nederland verschillende tarieven voor verschillende producten gerekend worden is het zaak om deze BTW tarieven direct goed in te stellen in je webshop.

Je kunt er ook voor kiezen om producten inclusief of exclusief btw te tonen aan je bezoekers. In Nederland is het wettelijk verplicht om je prijzen inclusief btw te tonen aan consumenten. Dus als je een B2C webshop hebt dan heb je helemaal geen keuze.

WooCommerce BTW instellen

Alle instellingen rondom belastingen vind je terug in je WooCommerce webshop op deze pagina: https://jouwwebshop.nl/wp-admin/admin.php?page=wc-settings&tab=tax

Hier kun je per land invullen wat de BTW tarieven zijn. En de naam die getoond moet worden tijdens het afrekenen of op de PDF factuur bijvoorbeeld.

Een vraag die wij vaak voorbij zien komen is hoe je ervoor zorgt dat er in de winkelmand netjes ‘btw’ komt te staan in plaats van ’tax’, wat er standaard komt te staan. Dit stel je in bij het tarief en dan bij Belastingnaam.

EU VAT Number plugin

Voor een aantal van onze klanten die B2B aan het buitenland verkopen is het van belang dat met een geldig btw-nummer er geen btw berekend wordt. Je moet de BTW verleggen.

Hiervoor adviseren wij de plugin van WooCommerce, dit is de EU VAT Number plugin. Deze plugin controleert of er een geldig btw-nummer is ingevoerd via een grote database met de naam VIES en als dit klopt, wordt er geen btw berekend.

BTW instellen in WooCommerce

In deze video vertellen we je hoe je de WooCommerce BTW kunt instellen.