Wil je een Contact formulier kleverig bij DIVI?
Met de ingebouwde plakopties van Divi kunt u met slechts een paar klikken verbluffende visuele effecten op uw pagina maken.
U kunt plakkerige effecten toepassen op elk element op uw pagina, maar in deze zelfstudie zullen we ons concentreren op het maken van een Contact formulier plakkerig op elke Divi-pagina die u maakt.
Lees ook onze gids over Hoe maak je een sticky global header in DIVI
Voor dit voorbeeld voegen we afbeeldingen en contactgegevens toe die scrollen als de Contact formulier zal op zijn plaats blijven.
overzicht
Hier is een voorproefje van wat we gaan ontwerpen. Op mobiel passen we geen plakkerig effect toe.
Hoe voeg je een plakkerig contactformulier toe aan je Divi-pagina
Een nieuwe pagina maken met een vooraf gedefinieerde lay-out
Laten we beginnen met een vooraf gedefinieerde lay-out uit de Divi-bibliotheek. Voor dit voorbeeld gebruiken we de contactpagina van de Lay-outpakket voor schoonheidsproducten .
Voeg een nieuwe pagina toe aan je Site web en geef het een titel en selecteer vervolgens de optie 'Divi Builder gebruiken'.
We zullen voor dit voorbeeld een kant-en-klare lay-out uit de Divi-bibliotheek gebruiken, dus selecteer 'Kies lay-out'.
Zoek en selecteer de contactpagina van de lay-out'Schoonheidsproduct'.
Selecteer 'Kies lay-out' om de lay-out aan uw pagina toe te voegen.
We zijn nu klaar om onze tutorial voort te zetten.
De lay-out van het plakkerige contactformulier wijzigen
Voor deze tutorial willen we dat het contactformulier in de linkerkolom (kolom 1) plakkerig blijft terwijl de gebruiker door de andere inhoudsmodules in de rechterkolom (kolom 2) bladert. Dit geeft ons een dynamisch scroll-effect waardoor uw contactformulier opvalt. Laten we beginnen met het wijzigen van onze vooraf gedefinieerde sjabloon.
Zie ook: Hoe maak je een schuif- en push-menu in DIVI
Een nieuwe sectie maken
Voeg een nieuwe sectie toe aan uw pagina.
Voeg vervolgens een nieuwe rij met twee kolommen in. Je kunt deze sectie overal op de pagina toevoegen, andere secties zullen uiteindelijk worden verwijderd naarmate we verder komen in deze tutorial.
Open sectie-instellingen en wijzig de achtergrondkleur zodat deze overeenkomt met het lay-outontwerp:
- Achtergrond: #EEE8E2
Uw plakkerige modules toevoegen aan kolom 1
Voeg een contactformuliermodule toe in kolom 1. Als u deze tutorial volgt of al een contactformulier op uw pagina heeft, kunt u eenvoudig de module 'slepen'contactformulier' bestaande in kolom 1.
Verplaats de tekstmodule Contact bovenaan dit gedeelte. Het zal ook plakkerig zijn. Voeg een witte rand toe aan de tekstinstellingen die past bij de stijl van de lay-out:
- Randbreedte: 20px
- Randkleur: #FFFFFF
De oorspronkelijke lay-out bevatte opvulling tussen de tekst en de rand, maar dat zullen we overslaan omdat het de onderkant van het contactformulier op kleinere schermen afsnijdt.
Voeg uw scrollmodules toe in kolom 2
Voeg in kolom 2 al uw scrollmodules toe. Verplaats in ons geval de twee afbeeldingsmodules, contactgegevens en locatie-informatie naar kolom 2. Nadat u uw modules naar de nieuwe sectie hebt verplaatst, kunt u alle resterende lege secties verwijderen.
Tip: als u meerdere modules tegelijk moet verplaatsen, houdt u de ' toets . ingedruktMei' op het toetsenbord en selecteer de modules die u wilt verplaatsen. Gebruik de moduleverplaatsfunctie om al uw modules tegelijkertijd te verplaatsen.
De grote offset-afbeelding van de lay-out die we hebben gekozen, kan problemen met horizontaal scrollen veroorzaken. Laten we dus enkele instellingen wijzigen om dit probleem op te lossen.
Lees ook: Hoe een globale header te maken met inlogformulier in DIVI
Sectie-instellingen openen. Onder vergevorderd, ga naar Zichtbaarheid en werk vervolgens de horizontale en verticale overloopinstellingen bij:
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Uw pagina zou er nu zo uit moeten zien, met uw plakkerige inhoud in kolom 1 en uw scrollende inhoud in kolom 2.
We zijn klaar voor de laatste stap: het contactformulier sticky maken.
Maak het contactformulier plakkerig
Met onze lay-out kunnen we plakkerige instellingen inschakelen voor ons contactformulier. Selecteer 'Rij-instellingen' en selecteer vervolgens instellingen voor kolom 1.
Ga onder het tabblad Geavanceerd naar 'Scrolleffecten'. Dit is waar we de plakkerige parameters zullen instellen.
- Kleverige positie: blijf bij boven
- Stick Top Offset: 15px
- Onderste plaklimiet: lijn
En dat is alles! Je hebt nu plakkerige instellingen toegevoegd aan kolom 1, waardoor je contactformulier en titel plakkerig zijn terwijl je naar beneden scrolt. U zou de inhoud van kolom 2 naast het contactformulier moeten zien scrollen.
Eindresultaat
Laten we nu eens kijken naar ons plakkerige contactformulier in actie.
Download DIVI nu!!!
Conclusie
Alstublieft ! Dat was het voor dit artikel. Divi's sticky-instellingen zijn een gemakkelijke manier om het uiterlijk van uw contactformulier - of elk ander element van uw pagina - te verbeteren. U kunt plakkerige instellingen toepassen voor elke sectie, rij of module, waardoor zo ongeveer alles op uw Site web kleverig.
Als je meer wilt weten over wat je kunt doen met de plakkerige functies van Divi, bekijk dan onze tutorials. U kunt bijvoorbeeld onze tutorial raadplegen over: Een contactformulier toevoegen aan een algemene koptekst.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
