Tijd voor een nieuwe update blog voor Marketheme. Nummer 15 al weer. In dit deel wil ik een nieuwe update met jullie delen, welke in de toekomst nog veel verder zal uitgroeien.
Laat ik maar gelijk
met de deur in huis vallen!
Dit soort Call to actions zullen op sommige pagina’s van jouw website niet misstaan toch?
Het bovenstaande kan al een tijdje als je zeer bedreven met Marketheme aan de slag bent gegaan, maar in de praktijk zie ik het nog niet echt veel gebeuren. Dit is natuurlijk ook niet gek. Je hebt redelijk verstand van Gutenberg, Marketheme en Bootstrap nodig om dit te kunnen realiseren.
Hoe kan ik dit soort elementen zelf maken?
De call to action hier boven heb ik zelf gemaakt en is een samenstelling van verschillende bestaande Marketheme blocks waarbij ik extra instellingen (kleur, achtergrond, grootte) in combinatie met CSS classes toe pas. Deze patronen bevatten geen instellingen of mogelijkheden die enkel voor mij als maker/admin beschikbaar zijn, iedereen kan dit nabouwen.
Dit hoofdstuk bevat een technische inkijk in hoe ik tot realisatie van een block als hier boven kom. Ik ga er niet van uit dat je alle technieken zelf gaat leren, maar het is misschien wel waardevol eens over te hebben gelezen.
1: Het Group block
Je bent hem misschien wel eens tegen gekomen, het standaard Gutenberg Group Block. Dit is het block dat ik gebruik als “passe-partout” voor alle extra opvallende block-combinaties die ik maak. Het mooie van een group-block is dat je hier weer andere blocks in kan stoppen, over elkaar heen.
2: Structuur, opmaak en achtergrond
De basis van het maken van een element als zo’n opvallende Call to action begint natuurlijk bij het vaststellen van de structuur. Dit doe ik door middel van het Kolommen Block. Dit block stelt mij in staat om een kolommenstructuur te creëren. Handig voor als ik bijv. 3 dezelfde elementen naast elkaar wil plaatsen.
Daarna bepaal ik de opmaak van het element. Dit is eigenlijk een samenstelling van alle informatie die je wil gaan tonen met het bijbehorende uiterlijk. In mijn geval van de CTA was dat “een relatief donkere achtergrondafbeelding met daarop een contrasterende titel en kleinere subtitel welke opvallend ondersteunend zijn voor de grote opvallende knop die in dezelfde kleurstijl geaccentueerd is”.
Een omschrijving als bovenstaande helpt enorm met het vaststellen van hoe een element er uit komt te zien, maar verklaart achteraf ook heel erg mooi hoe het precies tot stand is gekomen met welke ontwerp-keuzes. Daar zit dus veel meer achter dan je misschien zou denken.
De achtergrond is een Omslagafbeelding Block met transparantie. Daar overheen zijn een Kop Block, Paragraaf en Knop Block geplaatst.
3: CSS Classes
Dit is direct het meest technische van deze stappen en is ook zeker niet voor iedereen even nuttig, maar net zoals de rest van de stappen die ik hier voor al deelde wil ik er toch wat meer over vertellen zodat je een idee krijgt hoe een bepaald ontwerp nou precies tot stand komt.
De styling van Marketheme is gebaseerd op het framework Bootstrap. Dit stelt mij als developer in staat om zeer eenvoudig bepaalde CSS regels op te maken die ik kan hergebruiken voor verschillende elementen. Zo kan je door middel van 1 class er voor zorgen dat o.a. de volgende zaken direct aangepast worden:
- Witruimte om een element heen (margin)
- Witruimte in een element zelf (padding)
- Achtergrondkleuren
- Textkleuren
- Randarceringen
Benieuwd naar meer van dit soort classes? Op de Bootstrap website vind je op deze pagina onder het kopje Utilities een overzicht met een aantal van die classes die binnen Marketheme dus in de meeste gevallen gewoon toe te passen zijn. Denk bijv. aan de class border-bottom om een element te onderstrepen, of p-4 om een grote witruimte in het element zelf toe te voegen (padding).
TIJD VOOR ACTIE
Nu je weet hoe dit moet, kan jij ook aan de slag met compleet zelfgemaakte blocks
Dat kan natuurlijk, maar beetje flauw, dat verwacht ik helemaal niet van je!
Een tijdje heb ik nagedacht over een manier om deze kracht echter niet verloren te gaan en deze ongekende mogelijkheden toch beschikbaar te maken voor alle Marketheme abonnees. Daar heb ik nu een oplossing voor!
Marketheme Patronen
Dit soort toffe patronen moeten bruikbaar zijn voor iedereen met een Marketheme website. Zo heb ik bijv. veel klanten gehad die benieuwd waren hoe ik het overzicht op Receptplek.nl (populaire thema’s) precies had gemaakt. Nu heb ik geen problemen met het delen van voorbeelden, dus in deze gevallen maakte ik vaak een concept op de website van de klant, waar ik de betreffende code plaatste zodat het nu aan te passen was voor de eigen website. Maar dat moet makkelijker kunnen!
Vanaf vandaag is het mogelijk om op https://marketheme.nl/patronen een overzicht in te zien met allerlei voorbeelden van dit soort toffe elementen. Op het moment van lanceren zijn het er al meer dan 10, maar uiteindelijk is het doel dat dit uit gaat groeien naar meer.
De Patronen zullen zich uitbreiden naar meer, maar zullen enkel gevuld worden wanneer ik vanuit Marketheme abonnees pro-actief voorstellen en of voorbeelden van elementen ontvang die zij graag binnen Marketheme willen zien.
Bovenstaande geldt ook voor klanten die mij vragen om advies voor een bepaald element op hun website. Wanneer ik vind dat deze globaal en bruikbaar genoeg is voor meerdere abonnees, zal deze onderdeel van het overzicht worden.
Hoe kan ik een patroon gebruiken?
Het patronen overzicht laat van elk beschikbare patroon een live voorbeeld zien. Indien gewenst kan je aan de bovenkant in de balk een selectie maken van een bepaalde categorie van patronen die je enkel zichtbaar wil zien. Heb je een block gevonden dat je wil gebruiken? Als je met je muis over het patroon gaat zie je al een kopieer knop. Bij klikken wordt het patroon gekopieerd naar je klembord.
Wil je eerst beter zien hoe dit patroon er uit ziet? Klik dan het betreffende patroon aan. Je ziet vervolgens een uitgebreidere weergave van het patroon en kan zelfs de weergave van mobiel en tablet bekijken. Ook is er een optie om te reageren op een patroon. Ik zou het erg tof vinden als jullie je mening over de patronen delen of me willen laten weten als je hem voor jouw website gebruikt!
Onder elk patroon vind je de bovenstaande balk. Net zoals het icoon in de overzichtsweergave kopieer je met deze knop het volledige patroon naar je klembord.
Vervolgens kan je op de pagina/bericht waar jij het bericht wil tonen met een eenvoudige Ctrl + V (plakken) het patroon plaatsen. Handig toch?
Maak een herbruikbaar block van je patroon
Een optie die ik ondertussen steeds meer mensen zie doen (goed bezig!) is het maken van een herbruikbaar block. Dit maakt het mogelijk voor jezelf blocks of combinaties van blocks op te slaan onder een bepaalde naam, zodat je deze als eigen block kan ophalen op een ander bericht of pagina.
Bovenstaande zou je bijvoorbeeld kunnen opslaan als Opvallende CTA “Gelijk in huis vallen” om op andere pagina’s en berichten ook toe te voegen. Een ander voordeel van een herbruikbaar block is dat ze centraal beheert worden. Pas je hem op 1 locatie aan, dan past hij zich op alle plekken automatisch ook aan.
Bekijk direct het overzicht van Marketheme Patronen
Ben je benieuwd naar de mogelijkheden? Bekijk dan gelijk ons overzicht.
Heb jij tips voor nieuwe patronen? Laat het me weten via info@marketheme.nl, via de chat rechts onder in beeld of als reactie op deze pagina.