Maak een balk promotie animatie voor uw paginasjabloon in Divi kan een geweldige manier zijn om gestroomlijnde producten en aanbiedingen te adverteren zonder afhankelijk te zijn van een plug-in. Met behulp van de krachtige ontwerpfuncties van Divi kunt u visueel de promotie wanneer u een sjabloon bewerkt in Divi Theme Builder. Vervolgens, zodra het model klaar is, gaat de balk eraf promotie verschijnt op elke pagina die aan deze sjabloon is toegewezen. 

We laten u ook zien hoe u de promotiebalk vast (of plakkerig) maakt.

Wat je nodig hebt om te beginnen

Om te beginnen, moet je om het Divi-thema te installeren en activeren . Zorg ervoor dat u de nieuwste versie van Divi heeft.

U hebt ook ten minste één pagina nodig die is gemaakt met Divi Builder voor testdoeleinden, die wordt beïnvloed door de promotiebalksjabloon.

Maak een animatiebalk aan de bovenkant van een paginasjabloon

Maak een nieuwe sjabloon

Ga vanuit het WordPress-dashboard naar Divi> Themagenerator. Klik vervolgens op het vak "Een nieuwe sjabloon toevoegen" om een ​​nieuwe sjabloon te maken.

Wijs de sjabloon toe aan de pagina ('s) waarop de promotiebalk moet worden weergegeven.

Klik in de nieuwe sjabloon op het vak "Aangepaste body toevoegen" en selecteer "Build Custom Body".

OPMERKING: we voegen de promotiebalk toe aan het bodygedeelte van het model (niet de koptekst) zodat deze kan werken met zowel de standaard koptekst van Divi als alle kopteksten custom die u later kunt toevoegen.

Selecteer vervolgens de optie "Build From Scratch".

De promotiebalk toevoegen aan het model

In de sjabloonlay-outeditor kunnen we beginnen met het maken van de promotiebalk met Divi Builder.

Begin met het toevoegen van een rij met één kolom aan de gewone sectie.

Lijn instellingen

Voordat u een module toevoegt, werkt u de rijparameters als volgt bij:

• Verloop achtergrond links: # 4a42ec
• Rechter achtergrondverloop: # 521d91
• Richting van de helling: 90eg
• Gebruik een aangepaste gootbreedte: JA
• Dakgootbreedte: 1
• Breedte: 100%
• Maximale breedte: 100%
• Bekleding: 0px bovenaan, 0px onderaan

Dit ondersteunt de achtergrondkleur en breedte van de promotiebalk die we maken.

Kolomparameters

Voordat u de rijinstellingen verlaat, klikt u op om de kolominstellingen te openen. Voeg vervolgens de volgende aangepaste CSS toe aan het hoofdkolomelement:

display: flex;align-items: center;justify-content: center;

Deze CSS gebruikt de flex-eigenschap om de inhoud (of modules) in de kolom om horizontaal (naast elkaar) te stapelen. Het centreert de modules ook verticaal en horizontaal in de kolom. De reden dat we het op deze manier doen, is om te voorkomen dat we meerdere kolomrijstructuren moeten gebruiken die op mobiel op elkaar worden gestapeld. Met deze configuratie wordt de inhoud blijft horizontaal uitgelijnd over alle browserbreedten.

We zijn nu klaar om toe te voegen inhoud naar de promotiebalk.

Blurb-module toevoegen

Voor de inhoud van dit promotievoorbeeld zullen we een presentatiemodule met een klein pictogram en een tekstblog met een knop aan de rechterkant (net als de promotiebalk op Elegantthemes.com) opnemen.

Klik op de grijze cirkel plus het icoon in de rij en voeg een presentatiemodule toe.

Voer de volgende informatie in voor de inhoud van de presentatietekst:

• Titel: [voer de tekst van de promotie in]
• Gebruik het pictogram: JA
• Icoon: cadeau-icoon (zie screenshot)

Werk de instellingen voor het presentatieontwerp als volgt bij:

• Pictogramkleur: # ff4a9e
• Afbeelding / locatie van pictogrammen: links
• Gebruik de lettergrootte van het pictogram: JA
• Pictogramlettergrootte: 16px
• Teksttitelgrootte: 16px (desktop), 14px (telefoon)
• Hewight-titelregel: 1.3em
• Max breedte: 230px (alleen telefoon)
• Vulling: bovenkant 10px
• Animatiestijl: dia
• Animatierichting: rechts
• Animatievertraging: 250ms

De knopmodule toevoegen

Voeg vervolgens een knopmodule toe onder de Blurb-module. Vanwege de flex-eigenschap wordt de module rechts van de blurb weergegeven in plaats van eronder.

Werk de knopontwerpparameters als volgt bij:

• Gebruik aangepaste stijlen voor Knop: JA
• Tekstgrootte knop: 15px (desktop), 13px (telefoon)
• Knoptekstkleur: #ffffff
• Breedte van de knoprand: 0px
• Straal van de rand van de knop: 20px
• Lettergewicht: semi-vetgedrukt

• Marge (desktop): 20px aan de linkerkant
• Marge (telefoon): 10px aan de linkerkant
• Bekleding (kantoor): 0px bovenaan, 0px onderaan
• Vulling (telefoon): 2px bovenaan, 2px onderaan, 8px links, 8px rechts
• Animatiestijl: Bounce
• Animatievertraging: 1000ms

Sectie-instellingen

Om het ontwerp van de promotiebalk te voltooien, werkt u de sectie met de promotiebalk als volgt bij:

• Bekleding: 0px bovenaan, 0px onderaan
• Animatiestijl: Bounce
• Animatierichting: Omlaag
• Animatieduur: 500ms
• Animatievertraging: 250ms
• Animatie Startdekking: 100%
• Z-Index: 999

Toevoegen van de volledige publicatie-inhoudsmodule

Op dit punt is de promotiebalk klaar. Maar aangezien dit een sjabloon is, moeten we ervoor zorgen dat we de module voor het plaatsen van inhoud toevoegen om de inhoud van de pagina ('s) met deze sjabloon weer te geven.

Voor pagina's die zijn gebouwd (of zullen worden gebouwd) met Divi Builder, wilt u een berichtinhoudsmodule over de volledige breedte gebruiken om het inhoudsgebied te maximaliseren.

(OPMERKING: voor pagina's die de standaardeditor gebruiken, wil je een standaard berichtinhoudsmod in een gewone sectie gebruiken om standaard een vergelijkbare maximale breedte van 1080px te bereiken.)

Voeg een sectie met volledige breedte toe

Voeg onder de sectie met uw promotiebalk een sectie over de volledige breedte toe.

Voeg een inhoudsmodule in Fullwidth-indeling toe

Selecteer vervolgens de module Fullwidth Post Content.

Het is min of meer dat. Zorg er nu voor en bewaar de lay-out voordat u de editor verlaat.

Sla vervolgens de wijzigingen op voor de themabouwer.

Eindresultaat

Avant

Dit is nu de pagina voordat u het model met de promotiebalk toewijst.

Après

En hier is dezelfde pagina met de nieuwe sjabloon met de promobalk.

Maak de promotiebalk plakkerig

Om de promotiebalk onder de standaardkop van Divi te laten passen, kunnen we een eenvoudig CSS-fragment toevoegen aan het gedeelte met de promotiebalk.

position: fixed;width: 100%;

Open de sectie-instellingen en voeg de volgende CSS-code toe aan het hoofdbureaubladelement:

Voeg vervolgens de volgende CSS-code toe aan het hoofdtabletelement:

position: relative;

Controleer nu het resultaat.

Voor eerdere conversies kunt u ook de link-URL aan de hele rij toevoegen, onder de optie Rij-instellingen.

Final gedachten

In deze zelfstudie hebben we u laten zien hoe u een promobalk (helemaal opnieuw) ontwerpt met Divi Theme Builder. De promotiebalk is compleet met meerdere animaties en ontwerpen om deze echt zichtbaar te maken bezoekers. U kunt zelfs de promobalk repareren terwijl u naar beneden scrolt voor nog meer zichtbaarheid. En met de mogelijkheid om te bepalen waar de promotiebalk op uw site wordt geplaatst, is de app buitengewoon handig.