Hver nettside trenger en kontaktseksjon, men det betyr ikke at du må gå for et standarddesign. Med Divis rulleeffekter kan du lage en flytende kontaktdel som vil skille seg ut. Forbedre brukerinteraksjonen din med et vertikalt rullende kontaktseksjonsoppsett som inviterer besøkende til å samhandle med din Kontaktskjema. I denne artikkelen viser vi deg hvordan du lager en flytende kontaktseksjon i full bredde som du kan legge til på hvilken som helst side. Du kan til og med legge den til på toppen av en bunntekst for hele nettstedet med Divi Theme Builder.
Nedenfor finner du en gratis nedlastbar fil med JSON-layout som skal lastes opp til ditt eget Divi-bibliotek. Vi har også tatt med en PSD-mal som hjelper deg med å gjenskape kartbakgrunnen, samt en kartnål SVG slik at du kan tilpasse den med dine egne farger.
Lag en elementstruktur
I dette designet skal vi bruke et bakgrunnsbilde som er en representasjon på Google Map av stedet du vil vise frem. Du kan gjøre dette med Photoshop eller et annet bilderedigeringsprogram.
Legg til en ny seksjon
Nå er det på tide å begynne å lage den flytende kontaktseksjonen med Divi Builder! Det første vi skal gjøre er å åpne en ny eller eksisterende side og legge til en ny seksjon.
I innholdsfanen legger du til bakgrunnen til kartet du opprettet i Photoshop.
- Bakgrunnsbilde: ditt modifiserte kart
avstanden
Deretter tilpasser du innstillingene for seksjonsavstand i kategorien design.
- Øvre og nedre margin: 50vh
- Bunnpolstring: 0vw
synlighet
Sett deretter overløpene til synlige.
- Horisontalt og vertikalt overløp: synlig
Stilling
Til slutt setter du Z-indeksen til seksjonen til 10.
- Z-indeks: 10
Legg til en ny linje
Kolonne struktur
Nå er det på tide å legge til noen få ting. Først legger du til en rad med to kolonner.
dimensjonering
Åpne linjeparametrene og juster størrelsen på følgende måte.
- Bredde
- Kontor: 90%
- Nettbrett og telefon: 80%
- Maks bredde: 90%
synlighet
Klikk på den avanserte fanen og juster deretter overløpene.
- Horisontalt og vertikalt overløp: synlig
Stilling
Fullfør radinnstillingene ved å endre posisjonsinnstillingene.
- Stilling: Relativ
- Offset opprinnelse: øverst til venstre
- Vertikal forskyvning
- Skrivebord: -8vw
Innstillinger for kolonne 1
Bakgrunn
Før du legger til moduler, må vi style de individuelle kolonnene. Legg til en bakgrunnsfarge i kolonne 1.
- Ensfarget: # 25274d
Mellomrom
Juster avstanden innstillinger neste.
- Topp- og bunnpolstring
- Desktop og nettbrett: 7vw
- Polstring av venstre og høyre
- Skrivebord: 3vw
- Nettbrett og telefon: 6vw
Border
Deretter legger du til noen avrundede hjørner i grenseinnstillingene.
- Avrundede hjørner: 10x alle fire hjørner
Rulleeffekter
Sist men ikke minst, bruk litt vertikal bevegelse i innstillingene for rulleeffekter. Dette vil hjelpe oss å skape en flytende effekt.
- Rull Transform Effects: Vertical Motion
- Vertikal bevegelse / skrivebordssett
- Start offset: 4
- Midt offset: 0 (50%)
- Avsluttende forskyvning: -4
- Vertikal bevegelse / nettbrett og telefonsett
- Start offset: 4
- Midt offset: 0 (40% og 60%)
- Sluttforskyvning: -3
- Trigger bevegelseseffekt: midten av elementet
Innstillinger for kolonne 2
Stilling
La oss nå gå videre til parameterne i den andre kolonnen. Juster posisjonsinnstillingene deretter.
- Stilling: Relativ
- Offsetens opprinnelse: øverst til venstre
- Vertikal forskyvning
- Kontor: 25vw
Rulleeffekter
Vi legger også en vertikal bevegelse til denne kolonnen.
- Rull transformasjonseffekter: vertikal bevegelse
- Definer vertikal / stasjonær bevegelse
- Start offset: 2
- Gjennomsnittlig forskyvning: 0 (ved 50%)
- Sluttforskyvning: -2
- Definer vertikal bevegelse / nettbrett og telefon
- Start offset: 0
- Gjennomsnittlig forskyvning: 0 (ved 50%)
- Sluttforskyvning: -2
- Motion Effect Trigger: Element Top
Legg til en tekstmodul i 1-kolonnen
Innhold
Det er på tide å legge til moduler, og starte med en tekstmodul i kolonne 1. Legg til H2-innhold du ønsker.
Titteltekst
Gå til designfanen og stil H2-teksten som følger.
- Tittelnivå: H2
- Skrift: Palanquin Dark
- Skriftvekt: fet
- Font Style: TT
- Farge: gul # ffd868
- Størrelse
- Kontor: 5vw
- Nettbrett: 10vw
- Telefon: 12vw
- Bokstavavstand: 4px
Legg til en kontaktformuleringsmodul i kolonne 1
Innhold
Under tekstmodulen legger du til en Kontaktskjema. Dette er feltene vi bruker:
- navn
- Epost
- materiale
- Melding
spam beskyttelse
Før styling av modulen til Kontaktskjema. aktiver spambeskyttelse og koble til ReCaptcha-kontoen din.
- Bruk en spambeskyttelsestjeneste: Ja
- Tjenesteyter: ReCaptcha
- Velg en konto
felt
Bytt til designfanen og stil feltene som følger.
- Bakgrunnsfarge: Mørkeblå # 25274d
- Tekstfarge: lys grå # d1d1d1
- Fokus bakgrunnsfarge: Mørkeblå # 25274d
- Fokus tekstfarge: lys grå # d1d1d1
- Skrift: Palanquin
- Stil: TT
- Tekststørrelse
- Kontor: 0.9vw
- Nettbrett: 2vw
- Telefon: 3vw
- Bokstavavstand: 1px
knapp
Styliser deretter knappen.
- Egendefinerte stiler: Ja
- Tekststørrelse: 20px
- Tekstfarge: mørk blå # 25274d
- Bakgrunnsfarge: Gul # ffd868
- Grensradius: 7px
- Ikonfarge: Mørkeblå # 25274d
- Øvre margin: 5px
dimensjonering
Vi endrer deretter størrelsesparametrene.
- Bredde: 100%
- Maks bredde: 100%
avstanden
Vi vil også legge til toppfylling.
- Øvre polstring: 4vw
grensen
Fullfør modulparametrene ved å tilpasse grenseparametrene.
- Innganger med avrundede hjørner: 6px ved de fire hjørnene
- Oppføringer Grensestiler: alle fire sider
- Inngangsbredde: 2px
- Oppføringer Grensefarge: gul # ffd868
Legg til sporingsmodulen for sosiale medier i kolonne 2
Innhold
Gå til kolonne 2 og legg til en modul for sosiale medier. Bruk alle de sosiale nettverkene du trenger.
Link
Legg til lenker til de tilsvarende nettverkene før du styler.
Kontekst av artikkelen
Åpne nå det første sosiale nettverket og endre bakgrunnsfargen.
- Farge: mørk blå # 25274d
Element-ikon
I designfanen til det samme elementet endrer du ikoninnstillingene som følger.
- Farge: gul # ffd868
- Ikonets skriftstørrelse
- Skrivebord og nettbrett: 31 stk
- Telefon: 26 stk
Vareavstand
Legg deretter til en liten margin for å skille ikonene fra hverandre.
- Høyre margin: 1vw
Kopier og lim inn elementstiler
For å style de gjenværende sosiale nettverkene, gå tilbake til hovedinnholdsvinduet og kopier elementstiler fra det første ikonet. Lim deretter inn elementstilene på de gjenværende sosiale nettverkene.
justering
Bytt til hoveddesignfanen og sørg for at modulen er venstrejustert.
- Justering av modulen: venstre
dimensjonering
Juster deretter størrelsen på modulen.
- Bredde: 100%
avstanden
Fjern også standardfyllet.
- Øvre, nedre, venstre og høyre polstring: 0vw
grensen
Til slutt legger du til avrundede hjørner i kantinnstillingene. Dette vil justere kantene til alle ikonene samtidig.
- avrundede hjørner
- Øverst til venstre og høyre: 7 piksler
- Nederst til venstre og høyre: 0px
Legg til en tekstmodul i 2-kolonnen
Innhold
Legg til en annen tekstmodul under modulen for sosiale medier. Legg til innhold etter eget valg. Vi la til to adresser, et telefonnummer og en e-post. Bruk fet skrift på tittelen på hvert element med store bokstaver.
- Generelle området: 1587 Sukhumvit Soi 21, Bangkok, Thailand.
- Salgssted : Emporium Mall, 2. etasje
- telefon: (321) 564 2398
- e-post: [e-postbeskyttet]
contexte
Endre bakgrunnsfargen på modulen.
- Farge: mørk blå # 25274d
Texte
Bytt til designfanen og stil teksten.
- Skrift: Palanquin
- Farge: gul # ffd868
- Størrelse: 18px
avstanden
Legg også til egendefinerte avstandsverdier.
- Toppmargin
- Kontor: -60px
- Nettbrett og telefon: -50 piksler
- Øvre, nedre, venstre og høyre polstring
- Kontor: 3vw
- Nettbrett: 6vw
- Telefon: 8vw
grensen
Og fullfør modulen ved å legge til avrundede hjørner i kantinnstillingene. Det er det!
- Avrundede hjørner: 10 piksler øverst til høyre, nederst til venstre og nede til høyre.
undersøkelsen
Nå som vi er ferdig med å gjenskape den flytende kontaktseksjonen, ta en endelig titt på resultatet på forskjellige skjermstørrelser.
Ytterligere ressurser
Dette er ressources kan være utfyllende til det du nettopp har lest. De kan må brukes i tillegg eller av de som ikke har Divi-tema.
- Hvordan legge til en popup kontaktskjema på WordPress
- Hvordan legge til et rullegardinskjema på den globale overskriften på Divi
- 5 plugins for å opprette kontaktskjemaer
Fullfør
Ved å bruke de nye Divi-rulleeffektene blir ethvert standardoppsett til et pent design. Ved å lage din egen bakgrunn har du mer kontroll over utseendet til det ferdige designet. Hvis du har spørsmål eller forslag, legg igjen en kommentar i kommentarfeltet nedenfor!
