Vill du skapa en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP klibbig i DIVI?
Divis inbyggda klibbiga alternativ låter dig skapa fantastiska visuella effekter på din sida med bara några klick.
Du kan använda klibbiga effekter på alla element på din sida, men i den här handledningen kommer vi att fokusera på hur du skapar en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP sticky på alla Divi-sidor du skapar.
Läs också vår guide om Hur man skapar en klibbig global rubrik i DIVI
För det här exemplet kommer vi att lägga till bilder och kontaktinformation som rullar som kontakt~~POS=TRUNC formulär~~POS=HEADCOMP kommer att stanna på plats.
undersökningen
Här är en förhandstitt på vad vi kommer att designa. På mobilen tillämpar vi ingen klibbig effekt.
Hur man lägger till ett klibbigt kontaktformulär på din Divi-sida
Skapa en ny sida med en fördefinierad layout
Låt oss börja med att använda en fördefinierad layout från Divi-biblioteket. För det här exemplet kommer vi att använda kontaktsidan för Skönhetsproduktlayoutpaket .
Lägg till en ny sida till din webbplats och ge den en titel, välj sedan alternativet 'Använd Divi Builder'.
Vi kommer att använda en färdig layout från Divi-biblioteket för det här exemplet, så välj 'Välj layout".
Hitta och välj kontaktsida av layouten'Skönhetsprodukt".
Välj 'Välj layout' för att lägga till layouten på din sida.
Vi är nu redo att fortsätta vår handledning.
Ändra layout för sticky kontaktformulär
För den här handledningen vill vi att kontaktformuläret i den vänstra kolumnen (kolumn 1) ska förbli klibbigt medan användaren rullar igenom de andra innehållsmodulerna i den högra kolumnen (kolumn 2). Detta kommer att ge oss en dynamisk rullningseffekt som gör att ditt kontaktformulär sticker ut. Låt oss börja med att ändra vår fördefinierade mall.
Se även: Hur man skapar en skjut- och tryckmeny i DIVI
Skapa ett nytt avsnitt
Lägg till ett nytt avsnitt på din sida.
Infoga sedan en ny rad med två kolumner. Du kan lägga till den här sektionen var som helst på sidan, andra sektioner kommer så småningom att tas bort när vi går igenom den här handledningen.
Öppna avsnittsinställningar och ändra bakgrundsfärgen för att matcha layoutdesignen:
- Bakgrund: #EEE8E2
Lägga till dina klibbiga moduler i kolumn 1
Lägg till en kontaktformulärmodul i kolumn 1. Om du följer den här handledningen eller redan har ett kontaktformulär på din sida kan du helt enkelt dra modulen 'Kontaktformulärsom finns i kolumn 1.
Flytta textmodulen Kontakta oss överst i detta avsnitt. Det blir också kladdigt. Lägg till en vit ram i textinställningarna för att matcha layoutens stil:
- Kantbredd: 20px
- Kantfärg: #FFFFFF
Den ursprungliga layouten inkluderade utfyllnad mellan texten och kanten, men vi hoppar över det eftersom det skär av botten av kontaktformuläret på mindre skärmar.
Lägg till dina rullningsmoduler i kolumn 2
I kolumn 2 lägger du till alla dina rullningsmoduler. För vårt fall, flytta de två bildmodulerna, kontaktinformationen och platsinformationen till kolumn 2. När du har flyttat dina moduler till den nya sektionen kan du ta bort eventuella kvarvarande tomma sektioner.
Tips: om du behöver flytta flera moduler samtidigt, håll ned knappen 'Maj' på tangentbordet och välj de moduler du vill flytta. Använd modulflyttningsfunktionen för att flytta alla dina moduler samtidigt.
Den stora offsetbilden av layouten vi har valt kan orsaka problem med horisontell rullning. Så låt oss ändra några inställningar för att lösa detta problem.
Läs också: Hur man skapar global header med inloggningsformulär i DIVI
Öppna avsnittsinställningar. Under advanced, gå till Synlighet och uppdatera sedan inställningarna för horisontell och vertikal översvämning:
- Horisontellt spill: dold
- Vertikalt spill: dold
Din sida ska nu se ut så här, med ditt klibbiga innehåll i kolumn 1 och ditt rullande innehåll i kolumn 2.
Vi är redo att ta det sista steget: göra kontaktformuläret klibbigt.
Gör kontaktformuläret klibbigt
Med vår layout på plats kan vi aktivera klibbiga inställningar för vårt kontaktformulär. Välj 'Radinställningar' och välj sedan inställningar för kolumn 1.
Under fliken Avancerat, navigera till "Rullningseffekter". Det är här vi kommer att ställa in de klibbiga parametrarna.
- Sticky Position: Håll dig till toppen
- Stick Top Offset: 15px
- Nedre klibbgräns: Linje
Och det är allt! Du har nu lagt till klibbiga inställningar i kolumn 1, vilket gör ditt kontaktformulär och rubrik klibbig när du rullar ner på sidan. Du bör se innehållet i kolumn 2 rulla bredvid kontaktformuläret.
Slutresultat
Låt oss nu ta en titt på vårt klibbiga kontaktformulär i aktion.
Ladda ner DIVI nu!!!
Slutsats
Så ! Det var allt för den här artikeln. Divis klibbiga inställningar är ett enkelt sätt att förbättra utseendet på ditt kontaktformulär – eller någon annan del av din sida. Du kan tillämpa klibbiga inställningar för vilken sektion, rad eller modul som helst och rendera nästan vad som helst på din webbplats klibbig.
Om du vill lära dig mer om vad du kan göra med Divis klibbiga funktioner, kolla in våra tutorials. Du kan till exempel konsultera vår handledning om Hur man lägger till ett kontaktformulär i en global rubrik.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
