Door naar hoofdmenu

Hoe maak je geanimeerde lades op Divi

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

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.

Importeer model divi

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

Sla de wijzigingen in de divi-indeling op

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.

Divi-editor selectie

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

Voeg een divi-modelvoettekst toe

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".

Kies een voorgebouwd divi-model

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

Gebruik een divi-model

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.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

Verwijder onnodige sectie

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.

Divi footer

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.

Wijzig het label van de divi-voettekst

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.

vaste voetlade

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.

Selectie layout divi

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
Confiuration divi-afstand

Sectie opvulling

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

Divi-sectie-afstandsconfiguratie

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.

Voettekst lade divi
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.

Kies pictogram voettekst lade divi
Blurb-ontwerp

Geef vervolgens de presentatietekst als volgt:

  • Achtergrondkleur: # 081540
Wijzig de divi-achtergrond

Werk vervolgens de ontwerpparameters als volgt bij:

  • Pictogramkleur: #eeeeee
  • Cirkelpictogram: JA
  • Cirkelkleur: # 081540
  • Gebruik de lettergrootte van het pictogram: JA
  • Lettergrootte pictogram: 17 pixels
Pas de blurb divi-knop aan
Presentatietekstgrootte

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

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

  • Breedte: 30px
  • Hoogte: 30px

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

Bewerk het ontwerp van de divi-knop
Blurb-positie

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

  • Positie: Absoluut
  • Locatie: Top Center
Wijzig de positie van de divi-knop
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
Return divi-knop

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
Definieer een diviselector

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.

Transform sectie divi

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
Klasse toevoegen heeft transformatie divi

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
Wijzig de positie op de divi-hoek

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.

Verberg sectie op mobiel

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.

Controle zichtbaarheid divi sectie

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.

Modulecode toevoegen

Plak vervolgens de volgende code in het codegebied:

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

.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 );   
Divi-codemodule toevoegen

Wijzigingen opslaan

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

Sla divi-wijzigingen op

Sla ook de wijzigingen op in de thema-generator.

Wijzigingen opslaan

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.

Vertaald uit: elegante thema's

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
0 aandelen
aandeel
gekwetter
Enregistrer