Hoe u een vaste voettekstbalk maakt met Divi

Vaste voettekstbalken kunnen een handige manier zijn om belangrijke informatie op uw Site web op de voorgrond wanneer de gebruiker op elk apparaat interactie heeft met de inhoud van uw pagina. 

Net als bij Divi bestaat een voettekstbalk meestal als een statisch element helemaal onderaan de pagina na de inhoud van de hoofdvoettekst. Ze omvatten zaken als auteursrechtelijk beschermde tekst en pictogrammen voor sociale media. 

Maar als u de inhoud van de voettekstbalk onder aan de pagina niet verbergt, kunt u een aangepaste voettekstbalk maken die onder aan het scherm zweeft terwijl de gebruiker scrolt.

In deze tutorial gaan we een volledig gepersonaliseerde vaste voettekstbalk ontwerpen met behulp van de Divi-themagenerator. Dit is handig om die kleine maar belangrijke stukjes inhoud altijd in het zicht te houden.

Mogelijk resultaat

Hier is een overzicht van de vaste voettekstbalk die we gaan ontwerpen.

Hoe u de vaste voettekstbalksjabloon kunt toevoegen om te downloaden op uw Divi-site

WAARSCHUWING!: Het toevoegen van dit model vervangt de website-sjabloon standaard (als je die hebt) op je Divi-site. We raden aan om het aan een testsite toe te voegen, zodat je niets verprutst op een live site.

Om zelf de vaste voettekstbalksjabloon te importeren Site web, pak het download-zipbestand uit 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 map had website-sjabloon standaardinstelling die u niet wilde overschrijven.

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 themabouwer van Divi kunt u de standaardvoettekst vervangen door een nieuwe door de website-sjabloon Standaard.

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 "Een aangepaste voettekst maken" in de vervolgkeuzelijst.

Hiermee wordt de Model Layout Editor geïmplementeerd, waar u onmiddellijk wordt gevraagd naar de drie keuzes voor hoe u wilt beginnen met bouwen. Selecteer "Build From Scratch".

Deel 2: de vaste voettekstbalk maken

Nu we bewerken vanuit de editor voor sjabloonlay-out, kunnen we beginnen met het ontwerpen van de vaste voettekstbalk. Als u klaar bent, heeft u een vaste voettekstbalk met drie kolommen die klaar zijn voor de inhoud.

Voeg een lay-out met drie kolommen toe aan de lijn

Voeg eerst een indeling met drie kolommen toe aan de rij.

Sectiehoogte

Nadat de drie kolommen zijn toegevoegd, geven we de sectie een gedefinieerde hoogte. Dit is belangrijk om onderaan de pagina ruimte te maken waar de vaste lijn uiteindelijk zal eindigen. We zullen ook de standaard opvulling aan de boven- en onderkant verwijderen.

Om de hoogte en opvulling in te stellen, opent u de sectie-instellingen en werkt u het volgende bij:

• Hoogte: 85px
• Vulling: 0 px hoog, 0 px laag

Lijn instellingen

Nu onze sectie klaar is, zijn we klaar om de rij aan te passen om te dienen als een vaste voettekstbalk. Open de rij-instellingen en werk het volgende bij:

verband

• Achtergrondkleur: # 1a1e36

Grootte en afstand

• Dakgootbreedte: 1
• Breedte: 100%
• Max breedte: 100%
• Vulling: 0px omhoog, 0px omlaag, 3% links, 3% rechts

Aangepaste CSS

Hoewel de rij vaststaat, willen we dat de hoogte van de rij overeenkomt met de hoogte van de bovenliggende sectie, zodat de ruimte onder aan de pagina de rij correct bevat. En we willen ervoor zorgen dat de inhoud van de rij verticaal uitgelijnd blijft. Om dit te doen, voegt u de volgende aangepaste CSS toe aan het hoofdelement van de rij:

Bureau

height: inherit! important; display: flex; align-items: center;

Telefoon

hoogte: erven! belangrijk; weergave: blok;

Vaste positionering

Om de lijn vast te maken zodat deze onder aan het scherm zweeft, moeten we deze als volgt een vaste positie geven onderaan in het midden:

• Positie: vast
• Locatie: lager midden

Deel 2: De inhoud van de vaste voettekstbalk maken

Op dit punt hebben we een vaste voettekstbalk klaar voor inhoud. We kunnen elke gewenste inhoud aan elk van de drie kolommen toevoegen. Maar aangezien dit een voettekst "balk" is die beperkt is tot 85 pixels hoog, moeten we de hoeveelheid inhoud beperken. Om deze reden zullen we een klein menu met een dynamisch logo en 4 menu-items in kolom 1 toevoegen. In kolom 2 zullen we copyright-tekst toevoegen met een dynamisch huidig ​​jaar. In kolom 3 zullen we drie trackingpictogrammen voor sociale media toevoegen.

Voeg een menu toe aan kolom 1

Voeg in kolom 1 een menumodule toe.

Selecteer het menu

Selecteer vervolgens een van de menu's die u al op uw computer heeft aangemaakt Site web. Zorg ervoor dat u de menu-items op 4 of minder houdt.

Voeg het sitelogo toe als dynamische inhoud

Voor het logomenu zullen we dynamisch het sitelogo toevoegen. Klik op het pictogram "Dynamische inhoud gebruiken" terwijl u de muisaanwijzer over het voorbeeldgebied van het logo beweegt. Selecteer vervolgens Sitelogo in de vervolgkeuzelijst.

Verwijder achtergrond

Verwijder vervolgens de standaard menuachtergrond zodat deze transparant is.

menu ontwerp

Op dit punt zijn we klaar om wat ontwerp aan het menu toe te voegen. Voor dit ontwerp houden we het simpel en klein. Werk de volgende ontwerpparameters bij:

• Lettertypemenu: Overpass
• Menutekstkleur: # b59c61
• Sepia-afbeelding: 100%
• Maximale logohoogte: 50px

Voeg copyright-tekst toe aan kolom 2

Zodra het menu aanwezig is, gaat u naar kolom 2 om de copyright-tekst toe te voegen.

Voeg een tekstmodule toe

Voeg een nieuwe tekstmodule toe aan kolom 2.

Voeg dynamisch de huidige datum toe met voor en na tekst

Hier gaan we creatief worden met dynamische inhoud om het huidige jaar in copyrighttekst weer te geven. Dit zorgt ervoor dat het jaar automatisch wordt bijgewerkt gedurende de levensduur van de site.

Om dit te doen, klikt u op het pictogram "Dynamische inhoud gebruiken" en selecteert u "Huidige datum" in de lijst.

Werk in het pop-upvenster Huidige datum het volgende bij:

• voor:
• 01Copyright ©

• na:
• 01| Tous Droits Reservés

• Datum formaat : aangepast
• Aangepaste datumnotatie : 20 jaar

Tekst opmaken

Werk het tekstontwerp en de marge als volgt bij:

• Tekstlettertype: viaduct
• Tekstkleur: # b59c61
• Uitlijning van de tekst: midden
• Marge (alleen telefoon): 10 pixels bovenaan, 10 pixels onderaan

Dit ondersteunt copyright-tekst.

Voeg pictogrammen voor het volgen van sociale media toe aan kolom 3

Voeg in kolom 3 een module voor het volgen van sociale media toe.

Sociale netwerken toevoegen

Voeg op het tabblad Inhoud de nodige sociale netwerken toe aan de site. Voor dit ontwerp gebruiken we er drie.

Instellingen voor het bijhouden van sociale media

Werk vervolgens de ontwerpinstellingen voor alle trackingpictogrammen voor sociale media als volgt bij:

• Module-uitlijning: recht (desktop en tablet), midden (telefoon)
• Icoonkleur: # 1a1e36
• Gebruik aangepaste pictogramgrootte: JA
• Lettergrootte pictogram: 16px (desktop en tablet), 14px (telefoon)

Update social media-instellingen

Om het ontwerp van het individuele sociale netwerkpictogram bij te werken, opent u de instellingen voor het eerste netwerk en werkt u het volgende bij:

• Achtergrondkleur: #ffffff
• Opvulling: 8 pixels aan de rechterkant, 8 pixels aan de linkerkant
• Afgeronde hoeken: 8px

Breid de instellingen voor sociale media uit naar iedereen

Open vervolgens het menu met aanvullende instellingen voor het eerste netwerk en selecteer ' Breid itemstijlen uit " in de lijst. Kies in het pop-upvenster Stijlen uitbreiden de optie Stijlen uitbreiden in ' Deze kolom 'En klik Breid uit .

Hiermee wordt het ontwerp uitgebreid tot de rest van de pictogrammen in de kolom.

Final gedachten

Het toevoegen van een vaste voettekstbalk is in sommige gevallen zinvol. De hoogte van de stang is klein genoeg om niet af te leiden of te veel ruimte in te nemen op de mobiel. En het geeft u de mogelijkheid om belangrijke CTA's toe te voegen voor betere conversies en een vlottere gebruikerservaring.

Voor dit ontwerp wordt ruimte onder aan de pagina gecreëerd door een vaste hoogte voor de sectie in te stellen en vervolgens de vaste lijn de hoogte van de sectie te laten erven (hoewel deze vast is). 

Andere bronnen

Hier is een lijst van ressources extra die u kunnen helpen bij het maken van het ontwerp van uw website met Divi.

• Hoe een aangepaste inlogpagina op Divi te maken
• Hoe een navigatiemodule met volledige breedte op Divi toe te voegen
• Hoe een schuifregelaar op volledig scherm op Divi te maken
• Hoe een ronde teller op Divi toe te voegen