Hoe maak je geanimeerde lades op Divi

Voettekstladen zijn nuttige toevoegingen aan elke website omdat ze extra inhoud opslaan die gemakkelijk toegankelijk is voor gebruikers. Voettekstladen zijn webcontentcontainers (zoals een Divi-sectie) die kunnen worden geopend en gesloten door op een knop te klikken of erover te bewegen. Het is alsof je een kleine voorraad hebt voor premium-inhoud.

In deze tutorial gaan we een zwevende voettekstlade ontwerpen in Divi. We zullen de voettekstlade toevoegen aan het algemene voettekstgebied van de websitesjabloon, zodat de voettekstlade voor de hele site toegankelijk is met de normale voettekstinhoud.

Met het proces dat we gaan gebruiken, kan elke Divi-sectie (en de inhoud ervan) binnen enkele minuten worden geconverteerd naar een voettekstlade.

Hoe u de voettekstladesjabloon aan uw Divi-site kunt toevoegen

Als u deze sjabloon toevoegt, wordt de standaardwebsitesjabloon (als u die heeft) op uw Divi-site vervangen. We raden u aan het toe te voegen aan een testsite, zodat u niets verknoeit op een live site.

Om het vaste voettekstlademodel naar uw eigen website te importeren, unzipt u het zip-downloadbestand om toegang te krijgen tot het JSON-bestand.

Ga dan naar het WordPress-dashboard en ga naar Divi> Theme Builder.

Klik vervolgens op het portabiliteitspictogram rechtsboven op de pagina.

Kies in het portabiliteitsvenster het JSON-bestand dat u zojuist hebt uitgepakt en selecteer de optie 'Back-up downloaden voor importeren', voor het geval u eerder iets in de standaardwebsitesjabloon had dat u niet had. wilde niet vervangen.

Klik vervolgens op de knop Importeren.

Sla ten slotte de wijzigingen in de thema-generator op en geef een livepagina weer om de vaste voettekstbalk te zien.

Nu door naar de tutorial, oké?

Deel 1: een globale voettekst toevoegen

Met de Divi-thema-generator kunt u de standaardvoettekst vervangen door een nieuwe door de standaard websitesjabloon bij te werken.

Om een ​​globale voettekst te maken, gaat u naar het WordPress-dashboard en gaat u naar Divi> Theme Builder. Klik vervolgens op de ruimte "Globale voettekst toevoegen" in de standaardwebsitesjabloon.

Selecteer vervolgens de optie "Globale voettekst bouwen" in de vervolgkeuzelijst.

Voeg een vooraf gedefinieerde lay-out toe aan een globale voettekstlay-out

Hierdoor wordt de Model Layout Editor geïmplementeerd, waar u onmiddellijk wordt gevraagd met de drie keuzes hoe u wilt beginnen met bouwen. Selecteer de optie "Kies een voorgedefinieerde lay-out".

Zoek in het pop-upvenster Laden uit bibliotheek de indeling van de bestemmingspagina voor briefpapier. Klik vervolgens op "Gebruik deze layout".

Verwijder ongewenste inhoud uit vooraf gemaakte lay-out

Zodra de lay-out in de editor is geladen, vouwt u het pop-upvenster Lagen uit door op het pictogram Lagen in het instellingenmenu te klikken. Verwijder vervolgens alle secties van de lay-out behalve de laatste twee.

Verplaats en label de twee secties

Zodra de secties zijn verwijderd, zou u twee secties moeten hebben, een met de titel "Voettekst" en de andere met de titel "Hoe het werkt". Verplaats het gedeelte 'Voettekst' naar de bovenkant van de lay-out.

Verander de bewoording in het onderste gedeelte om "Footer Drawer" te lezen. Dit wordt het gedeelte dat we zullen gebruiken als de inhoud van onze voettekstlade.

Deel 2: De vaste voettekstlade maken

Nu we een van de secties hebben aangewezen als voettekst en de andere als voettekstlade, zijn we klaar om onze vaste voettekstlade te bouwen. Laten we beginnen met het maken van het blurb-pictogram dat we zullen gebruiken om de voettekstlade om te schakelen.

Creatie van de voettekst ladeknop

Voeg een nieuwe regel toe

Voeg in het onderste voettekstgedeelte een nieuwe rij toe aan een kolom.

Label de nieuwe rij "Drawer Button", want dit is de rij die de knop bevat die wordt gebruikt om de lade open en dicht te schakelen. Verplaats vervolgens de regel naar de bovenkant van de sectie.

Rijvulling

Voordat u een module toevoegt, opent u de rij-instellingen en werkt u de opvulling als volgt bij:

• Vulling: 0 px hoog, 0 px laag

Sectie opvulling

Open vervolgens de instellingen in het gedeelte "Voettekstlade" en werk de opvulling als volgt bij:

Om de klikbare knop te maken die de voettekstlade omschakelt, gaan we een blurb-module met een pictogram gebruiken. En we gaan het een unieke druppelvorm geven door de vierkante vorm van de Blurb-podcontainer te combineren met het cirkelpictogram.

Hier is hoe.

Voeg een Blurb-module toe

Voeg een presentatietekstmodule toe aan de regel "Lade-knop" bovenaan de sectie.

Blurb inhoud / icoon

Verwijder vervolgens de standaardtitel en body-inhoud en selecteer het pijlpictogram dat naar de linkerbovenhoek wijst (zie screenshot). We gebruiken het gedeeltelijk gedraaide pictogram omdat we het later gaan roteren.

Blurb-ontwerp

Geef vervolgens de presentatietekst als volgt:

• Achtergrondkleur: # 081540

Werk vervolgens de ontwerpparameters als volgt bij:

• Pictogramkleur: #eeeeee
• Cirkelpictogram: JA
• Cirkelkleur: # 081540
• Gebruik de lettergrootte van het pictogram: JA
• Lettergrootte pictogram: 17 pixels

Presentatietekstgrootte

Geef de module nu een hoogte en een breedte als volgt:

• Breedte: 30px
• Hoogte: 30px

Hierdoor zal het cirkelpictogram overlopen in de tekstcontainer om de vorm van een waterdruppel te creëren.

Blurb-positie

Geef vervolgens de presentatietekst een absolute positie bovenaan in het midden van de sectie.

• Positie: Absoluut
• Locatie: Top Center

Blurb-transformatie-instellingen

Nu kunnen we de transformatie-opties gebruiken om de blurb / het pictogram omhoog te draaien en net boven de sectiecontainer te plaatsen. Wanneer we nu het gedeelte onder het browservenster verbergen, blijft het pictogram zichtbaar / klikbaar.

Update de volgende items:

• Transformeren Vertalen X-as: -50%
• Transformeren Y-as vertaling: -250%
• Transformeren Z-as rotatie: -45 graden

Verwijder vervolgens de standaard pictogramanimatie:

• Afbeelding / pictogramanimatie: geen animatie

We gaan JQuery gebruiken om de lade om te schakelen, dus we moeten de tekst / het pictogram targeten als een klikbaar element met een CSS-klasse die we later in de code zullen gebruiken. Voeg de volgende CSS-klasse toe:

• CSS-klasse: doellade

Instellingen voor voettekst lade sectie

Nu gaan we het gedeelte "Voettekstlade" verbergen met behulp van de vertaaloptie. Open sectie-instellingen en werk het volgende bij:

• Transformeren Vertalen Y-as: 100%

Het mooie van het gebruik van de transformatie hier is dat de percentagewaarden zijn gebaseerd op de werkelijke grootte van het item. Dus 100% op de Y-as is direct gerelateerd aan de hoogte van de sectie (ongeacht wat het op een bepaald moment is). Met andere woorden, het element wordt over de exacte afstand naar beneden verplaatst als zijn eigen hoogte.

Om de "Footer Drawer" weer in beeld te brengen, zullen we de transformatie-vertaling die we zojuist aan de sectie hebben toegevoegd, moeten omkeren. Om dit te doen, moeten we het element targeten met een CSS-klasse en de vertalingstransformatie uitschakelen door op het pictogram te klikken (breng de hele sectie terug naar de oorspronkelijke positie).

Voeg een CSS-klasse toe aan het voettekstgedeelte

Voeg op het tabblad Geavanceerd de volgende CSS-klasse toe:

• CSS-klasse: has-transform

Voettekstlade Vaste positie

Voor de laatste stap moeten we de voettekstlade vastzetten zodat deze (met het pictogram) onder in het browservenster zweeft.

Werk de positie van het gedeelte "Voettekstlade" als volgt bij:

• Positie: vast
• Locatie: linksonder
• Z Index: 13

Schakel mobiele inhoud uit

Omdat je een beperkte hoeveelheid voettekstlade-inhoud hebt die op zowel tablet als telefoon past (vanwege de beperkte schermhoogte), moet je niet-essentiële items op het scherm uitschakelen / verbergen. In dit voorbeeld gaan we de middelste rij van de sectielay-out verbergen.

Open de instellingen van de voorlaatste rij in het gedeelte "Voettekstlade". Werk op het tabblad Geavanceerd de zichtbaarheidsoptie bij om de lijn op de telefoon en tablet uit te schakelen.

Aangepaste code toevoegen

Om de klik- en schakelfunctie in de voettekstlade toe te voegen, moeten we aangepaste CSS en JQuery aan de pagina toevoegen. Maak hiervoor een nieuwe codemodule aan onder de Blurb-module die voor de knop wordt gebruikt.

Plak vervolgens de volgende code in het codegebied:

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   

Wijzigingen opslaan

Denk eraan om de lay-out op te slaan voordat u de editor verlaat.

Sla ook de wijzigingen op in de thema-generator.

Eindresultaat

Nu kunnen we naar elke pagina op uw website gaan om het eindresultaat te zien.

Final gedachten

Ik hoop dat de zwevende voettekstlade je helpt de inhoud op een leuke en toegankelijke manier te promoten. Zoals elke lade kunt u deze vullen met zo ongeveer alles wat u maar kunt bedenken.

Andere bronnen

Hier is een lijst met tutorials die u kunnen helpen meer te bereiken met de interne functies van Divi.

• Hoe maak je een thema toolbox op Divi
• Hoe maak je een geanimeerde promotionele sectie op Divi
• Hoe rasters op Divi aan te passen

Vertaald uit: elegante thema's