Divi header & footer layouts

27 februari 2021

WordPress is het meest gebruikte Content Management Systeem (CMS) voor het maken van een website of webshop. In combinatie met een pagebuilder ontwerpt u vervolgens super gemakkelijk de mooiste berichten en pagina’s. Het WordPress thema Divi van Elegant Themes is zowel een thema als een pagebuilder. U kunt dan ook gemakkelijk via de optie themabouwer een eigen header met menu maken. Ook kunt u zo een eigen footer onderaan uw pagina’s en berichten maken.

Hoe kunt u een Divi header en footer template (json bestanden) uploaden in WordPress?

Via de volgende stappen kunt u een Divi template (json bestand) uploaden in WordPress:

  • Ga in het WordPress admin menu naar Divi
  • Vervolgens klikt u op de optie “Themabouwer”
json bestand uploaden uitleg 1

U gaat vervolgens naar de pijlen rechtsboven in het scherm. Hier klikt u op.

json bestand uploaden uitleg 2

U krijgt vervolgens een pop-up scherm. Hier klikt u op het tabblad “Importeren”. Daarna selecteert u het bestand, dat u van mijn website heeft gedownload. Vervolgens klik u op “Divi Theme Builder-sjablonen importeren”.

json bestand uploaden uitleg 3

Zodra het bestand klaar is met uploaden, ziet u twee lichtgroene blokken, namelijk één voor een header en één voor uw footer. U klikt vervolgens op de knop “Wijzigingen opslaan”.

json bestand uploaden uitleg 4

U kunt zowel de header als footer nog aanpassen door op het pennetje te klikken.

json bestand uploaden uitleg 5

Als u dit heeft gedaan, moet u niet vergeten om nogmaals op de groen knop “Wijzigingen opslaan” te klikken.

Download gratis WordPress Header en Footer layouts

Hieronder kunt u gratis header & footer templates (json bestanden) downloaden. Vervolgens kunt u het bestand uploaden, zoals hiervoor beschreven.

Gratis WordPress Divi header, menu en footer layout 01 - Acupunctuur

Gratis WordPress Divi header, menu en footer layout 02 - Astrologie

Gratis WordPress Divi header, menu en footer layout 03 - Cosmetica

wordpress divi header menu footer layout pack 03 beauty product

wordpress divi header menu footer layout pack 03 beauty product

Download gratis WordPress Divi header, menu en footer layout 03 – Cosmetica (json bestand)

Gratis WordPress Divi header, menu en footer layout 04 - Fietsenmaker

Gratis WordPress Divi header, menu en footer layout 05 - Bistro

Gratis WordPress Divi header, menu en footer layout 06 - Kooklessen

wordpress divi header menu footer layout pack 06 cooking school

wordpress divi header menu footer layout pack 06 cooking school

Download gratis WordPress Divi header, menu en footer layout 06 – Kooklessen (json bestand)

Gratis WordPress Divi header, menu en footer layout 07 - Black Friday

Gratis WordPress Divi header, menu en footer layout 08 - Black Friday

Gratis WordPress Divi header, menu en footer layout 09 - Black Friday

Gratis WordPress Divi header, menu en footer layout 10 - Black Friday

Gratis WordPress Divi header, menu en footer layout 11 - Black Friday

Gratis WordPress Divi header, menu en footer layout 12 - Black Friday

Gratis WordPress Divi header, menu en footer layout 13 - Black Friday

Gratis WordPress Divi header, menu en footer layout 14 - Black Friday

Gratis WordPress Divi header, menu en footer layout 15 - Black Friday

Gratis WordPress Divi header, menu en footer layout 16 - Black Friday

Gratis WordPress Divi header, menu en footer layout 17 - Black Friday

Gratis WordPress Divi header, menu en footer layout 18 - Black Friday

Gratis WordPress Divi header, menu en footer layout 19 - Black Friday

Gratis WordPress Divi header, menu en footer layout 20 - Black Friday

Gratis WordPress Divi header, menu en footer layout 21 - Black Friday

Gratis WordPress Divi header, menu en footer layout 22 - Black Friday

Gratis WordPress Divi header, menu en footer layout 23 - Medisch centrum

wordpress divi header menu footer layout pack 23 womens health center

wordpress divi header menu footer layout pack 23 womens health center

Download gratis WordPress Divi header, menu en footer layout 23 – Medisch centrum (json bestand)

Gratis WordPress Divi header, menu en footer layout 24 - Ramenwasser

wordpress divi header menu footer layout pack 24 window cleaning

wordpress divi header menu footer layout pack 24 window cleaning

Download gratis WordPress Divi header, menu en footer layout 24 – Ramenwasser (json bestand)

Gratis WordPress Divi header, menu en footer layout 25 - Huwelijksfotograaf

wordpress divi header menu footer layout pack 25 wedding photographer

wordpress divi header menu footer layout pack 25 wedding photographer

Download gratis WordPress Divi header, menu en footer layout 25 – Huwelijksfotograaf (json bestand)

Gratis WordPress Divi header, menu en footer layout 26 - Online fitness

Gratis WordPress Divi header, menu en footer layout 27 - Online Assistent

wordpress divi header menu footer layout pack 27 virtual assistant

wordpress divi header menu footer layout pack 27 virtual assistant

Download gratis WordPress Divi header, menu en footer layout 27 – Online Assistent (json bestand)

Gratis WordPress Divi header, menu en footer layout 28 - Stoffeerbedrijf

Gratis WordPress Divi header, menu en footer layout 29 - Medische helpdesk

Gratis WordPress Divi header, menu en footer layout 30 - Tarot kaartleggingdesk

Gratis WordPress Divi header, menu en footer layout 31 - Sushi restaurant

Gratis WordPress Divi header, menu en footer layout 32 - Kruidenwinkelt

Gratis WordPress Divi header, menu en footer layout 33 - Schoenmakerij

Gratis WordPress Divi header, menu en footer layout 34 - Robotica

Gratis WordPress Divi header, menu en footer layout 35 - Renovatie

Gratis WordPress Divi header, menu en footer layout 36 - Makelaar

Gratis WordPress Divi header, menu en footer layout 37 - Reclamebureau

Gratis WordPress Divi header, menu en footer layout 38 - Pizzeria

Gratis WordPress Divi header, menu en footer layout 39 - Dierenwinkel

Gratis WordPress Divi header, menu en footer layout 40 - Parfumerie

Gratis WordPress Divi header, menu en footer layout 41 - Schilder

Gratis WordPress Divi header, menu en footer layout 42 - Nagelstudio

Gratis WordPress Divi header, menu en footer layout 43 - Meditatie

Gratis WordPress Divi header, menu en footer layout 44 - Leerbewerking

wordpress divi header menu footer layout pack 44 leather company

wordpress divi header menu footer layout pack 44 leather company

Download gratis WordPress Divi header, menu en footer layout 44 – Leerbewerking (json bestand)

Gratis WordPress Divi header, menu en footer layout 45 - Italiaans restaurant

Gratis WordPress Divi header, menu en footer layout 46 - Tolk

wordpress divi header menu footer layout pack 46 interpreter

wordpress divi header menu footer layout pack 46 interpreter

Download gratis WordPress Divi header, menu en footer layout 46 – Tolk (json bestand)

Gratis WordPress Divi header, menu en footer layout 47 - Influencer

Gratis WordPress Divi header, menu en footer layout 48 - Holistische therapie

Gratis WordPress Divi header, menu en footer layout 49 - Kruidenremedie

Gratis WordPress Divi header, menu en footer layout 50 - Freelance schrijver

Gratis WordPress Divi header, menu en footer layout 51 - Fitness coach

wordpress divi header menu footer layout pack 51 fitness coach

wordpress divi header menu footer layout pack 51 fitness coach

Download gratis WordPress Divi header, menu en footer layout 51 Fitness coach (json bestand)

Gratis WordPress Divi header, menu en footer layout 52 - Financieel adviseur

wordpress divi header menu footer layout pack 52 financial advisor

wordpress divi header menu footer layout pack 52 financial advisor

Download gratis WordPress Divi header, menu en footer layout 52 Financieel adviseur (json bestand)

Gratis WordPress Divi header, menu en footer layout 53 - Huisarts

wordpress divi header menu footer layout pack 53 family doctor

wordpress divi header menu footer layout pack 53 family doctor

Download gratis WordPress Divi header, menu en footer layout 53 Huisarts (json bestand)

Gratis WordPress Divi header, menu en footer layout 54 - Ingenieursbureau

wordpress divi header menu footer layout pack 54 engineering firm

wordpress divi header menu footer layout pack 54 engineering firm

Download gratis WordPress Divi header, menu en footer layout 54 Ingenieursbureau (json bestand)

Gratis WordPress Divi header, menu en footer layout 55 - Diëtist

wordpress divi header menu footer layout pack 55 dietitian

wordpress divi header menu footer layout pack 55 dietitian

Download gratis WordPress Divi header, menu en footer layout 55 Diëtist (json bestand)

Gratis WordPress Divi header, menu en footer layout 56 - Online samenwerkingsplatform

Gratis WordPress Divi header, menu en footer layout 57 - Effectenkantoor

wordpress divi header menu footer layout pack 57 brokerage firm

wordpress divi header menu footer layout pack 57 brokerage firm

Download gratis WordPress Divi header, menu en footer layout 57 Effectenkantoor (json bestand)

Gratis WordPress Divi header, menu en footer layout 58 - Fixed header with divi's position options

wordpress divi header menu footer layout pack 58 position options desktop

wordpress divi header menu footer layout pack 58 position options desktop

wordpress divi header menu footer layout pack 58 position options mobile

wordpress divi header menu footer layout pack 58 position options mobile

Download gratis WordPress Divi header, menu en footer layout 58 Fixed header with divi’s position options (json bestand)

Gratis WordPress Divi header, menu en footer layout 59 - Global sticky header

wordpress divi header menu footer layout pack 59 global sticky desktop preview

wordpress divi header menu footer layout pack 59 global sticky desktop preview

wordpress divi header menu footer layout pack 59 global sticky mobile preview

wordpress divi header menu footer layout pack 59 global sticky mobile preview

Download gratis WordPress Divi header, menu en footer layout 59 Global sticky header (json bestand)

Gratis WordPress Divi header, menu en footer layout 60 - Responsive slide-in menu

wordpress divi header menu footer layout pack 60 yoga desktop preview

wordpress divi header menu footer layout pack 60 yoga desktop preview

 

wordpress divi header menu footer layout pack 60 yoga mobile preview

wordpress divi header menu footer layout pack 60 yoga mobile preview

Download gratis WordPress Divi header, menu en footer layout 60 Responsive slide-in menu (json bestand)

Gratis WordPress Divi header, menu en footer layout 62 - Global floating menu bar

wordpress divi header menu footer layout pack 63 global floating desktop

wordpress divi header menu footer layout pack 63 global floating desktop

Download gratis WordPress Divi header, menu en footer layout 63 Global floating menu bar (json bestand)

Gratis WordPress Divi header, menu en footer layout 64 - Transparant header sticky on scroll

wordpress divi header menu footer layout pack 64 transparant sticky desktop preview

wordpress divi header menu footer layout pack 64 transparant sticky desktop preview

Download gratis WordPress Divi header, menu en footer layout 64 Transparant header sticky on scroll (json bestand)

Gratis WordPress Divi header, menu en footer layout 65 - Header en menu verticaal en gedraaid

Gratis WordPress Divi header, menu en footer layout 66 - Uitklapbaar mobiel menu

wordpress divi header menu footer layout 66 mobile nested mobile preview

wordpress divi header menu footer layout 66 mobile nested mobile preview

Als u dit Json bestand wilt gebruiken om voor mobiele weergave een uitklapbaar mobiel menu te tonen, dan dient u nog enkele aanpassingen te doen bij uw menu instellingen. Uitleg hierover vindt u in deze blog van Elegant Themes. U hoeft enkel de CSS class aan te geven van het eerste en tweede niveau van uw menu. Alle overige instellingen zitten al in het Json bestand.

Download gratis WordPress Divi header, menu en footer layout 66 – Mobile Collapsing Nested Menu (json bestand)

Gratis WordPress Divi header, menu en footer layout 67 - Animatie binnen uw header

wordpress divi header menu footer layout pack 67 animation desktop preview

wordpress divi header menu footer layout pack 67 animation desktop preview

Download gratis WordPress Divi header, menu en footer layout 67 Animatie binnen uw header (json bestand)

Gratis WordPress Divi header, menu en footer layout 68 - Animatie binnen uw header

wordpress divi header menu footer layout pack 68 animation desktop preview

wordpress divi header menu footer layout pack 68 animation desktop preview

Download gratis WordPress Divi header, menu en footer layout 68 Animatie binnen uw header (json bestand)

Gratis WordPress Divi header, menu en footer layout 69 - Inline login formulier in uw header

Gratis WordPress Divi header, menu en footer layout 70 - Menu met 2 aansluitende knoppen

Gratis WordPress Divi header, menu en footer layout 71 - Dropdown contact formulier in uw header

wordpress divi header menu footer layout pack 71 dropdown contact form desktop preview

wordpress divi header menu footer layout pack 71 dropdown contact form desktop preview

Download gratis WordPress Divi header, menu en footer layout 71 – Dropdown contact formulier in uw header (json bestand)

Gratis WordPress Divi header, menu en footer layout 73 - Label toevoegen aan menu items

wordpress divi header menu footer layout pack 73 corner label preview desktop

wordpress divi header menu footer layout pack 73 corner label preview desktop

Download gratis WordPress Divi header, menu en footer layout 73 Label toevoegen aan menu items (json bestand)

Gratis WordPress Divi header, menu en footer layout 74 - Het plaatsen van een verdeler (divider) tussen header en body

Gratis WordPress Divi header, menu en footer layout 75 - Website titel en ondertitel in uw header

wordpress divi header menu footer layout pack 75 dynamic site title

wordpress divi header menu footer layout pack 75 dynamic site title

De website titel en ondertitel voert u in via het WordPress admin menu bij het onderdeel “Algemeen”.

Download gratis WordPress Divi header, menu en footer layout 75 Website titel en ondertitel in uw header (json bestand)

Gratis WordPress Divi header, menu en footer layout 76 - Een audio afspeellijst aan uw header toevoegen

wordpress divi header menu footer layout pack 76 audio bar desktop preview

wordpress divi header menu footer layout pack 76 audio bar desktop preview

U moet nog wel een audio bestand uploaden in uw media bibliotheek en de url hiervan plakken bij de instellingen van de audio module die in deze header is verwerkt.

Download gratis WordPress Divi header, menu en footer layout 76  Een audio afspeellijst aan uw header toevoegen (json bestand)

Gratis WordPress Divi header, menu en footer layout 77 - Bij een sticky header wisselen in logo bij scrollen

Hoe maakt u een global header met de Divi themabouwer?

U kunt er natuurlijk ook voor kiezen om zelf een header met menu te maken. Als u éénmaal ervaring heeft opgedaan met de Divi themabouwer, dan is het niet meer zo moeilijk om zelf een header te maken. Mocht u dit toch nog moeilijk vinden, dan kunt u beter nog even de volgende video bekijken. Hierin wordt stap-voor-stap uitgelegd hoe u in de themabouwer een eigen header met menu maakt.

Hoe maakt u een global footer met de Divi themabouwer?

Heeft u hiervoor de bovenstaande video bekeken en een eigen global header gemaakt? Bekijk dan ook onderstaande video en maak ook uw eigen global footer in de Divi themabouwer

Gerelateerde berichten

Titel met animatie

Eén van de belangrijkste onderdelen van een pagina is de titel. Dit is het eerste wat mensen zien. Hieronder een voorbeeld van een titel welke extra opvalt door het toepassen van een animatie-effect.Wilt u ook werken met pagina titels met animatie, maar weet u niet...

Lees meer

Divi WooCommerce Product Pagina Layouts

In deze column beschrijf ik hoe u met behulp van de Divi Themabouwer een eigen WooCommerce productpagina kunt ontwerpen. Wilt u dit niet, dan kunt u ook gratis kant-en-klare productpagina layouts (JSON-bestanden) downloaden.

Lees meer

Blader door berichten

Pin It on Pinterest

Share This