Divis inbyggda klibbiga alternativ låter dig skapa fantastiska visuella effekter på din sida med bara några få klick. Du kan tillämpa klibbiga effekter på vilket element som helst på din sida, men i den här handledningen kommer vi att fokusera på hur du lägger till ett klibbigt kontaktformulär på alla Divi-sidor du bygger. För det här exemplet kommer vi att lägga till några bilder och kontaktinformation som kommer att rulla när kontaktformuläret förblir på plats.
Smygtitt
Här är en förhandstitt på vad vi kommer att designa. På mobilen tillämpar vi ingen klibbig effekt.
Vad du behöver för att komma igång
Innan vi börjar, installera och aktivera Divi-temat och se till att du har den senaste versionen av Divi på din webbplats.
Nu är du redo att börja!
Hur man lägger till ett klibbigt kontaktformulär på din sida
Skapa en ny sida med en förgjord layout
Låt oss börja med att använda en färdig layout från Divi-biblioteket. För denna design kommer vi att använda kontaktsidan från Skönhetsproduktlayoutpaket.
Lägg till en ny sida på 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 Bläddra i layouter.
Sök efter och välj layout för kontaktsidan för skönhetsprodukter.
Välj Använd den här layouten för att lägga till layouten på din sida.
Nu är vi redo att bygga vår design.
Ändra layouten för Sticky Contact Form
För denna design vill vi att kontaktformuläret i den vänstra kolumnen (kolumn 1) ska vara klibbigt medan användaren bläddrar 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ärdiga mall.
Skapa ett nytt avsnitt
Lägg till en ny vanlig sektion på din sida. Infoga sedan en ny rad med två kolumner. Du kan lägga till det här avsnittet var som helst på sidan, de andra avsnitten kommer så småningom att raderas när vi går igenom handledningen.
Öppna avsnittsinställningarna och ändra bakgrundsfärgen så att den matchar layoutdesignen:
Lägga till dina klibbiga moduler i kolumn 1
Lägg till en kontaktformulärmodul till kolumn 1. Om du följer handledningen eller redan har ett kontaktformulär på din sida kan du helt enkelt dra den befintliga kontaktformulärmodulen över till kolumn 1.
Flytta textmodulen ”Kontakta oss” till toppen av det här avsnittet. Detta blir också klibbigt. Lägg till en vit ram i textinställningarna för att matcha layoutdesignen:
- Kantbredd: 20px
- Kantfärg: #FFFFFF
Den ursprungliga layouten innehöll lite extra utfyllnad mellan texten och kanten, men vi kommer att hoppa över att lägga till denna utfyllnad eftersom den 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 den här designen flyttar du de två bildmodulerna, kontaktinformationen och platsinformationen till kolumn 2. När du har flyttat dina moduler till den nya sektionen kan du ta bort alla återstående tomma sektioner.
Pro-tips: Om du behöver flytta flera moduler samtidigt, håll nere Shift-tangenten och välj de moduler du vill flytta. Använd flyttmodulfunktionen för att flytta alla dina moduler samtidigt.
Den stora offsetbilden från skönhetsproduktens layout kan orsaka vissa problem med horisontell rullning i den här designen, så låt oss ändra ett par inställningar för att fixa detta.
Öppna avsnittsinställningarna. Under Avancerat, navigera till Synlighet och uppdatera sedan inställningarna för horisontell och vertikal översvämning:
- Horisontellt överflöde: Dold
- Vertikalt överflöde: Dold
>Nu ska din sida se ut ungefär så här, med ditt klibbiga innehåll i kolumn 1 och ditt rullande innehåll i kolumn 2.
Vi är redo att gå vidare till det sista steget: att göra kontaktformuläret klibbigt.
Gör kontaktformuläret klibbigt
Med vår layout på plats kan vi aktivera de klibbiga inställningarna för vårt kontaktformulär. Välj Radinställningar och välj sedan inställningarna för kolumn 1.
Under fliken Avancerat, navigera till Scroll Effects. Här kommer vi att lägga till de klibbiga inställningarna. Den klibbiga designen med två kolumner fungerar inte bra på mobila enheter, så vi kommer bara att ändra följande alternativ för skrivbordslayouten.
- Sticky Position: Håll dig till toppen
- Sticky Top Offset: 15px
- Ställ in den nedre klibbiga gränsen till avsnitt.
Och det är allt! Nu har du lagt till de klibbiga inställningarna i kolumn 1, vilket gör ditt kontaktformulär och rubrik klibbig när du bläddrar igenom 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.
Slutgiltiga tankar
Divis klibbiga inställningar är ett enkelt sätt att lyfta utseendet på ditt kontaktformulär – eller något annat element på din sida.