Kunne du tænke dig at oprette en Kontaktformular klæbrig i DIVI?
Divi's indbyggede sticky-muligheder giver dig mulighed for at skabe fantastiske visuelle effekter på din side med blot et par klik.
Du kan anvende sticky-effekter på ethvert element på din side, men i denne vejledning vil vi fokusere på, hvordan du opretter en Kontaktformular klæbende på enhver Divi-side, du opretter.
Læs også vores vejledning om Sådan opretter du en klæbrig global header i DIVI
I dette eksempel vil vi tilføje billeder og kontaktoplysninger, som vil rulle igennem, mens Kontaktformular vil blive på plads.
undersøgelse
Her er en forhåndsvisning af, hvad vi skal designe. På mobil anvender vi ikke en klæbrig effekt.
Sådan tilføjer du en klæbrig kontaktformular til din Divi-side
Opret en ny side med et foruddefineret layout
Lad os starte med at bruge et foruddefineret layout fra Divi-biblioteket. Til dette eksempel vil vi bruge kontaktsiden på Skønhedsproduktlayoutpakke .
Tilføj en ny side til din Websted og giv den en titel, og vælg derefter muligheden 'Brug Divi Builder'.
Vi vil bruge et præ-lavet layout fra Divi-biblioteket til dette eksempel, så vælg 'Vælg layout«.
Find og vælg kontakt side af layoutet'Skønhedsprodukt«.
Vælg 'Vælg layout' for at tilføje layoutet til din side.
Vi er nu klar til at fortsætte vores tutorial.
Ændring af sticky kontaktformularlayout
Til denne vejledning ønsker vi, at kontaktformularen i venstre kolonne (kolonne 1) forbliver klistret, mens brugeren ruller gennem de andre indholdsmoduler i højre kolonne (kolonne 2). Dette vil give os en dynamisk rulleeffekt, der får din kontaktformular til at skille sig ud. Lad os starte med at ændre vores foruddefinerede skabelon.
Se også: Sådan opretter du en glidende og push-menu i DIVI
Opret en ny sektion
Tilføj en ny sektion til din side.
Indsæt derefter en ny række med to kolonner. Du kan tilføje denne sektion hvor som helst på siden, andre sektioner vil i sidste ende blive fjernet, efterhånden som vi kommer videre gennem denne tutorial.
Åbn sektionsindstillinger og skift baggrundsfarven, så den matcher layoutdesignet:
- Baggrund: #EEE8E2
Tilføjelse af dine klæbrige moduler til kolonne 1
Tilføj et kontaktformularmodul i kolonne 1. Hvis du følger denne vejledning eller allerede har en kontaktformular på din side, kan du blot trække modulet 'kontaktformular' findes i kolonne 1.
Flyt tekstmodulet Kontakt os øverst i dette afsnit. Det vil også være klistret. Tilføj en hvid kant i tekstindstillingerne for at matche layoutets stil:
- Kantbredde: 20px
- Kantfarve: #FFFFFF
Det originale layout inkluderede polstring mellem teksten og rammen, men det springer vi over, fordi det afskærer bunden af kontaktformularen på mindre skærme.
Tilføj dine rullemoduler i kolonne 2
Tilføj alle dine rullemoduler i kolonne 2. I vores tilfælde skal du flytte de to billedmoduler, kontaktoplysninger og placeringsoplysninger til kolonne 2. Når du har flyttet dine moduler til den nye sektion, kan du slette eventuelle resterende tomme sektioner.
Tip: Hvis du skal flytte flere moduler på samme tid, skal du holde ' tasten nedeMaj' på tastaturet og vælg de moduler, du vil flytte. Brug modulflytningsfunktionen til at flytte alle dine moduler på samme tid.
Det store offsetbillede af det layout, vi har valgt, kan forårsage problemer med vandret rulning. Så lad os ændre nogle indstillinger for at løse dette problem.
Læs også: Sådan opretter du global header med login-formular i DIVI
Åbn sektionsindstillinger. Under avanceret, gå til Synlighed, og opdater derefter indstillingerne for vandret og lodret overløb:
- Vandret overløb: skjult
- Lodret overløb: skjult
Din side skulle nu se sådan ud med dit klæbrige indhold i kolonne 1 og dit rullende indhold i kolonne 2.
Vi er klar til at tage det sidste skridt: at gøre kontaktformularen klæbrig.
Gør kontaktformularen klæbrig
Med vores layout på plads, kan vi aktivere klæbrige indstillinger for vores kontaktformular. Vælg 'Rækkeindstillinger', og vælg derefter kolonne 1-indstillinger.
Under fanen Avanceret skal du navigere til 'Ruleffekter'. Det er her, vi indstiller de klæbrige parametre.
- Sticky Position: Hold dig til toppen
- Stick Top Offset: 15px
- Nederste klæbegrænse: Linje
Og det er alt! Du har nu tilføjet klæbende indstillinger til kolonne 1, hvilket gør din kontaktformular og titel klæbrig, mens du ruller ned på siden. Du bør se indholdet af kolonne 2 rulle ved siden af kontaktformularen.
Endelig resultat
Lad os nu tage et kig på vores klæbrige kontaktformular i aktion.
Download DIVI nu!!!
Konklusion
Så! Det var det for denne artikel. Divis klæbrige indstillinger er en nem måde at forbedre udseendet af din kontaktformular – eller ethvert andet element på din side. Du kan anvende klæbende indstillinger for enhver sektion, række eller modul, og gengive stort set alt på din Websted klæbrig.
Hvis du vil lære mere om, hvad du kan gøre med Divis klæbrige funktioner, så tjek vores tutorials. Du kan for eksempel konsultere vores tutorial om Sådan tilføjer du en kontaktformular til en global header.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
