Een thema maken met Defellow

Met de Defellow thema-builder pas je elk globale onderdeel van je website helemaal naar wens aan, zonder ook maar één regel code te schrijven.

Onderdelen die je in de thema-builder aanpast zijn:

  • Header
  • Footer
  • Zijbalk
  • Globale kleuren
  • Typografie
  • Globale pagina’s

In dit artikel gaan ik stap-voor-stap een thema compleet aanpassen. Om zo goed mogelijk te begrijpen hoe de thema-builder werkt raad ik je aan deze in een ander venster te openen.

Om zo goed mogelijk te begrijpen hoe het aanpassen van je thema werkt, raad ik je aan om je website in een nieuw venster te openen en dezelfde stappen te doorlopen.

Thema-builder openen

Om de thema-builder te openen ga je in de admin omgeving naar InstellingenThema.

Als de thema-builder is geladen zie je aan de linkerkant een menu en aan de rechterkant je webpagina.

De thema-builder interface.
De thema-builder interface.

Typografie aanpassen

Als eerst ga ik de (globale) typografie aanpassen. Door je typografie aan te passen kan je website een compleet andere uitstraling krijgen.

Ga in het menu onder Algemene optiesTypografie.

Je kunt hier 10 verschillende tekstsoorten aanpassen. Klik op het lettertype (in het onderstaande voorbeeld ‘Systeem Default’) om deze aan te passen.

Het globale lettertype aanpassen.

Je hebt de keuze uit meer dan 900 Google Fonts en nog enkele standaard lettertypen, zoals Times New Roman, Arial, etc.

Klik je op het pijltje naar links of op de drie horizontale puntjes dan kun je ook de lettergrootte, de lijnhoogte en de afstand tussen de letters aanpassen.

Lettertype opties Defellow
Verschillende letteropties

Je kunt de letteropties per device (computer, tablet, mobiel) naar je eigen wens aanpassen.

Tip! Inspiratie nodig bij het kiezen van je lettertypen? In dit blog vind je de populairste Google Font combinaties.

Alle fonts worden over je gehele website toegepast, tenzij je dat zelf (bijvoorbeeld de Defellow pagebuilder) anders aangeeft. Ook alle templates worden geserveerd in jouw eigen stijl.

In de onderstaande afbeelding zie je (in vergelijking met de afbeelding bovenaan de pagina) bijvoorbeeld dat ik de Standaard lettertype en Kop 1 (H1) heb aangepast. De aanpassingen worden direct op de website doorgevoerd.

Het lettertype van de H1 en standaarttekst is aangepast.
Het lettertype van de H1 en standaard lettertype is aangepast. Je ziet dit direct in de live weergave.

Aanpassingen opslaan

Vergeet niet om regelmatig je aanpassingen op te slaan. Dit doe je door bovenaan op het tandwieltje te klikken.

Aanpassingen opslaan.

Globale kleuren

Om de globale kleuren van je website aan te passen ga je naar Algemene optiesTypografie. Hier vind je kleurenpaletten en globale kleuren.

Globale kleuren en kleurenpaletten.

Verander je iets in het kleurenpalet, dan worden ook de globale kleuren hierop aangepast. Andersom is dat niet het geval.

Het is daarom goed om te beginnen met het aanpassen van het kleurenpalet.

Uitleg van het kleurenpalet

Standaard heb je drie voorgedefinieerde kleurenpaletten, maar je website gebruikt er maar één. Zodra je een kleur in het kleurenpalet wijzigt, worden alle kleuren van je website direct aangepast.

Een palet is samengesteld uit vijf kleuren, we volgen deze eenvoudige regels om alles duidelijker en begrijpelijker te maken:

  • Kleur 1: Meestal gebruikt als primaire / merkkleur.
  • Kleur 2: Meestal gebruikt als alternatieve-, of hover kleur voor kleur 1.
  • Kleur 3: Kleur van de alinea tekst.
  • Kleur 4: Wordt gebruikt als kleur voor koppen, tussenkoppen en titels.
  • Kleur 5: Dit is een optionele kleur.

Header & footer aanpassen

Het aanpassen van de header en footer werkt op dezelfde manier. Daarom pas ik voor het gemak in deze tutorial alleen de header aan.

Een complete uitleg van de header builder vind je in dit artikel.

Ga in het menu onder Algemene optiesHeader. Je ziet nu een soortgelijk scherm:

De user interface van de header builder.

Het aanpassen van jouw header spreekt redelijk voor zich. Je sleept simpelweg een element vanaf het linkermenu in één van de drie rijen.

Je ziet ook dat de drie elementen die al in een rij staan overeenkomen met de header. De header heeft aan de linkerkant een logo en aan de rechterkant een menu en een zoekicoon.

In deze tutorial houdt ik het even bij de middelste rij.

Logo toevoegen

Als eerst wil ik een logo toevoegen. Het logo die op dit moment wordt getoond is de site titel. Ik klik hiervoor op het logo element. Dat kan zowel in het linker menu, als in de rij.

Het logo aanpassen.

Hier kun je jouw logo uploaden, de hoogte van het logo aanpassen de site titel uitschakelen.

Menu aanpassen

Vervolgens ga ik het menu aanpassen. Ik klik op het Menu 1 element. Je krijgt nu een flink aantal opties om het menu vorm te geven.

Als eerste zie je dat het Hoofdmenu is geselecteerd.

Dit is het menu dat standaard in de template-site is inbegrepen en vertelt eigenlijk welke menu-items er getoond worden. De menu-items kun je beheren vanuit het admin gedeelte via InstellingenMenu’s.

Wat ik voor nu wil aanpassen aan het menu is de typografie. Hiervoor ga ik naar het tabblad Ontwerp en pas ik de typografie aan.

Een nieuw element toevoegen

Ik wil het zoekicoon vervangen voor een button.

  1. Als eerst verwijder ik (door op het kruisje te drukken) het Zoeken element.
  2. Vervolgens sleep ik het Knop element naast het Menu 1 element.
Sleep het element op de juiste plaats.

Klik ik vervolgens nogmaals op het element. Dan kan ik ook hier de instellingen van aanpassen.

Instellingen van het knop-element aanpassen.

Instellingen van de rij aanpassen

Als laatste ga ik nog hoogte van de rij aanpassen. Klik op HOOFD RIJ.

Klik op het tandwieltje naast Hoofd rij.

Ook nu kun je via het linkerpaneel de instellingen aanpassen.

Mobiele menu aanpassen

Eén van de unieke functies van Defellow is dat je een compleet aparte builder hebt voor jouw mobiele header.

Om je mobiele header aan te passen klik je onderaan op mobiele header.

De mobiele header pas je op nagenoeg dezelfde manier aan als de desktop header. Het enige verschil is dat je hier werkt met een Off-canvas veld.

Off canvas is het scherm dat je te zien krijgt zodra er op het hamburger icoontje wordt geklikt (het Trekker element).

Off-canvas scherm

Op dit moment staar er alleen nog maar een menu in (Offcanvas menu). Ook hier ga ik het button aan toevoegen.

Het Knop-element is toegevoegd aan het Off-canvas veld.

Uiteraard kun je ook dit menu volledig naar wens aanpassen.

Globale pagina’s

In het linkermenu vind je onder het kopje Berichttypen een aantal soorten pagina’s die allemaal een zelfde layout hebben. In de thema builder kun je deze globale layouts aanpassen.

Hierover later meer…

Geef een reactie