Varje webbplats behöver en kontaktsektion, men det betyder inte att du måste välja en standarddesign. Med Divis rullningseffekter kan du skapa en flytande kontaktdel som kommer att sticka ut. Förbättra din användarinteraktion med en vertikal rullande kontaktsektionslayout som bjuder in besökare att interagera med din kontakt~~POS=TRUNC formulär~~POS=HEADCOMP. I den här artikeln visar vi dig hur du skapar en flytande kontaktsektion i full bredd som du kan lägga till på vilken sida som helst. Du kan till och med lägga till den överst i en sidfot som omfattar hela webbplatsen med Divi Theme Builder.
Nedan hittar du en gratis nedladdningsbar mapp med JSON-layouten att ladda upp till ditt eget Divi-bibliotek. Vi har också inkluderat en PSD-mall som hjälper dig att återskapa kortbakgrunden, samt en SVG av kortstiftet så att du kan anpassa den med dina egna färger.
Skapa en elementstruktur
I denna design kommer vi att använda en bakgrundsbild som är en representation på Google Map av platsen du vill visa upp. Du kan göra detta med Photoshop eller någon annan bildredigerare.
Lägg till en ny sektion
Nu är det dags att börja skapa den flytande kontaktsektionen med Divi Builder! Det första vi kommer att göra är att öppna en ny eller befintlig sida och lägga till en ny sektion.
På innehållsfliken lägger du till kortbakgrunden som du skapade i Photoshop.
- Bakgrundsbild: din redigerade karta
avstånd
Anpassa sedan inställningarna för sektionsavstånd på designfliken.
- Övre och nedre marginal: 50vh
- Botten stoppning: 0vw
synlighet
Ställ sedan in överflöden på synliga.
- Horisontellt och vertikalt överflöde: synligt
Placera
Slutligen, ställ in Z-indexet för avsnittet till 10.
- Z-index: 10
Lägg till en ny rad
Kolumnstruktur
Nu är det dags att lägga till några element. Lägg först till en rad med 2 kolumner.
dimensionering
Öppna linjeinställningar och justera storleken enligt följande.
- Bredd
- Kontor: 90%
- Tablet och telefon: 80%
- Max bredd: 90%
synlighet
Klicka på fliken Avancerat och justera sedan brädden.
- Horisontellt och vertikalt överflöde: synligt
Placera
Slutför radinställningarna genom att ändra positionsinställningarna.
- Position: Relativ
- Offset Ursprung: Överst till vänster
- Vertikal förskjutning
- Desktop: -8vw
Inställningar för kolumn 1
Bakgrund
Innan vi lägger till moduler måste vi utforma de enskilda kolumnerna. Lägg till en bakgrundsfärg i kolumn 1.
- Enfärgad färg: #25274d
Förband
Justera avståndsinställningarna härnäst.
- Topp- och bottenstoppning
- Desktop och surfplatta: 7vw
- Vänster och höger stoppning
- Desktop: 3vw
- Surfplatta och telefon: 6vw
Border
Lägg sedan till några rundade hörn till kantinställningarna.
- Rundade hörn: 10px alla fyra hörnen
Ruleffekter
Sist men inte minst, använd lite vertikal rörelse i inställningarna för rullningseffekter. Detta kommer att hjälpa oss att skapa en flytande effekt.
- Scroll Transform Effects: Vertical Motion
- Vertikal rörelse/skrivbordsuppsättning
- Starta offset: 4
- Mittoffset: 0 (vid 50 %)
- Avsluta offset: -4
- Vertikal rörelse / surfplatta och telefonset
- Starta offset: 4
- Mittoffset: 0 (vid 40 % och 60 %)
- Slutförskjutning: -3
- Trigger motion-effekt: mitt i elementet
Inställningar för kolumn 2
Placera
Låt oss nu gå vidare till inställningarna i den andra kolumnen. Justera positionsinställningarna därefter.
- Position: Relativ
- Skift Ursprung: Överst till vänster
- Vertikal offset
- Kontor: 25vw
Rullaffekter
Vi lägger också till vertikal rörelse i denna kolumn.
- Scroll Transform Effects: Vertikal rörelse
- Ställ in vertikal/skrivbordsrörelse
- Startförskjutning: 2
- Genomsnittlig offset: 0 (vid 50%)
- Slutförskjutning: -2
- Ställ in vertikal rörelse / surfplatta och telefon
- Startförskjutning: 0
- Genomsnittlig offset: 0 (vid 50%)
- Slutförskjutning: -2
- Motion Effect Trigger: Element Top
Lägg till en textmodul i 1-kolumnen
Innehåll
Det är dags att lägga till moduler, börja med en textmodul i kolumn 1. Lägg till H2-innehåll som du väljer.
titeltext
Byt till designfliken och stil H2-texten enligt följande.
- Titelnivå: H2
- Typsnitt: Palanquin Dark
- Teckensnittsvikt: fetstil
- Teckensnittstyp: TT
- Färg: Gul #ffd868
- storlek
- Kontor: 5vw
- Tablet: 10vw
- Telefon: 12vw
- Bokstavsavstånd: 4px
Lägg till kontaktformulärmodulen i kolumn 1
Innehåll
Lägg till en under textmodulen kontakt~~POS=TRUNC formulär~~POS=HEADCOMP. Det här är fälten vi använder:
- namn
- E-postadress
- material
- Meddelande
spam skydd
Innan du stylar modulen av kontakt~~POS=TRUNC formulär~~POS=HEADCOMP. aktivera spamskydd och anslut ditt ReCaptcha-konto.
- Använd en spamskyddstjänst: Ja
- Tjänsteleverantör: ReCaptcha
- Välj ett konto
fält
Byt till designfliken och stil fälten enligt följande.
- Bakgrundsfärg: Mörkblå #25274d
- Textfärg: Ljusgrå #d1d1d1
- Fokus bakgrundsfärg: Mörkblå #25274d
- Fokustextfärg: ljusgrå #d1d1d1
- Typsnitt: Palanquin
- Stil: TT
- Textstorlek
- Kontor: 0.9vw
- Tablet: 2vw
- Telefon: 3vw
- Bokstavsavstånd: 1px
knapp
Stil sedan knappen.
- Anpassade stilar: Ja
- Textstorlek: 20px
- Textfärg: Mörkblå #25274d
- Bakgrundsfärg: gul #ffd868
- Kantradie: 7px
- Ikonfärg: Mörkblå #25274d
- Övre marginal: 5px
dimensionering
Vi ändrar sedan storleksparametrarna.
- Bredd: 100%
- Max bredd: 100%
avstånd
Vi kommer även att lägga till toppstoppning.
- Övre stoppning: 4vw
gräns
Slutför modulinställningarna genom att anpassa gränsinställningarna.
- Rundade hörningångar: 6px vid alla fyra hörnen
- Ingångskantstilar: Alla fyra sidorna
- Ingångskantens bredd: 2px
- Ingångar Kantfärg: gul #ffd868
Lägg till spårningsmodulen för sociala medier i kolumn 2
Innehåll
Flytta till kolumn 2 och lägg till en modul för sociala medier. Använd alla sociala nätverk du behöver.
Lien
Lägg till länkar till relevanta nätverk innan styling.
Bakgrund till artikeln
Öppna nu det första sociala nätverket och ändra bakgrundsfärgen.
- Färg: Mörkblå #25274d
Objekt ikon
På designfliken för samma element, ändra ikoninställningarna enligt följande.
- Färg: Gul #ffd868
- Ikon teckenstorlek
- Desktop och surfplatta: 31 px
- Telefon: 26px
Objektavstånd
Lägg sedan till en liten marginal för att separera ikonerna från varandra.
- Höger marginal: 1vw
Kopiera och klistra in objektstilar
För att utforma de återstående sociala nätverken, gå tillbaka till huvudinnehållsfönstret och kopiera objektstilarna från den första ikonen. Klistra sedan in objektstilarna i de återstående sociala nätverken.
uppriktning
Byt till huvuddesignfliken och se till att modulen är vänsterjusterad.
- Justering av modulen: vänster
dimensionering
Justera sedan modulstorleken.
- Bredd: 100%
avstånd
Radera även all standardutfyllnad.
- Topp, botten, vänster och höger stoppning: 0vw
gräns
Lägg slutligen till rundade hörn i kantinställningarna. Detta kommer att justera gränserna för alla ikoner på en gång.
- rundade hörn
- Överst till vänster och höger: 7 pixlar
- Nederst till vänster och höger: 0px
Lägg till en textmodul i 2-kolumnen
Innehåll
Lägg till ytterligare en textmodul under modulen sociala medier. Lägg till innehåll efter eget val. Vi har lagt till två adresser, ett telefonnummer och en e-post. Använd fetstil i rubriken på varje objekt med stora bokstäver.
- Högkvarter : 1587 Sukhumvit Soi 21, Bangkok, Thailand.
- Försäljningspunkt : Emporium Mall, 2:a våningen
- telefon: (321) 564 2398
- e-post: [e-postskyddad]
sammanhang
Ändra bakgrundsfärgen för modulen.
- Färg: Mörkblå #25274d
Texte
Byt till designfliken och stil texten.
- Typsnitt: Palanquin
- Färg: Gul #ffd868
- Storlek: 18px
avstånd
Lägg också till anpassade avståndsvärden.
- Toppmarginal
- Kontor: -60px
- Surfplatta och telefon: -50 pixlar
- Topp, botten, vänster och höger stoppning
- Kontor: 3vw
- Tablet: 6vw
- Telefon: 8vw
gräns
Och slutför modulen genom att lägga till rundade hörn i kantinställningarna. Det är allt!
- Rundade hörn: 10 pixlar uppe till höger, nere till vänster och nedre höger.
undersökningen
Nu när vi har återskapat avsnittet med flytande kontakter, ta en sista titt på hur det ser ut på olika skärmstorlekar.
Ytterligare resurser
Detta är medel kan vara ett komplement till det du just har läst. De kan måste användas som tillägg eller av de som inte har Divi-tema.
- Hur man lägger till en popup kontaktformulär på Wordpress
- Hur man lägger till ett rullgardinsformulär i den globala rubriken på Divi
- 5 plugins för att skapa kontaktformulär
att avsluta
Att använda de nya Divi-rullningseffekterna kan göra vilken standardlayout som helst till en tilltalande design. Genom att skapa din egen bakgrund har du mer kontroll över utseendet på den färdiga designen. Om du har några frågor eller förslag, lämna en kommentar i kommentarsfältet nedan!
