Hver hjemmeside har brug for en kontaktsektion, men det betyder ikke, at du skal gå efter et standarddesign. Med Divis rulleeffekter kan du oprette en flydende kontaktsektion, der vil skille sig ud. Forbedre din brugerinteraktion med et lodret rullende kontaktsektionslayout, der inviterer besøgende til at interagere med din Kontaktformular. I denne artikel viser vi dig, hvordan du opretter en flydende kontaktsektion i fuld bredde, som du kan tilføje til enhver side. Du kan endda tilføje det til toppen af en sidefod på hele webstedet med Divi Theme Builder.
Nedenfor finder du en gratis fil, der kan downloades med JSON-layout, der kan downloades i dit eget Divi-bibliotek. Vi har også inkluderet en PSD-skabelon, der hjælper dig med at genskabe kortbaggrunden samt en kortnål SVG, så du kan tilpasse den med dine egne farver.
Opret en elementstruktur
I dette design vil vi bruge et baggrundsbillede, som er en repræsentation på Google Map af det sted, du vil fremvise. Du kan gøre dette med Photoshop eller et hvilket som helst andet billedredigeringsprogram.
Tilføj en ny sektion
Nu er det tid til at begynde at oprette den flydende kontaktsektion med Divi Builder! Den første ting, vi gør, er at åbne en ny eller eksisterende side og tilføje en ny sektion.
Under indholdsfanen skal du tilføje baggrunden for det kort, du oprettede i Photoshop.
- Baggrundsbillede: dit ændrede kort
afstand
Derefter skal du tilpasse sektionsafstandsindstillingerne på fanen design.
- Øvre og nedre margin: 50vh
- Bundpolstring: 0vw
synlighed
Indstil derefter overløbene til synlige.
- Horisontalt og lodret overløb: synlig
Position
Til sidst skal du indstille sektionens Z-indeks til 10.
- Z-indeks: 10
Tilføj en ny linje
Kolonne struktur
Nu er det tid til at tilføje et par ting. Først skal du tilføje en række med 2 kolonner.
dimensionering
Åbn linjeparametrene, og juster størrelsen på følgende måde.
- Bredde
- Kontor: 90%
- Tablet og telefon: 80%
- Maks bredde: 90%
synlighed
Klik på den avancerede fane, og juster derefter overløb.
- Horisontalt og lodret overløb: synlig
Position
Udfør rækkeindstillingerne ved at ændre positionsindstillingerne.
- Position: Relativ
- Offset oprindelse: øverst til venstre
- Lodret offset
- Skrivebord: -8vw
Kolonne 1 Indstillinger
Baggrund
Før vi tilføjer moduler, skal vi style de individuelle kolonner. Føj en baggrundsfarve til kolonne 1.
- Ensfarvet: # 25274d
Mellemrum
Justér afstanden indstillinger næste.
- Top og bund polstring
- Desktop og tablet: 7vw
- Venstre og højre polstring
- Skrivebord: 3vw
- Tablet og telefon: 6vw
Border
Tilføj derefter nogle afrundede hjørner til grænseindstillingerne.
- Afrundede hjørner: 10px alle fire hjørner
Rulleeffekter
Sidst men ikke mindst, brug nogle lodrette bevægelser i indstillingerne for rulleeffekter. Dette vil hjælpe os med at skabe en flydende effekt.
- Rulle Transform Effects: Lodret bevægelse
- Lodret bevægelse / skrivebordssæt
- Start offset: 4
- Midt offset: 0 (ved 50%)
- Afslutning Offset: -4
- Lodret bevægelse / tablet og telefonsæt
- Start offset: 4
- Midt offset: 0 (ved 40% og 60%)
- Slutforskydning: -3
- Trigger bevægelseseffekt: midten af elementet
Indstillinger for kolonne 2
Position
Lad os nu gå videre til parametrene i den anden kolonne. Juster positionsparametrene i overensstemmelse hermed.
- Position: Relativ
- Offsetets oprindelse: øverst til venstre
- Lodret offset
- Kontor: 25vw
Ruleffekter
Vi tilføjer også en lodret bevægelse til denne søjle.
- Rul transformationseffekter: lodret bevægelse
- Definer lodret / desktop bevægelse
- Start offset: 2
- Gennemsnitlig forskydning: 0 (ved 50%)
- Slutforskydning: -2
- Definer lodret bevægelse / tablet og telefon
- Start offset: 0
- Gennemsnitlig forskydning: 0 (ved 50%)
- Slutforskydning: -2
- Motion Effect Trigger: Element Top
Føj et tekstmodul til 1-kolonnen
Indhold
Det er tid til at tilføje moduler, startende med et tekstmodul i kolonne 1. Tilføj det H2-indhold, du ønsker.
Titeltekst
Gå til fanen design, og stil H2-teksten som følger.
- Titleniveau: H2
- Skrifttype: Palanquin Dark
- Skriftvægt: fed
- Skrifttype: TT
- Farve: gul # ffd868
- Størrelse
- Kontor: 5vw
- Tablet: 10vw
- Telefon: 12vw
- Bogstavafstand: 4px
Føj et kontaktformuleringsmodul til kolonne 1
Indhold
Tilføj en under tekstmodulet Kontaktformular. Dette er de felter, vi bruger:
- Efternavn
- materiale
- Besked
Spam Beskyttelse
Før styling af modulet af Kontaktformular. aktiver spambeskyttelse og tilslut din ReCaptcha-konto.
- Brug en spambeskyttelsestjeneste: Ja
- Tjenesteudbyder: ReCaptcha
- Vælg en konto
felter
Skift til designfanen og stil felterne som følger.
- Baggrundsfarve: Mørkeblå # 25274d
- Tekstfarve: lysegrå # d1d1d1
- Fokus baggrundsfarve: Mørkeblå # 25274d
- Fokus tekstfarve: lysegrå # d1d1d1
- Skrifttype: Palanquin
- Stil: TT
- Tekststørrelse
- Kontor: 0.9vw
- Tablet: 2vw
- Telefon: 3vw
- Bogstavafstand: 1px
knap
Stil derefter knappen.
- Tilpassede stilarter: Ja
- Tekststørrelse: 20px
- Tekstfarve: mørkeblå # 25274d
- Baggrundsfarve: Gul # ffd868
- Borderadius: 7px
- Ikonfarve: Mørkeblå # 25274d
- Øvre margen: 5px
dimensionering
Vi ændrer derefter størrelsesparametrene.
- Bredde: 100%
- Maks bredde: 100%
afstand
Vi tilføjer også top polstring.
- Øvre polstring: 4vw
Border
Fuldfør modulparametrene ved at tilpasse kantparametrene.
- Indgange med afrundede hjørner: 6px ved de fire hjørner
- Indlæg Grænsestilarter: alle fire sider
- Indgangsbredde: 2px
- Indlæg Borderfarve: gul # ffd868
Føj sporingsmodulet til sociale medier til kolonne 2
Indhold
Gå til kolonne 2, og tilføj et modul til sociale medier. Brug alle de sociale netværk, du har brug for.
Link
Før styling skal du tilføje links til de tilsvarende netværk.
Kontekst af artiklen
Åbn nu det første sociale netværk, og skift baggrundsfarven.
- Farve: mørkeblå # 25274d
Element ikon
I designfanen for det samme element skal du ændre ikonindstillingerne som følger.
- Farve: gul # ffd868
- Ikonets skriftstørrelse
- Skrivebord og tablet: 31 stk
- Telefon: 26 stk
Vareafstand
Tilføj derefter en lille margin for at adskille ikonerne fra hinanden.
- Højre margen: 1vw
Kopier og indsæt varestil
For at style de resterende sociale netværk skal du vende tilbage til hovedindholdsvinduet og kopiere elementstilarterne fra det første ikon. Indsæt derefter elementstilarterne på de resterende sociale netværk.
tilpasning
Skift til hoveddesignfanen, og sørg for, at modulet er venstrejusteret.
- Justering af modulet: venstre
dimensionering
Justér derefter størrelsen på modulet.
- Bredde: 100%
afstand
Ryd også al standardfyldning.
- Øvre, nedre, venstre og højre polstring: 0vw
Border
Til sidst tilføj afrundede hjørner i kantindstillingerne. Dette justerer grænserne for alle ikoner på én gang.
- Runde hjørner
- Øverste venstre og højre: 7 pixels
- Nederst til venstre og højre: 0px
Føj et tekstmodul til 2-kolonnen
Indhold
Tilføj et andet tekstmodul under modulet for sociale medier. Tilføj indhold efter eget valg. Vi tilføjede to adresser, et telefonnummer og en e-mail. Brug fed skrift på titlen på hvert element i alle hovedstæder.
- Hovedkvarter : 1587 Sukhumvit Soi 21, Bangkok, Thailand.
- Salgssted : Emporium Mall, 2. sal
- Telefon: (321) 564 2398
- e-mail: [e-mail beskyttet]
contexte
Skift modulets baggrundsfarve.
- Farve: mørkeblå # 25274d
Tekster
Skift til designfanen, og stil teksten.
- Skrifttype: Palanquin
- Farve: gul # ffd868
- Størrelse: 18px
afstand
Tilføj også brugerdefinerede afstandsværdier.
- Øverste margen
- Kontor: -60px
- Tablet og telefon: -50 pixels
- Øvre, nedre, venstre og højre polstring
- Kontor: 3vw
- Tablet: 6vw
- Telefon: 8vw
Border
Og udfyld modulet ved at tilføje afrundede hjørner i kantindstillingerne. Det er det!
- Rundede hjørner: 10 pixels øverst til højre, nederst til venstre og nederst til højre.
undersøgelse
Nu hvor vi er færdige med at genskabe sektionen med flydende kontakter, skal du tage et sidste kig på resultatet på forskellige skærmstørrelser.
Yderligere ressourcer
Dette er ressourcer kan være et supplement til det, du lige har læst. De kan skal bruges som supplement eller af dem der ikke har Divi-tema.
- Hvordan at tilføje en popup kontaktformularen på WordPress
- Sådan tilføjes en rullemenu på den globale overskrift på Divi
- 5 plugins for at oprette kontaktformularer
At afslutte
Brug af de nye Divi-rulleeffekter gør ethvert standardlayout til et flot design. Ved at skabe din egen baggrund har du mere kontrol over udseendet af det færdige design. Hvis du har spørgsmål eller forslag, skriv en kommentar i kommentarfeltet nedenfor!
