Divi: een plakkerige globale kop maken

Wil je een sticky header maken met Divi ?

Het maken van sticky headers gaat soepel sinds de komst van de thema's, maar we merken dat veel mensen niet weten hoe ze ze moeten maken zonder aanvullende code te gebruiken. Het is echter ook vrij eenvoudig om dat te doen dankzij de plakkerige opties van Divi.

In feite is het niet alleen eenvoudiger, maar biedt deze methode ook meer mogelijkheden om het ontwerp aan te passen.

Daarom nemen we in deze tutorial de tijd om u te laten zien hoe u met behulp van de instellingen een uiterst gepersonaliseerde sticky header kunt maken Divi.

overzicht

Laten we, voordat we in deze tutorial duiken, eens kijken naar het resultaat dat we willen bereiken.

Bouw de kopelementstructuur

Een nieuwe globale kopsjabloon maken

Open de Divi Theme Builder en begin met het maken van een nieuwe algemene of aangepaste koptekst.

Sectie 1 Parameters

Achtergrond met kleurovergang

Eenmaal in de sjablooneditor beginnen we met het bouwen van de structuur van onze kopelementen. In het tweede deel van deze zelfstudie zullen we ons concentreren op het toepassen van de verschillende plakkerige instellingen om het plakkerige koptekstontwerp te voltooien.

Lees ook: Hoe maak je een schuif- en push-menu in DIVI

In de sjablooneditor ziet u een sectie. Open dit gedeelte en pas een verloopachtergrond toe.

Kleur 1: #ffba60
Kleur 2: #ffd6a0
Gradiëntrichting: 90 graden
Startpositie: 50%
Eindstand: 50%

tussenruimte

Verwijder vervolgens standaard alle interne marges (boven en onder).

Binnenste marge Vertex: 0px
Onderste interne marge: 0px

Voeg een nieuwe regel toe

Structuur van de kolom

Om onze bovenste kopbalk te maken, voegen we een nieuwe rij toe aan onze sectie met behulp van de volgende kolomstructuur:

sizing

Open, zonder nog modules toe te voegen, de rij-instellingen en wijzig de formaatinstellingen als volgt:

Aangepaste gootbreedte gebruiken: Ja
Kolomafstand: 1
Maximale breedte: 95%
Maximale breedte: 2 pixels

tussenruimte

Voeg ook aangepaste interne marges (boven en onder) toe.

Binnenste marge Vertex: 15px
Onderste interne marge: 15px

CSS hoofdelement

En om ervoor te zorgen dat de kolommen naast elkaar blijven op kleinere schermformaten, voegen we een regel CSS-code toe aan het hoofdrij-element op het tabblad Geavanceerd.

display: flex;

Voeg de module 'Volg ons op social media' toe aan kolom 1

Voeg sociale netwerken naar keuze toe

Het is tijd om modules toe te voegen, te beginnen met een module 'Volg ons op sociale media' in kolom 1. Voeg de sociale netwerken van uw keuze toe samen met de bijbehorende links.

Achtergrondkleur verwijderen van elk sociaal netwerk

Ga verder door elk van de achtergrondkleuren afzonderlijk van het sociale netwerk te verwijderen.

Pictogram instellingen

Ga dan terug naar de algemene module-instellingen en wijzig de pictogramkleur in het ontwerptabblad.

Pictogramkleur: #26333a

tussenruimte

Voeg ook een bovenmarge toe.

Bovenmarge: 5 px

Voeg de knopmodule toe aan kolom 2

Tekst toevoegen aan knop

In kolom 2 is de enige module die we nodig hebben een Button-module. Voeg een tekst naar keuze toe.

Voeg een link toe

Voeg dan een link toe.

Uitlijning van knoppen

Ga vervolgens naar het tabblad Stijl en wijzig de uitlijning van de knoppen.

Knop uitlijning: rechts

Knop instellingen

We passen ook de knop aan.

Gebruik aangepaste stijlen voor Knop: Ja
Tekstgrootte knop: 14px
Tekstkleur knop: #26333a
Breedte knoprand: 2px
Kleur knoprand: #26333a
Knoprandstraal: 0 pixels

Knoppen voor letterafstand: 4px
Soft Light-knop: vetgedrukte tekst
Stijlknop kopiëren: hoofdletters
Toon knop: ja

tussenruimte

En we zullen de module-instellingen voltooien door interne marges (boven en onder) toe te voegen aan de afstandsinstellingen.

Binnenste marge Vertex: 10px
Onderste interne marge: 10px