Gå til hovedindhold

Opret et flydende kontaktsektion med rulleeffekter på Divi

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

Hver webside har brug for en kontaktsektion, men det betyder ikke, at du skal gå efter et standarddesign. Med Divis rulleeffekter kan du oprette et flydende kontaktafsnit, der skiller sig ud. Forbedre din brugerinteraktion med et lodret rullende kontakt sektionslayout, der vil invitere besøgende til at interagere med din kontaktformular. I denne artikel viser vi dig, hvordan du opretter et flydende kontaktafsnit i fuld bredde, som du kan tilføje til enhver side. Du kan endda tilføje det til toppen af ​​en sidefodsfod 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 bruger vi et baggrundsbillede, der repræsenterer på Google Map det sted, du vil fremhæve. Du kan gøre dette med Photoshop eller en hvilken som helst anden billededitor.

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
Divi baggrundsbillede

afstand

Derefter skal du tilpasse sektionsafstandsindstillingerne på fanen design.

  • Øvre og nedre margin: 50vh
  • Bundpolstring: 0vw
Divi 1 sektion afstand konfiguration

synlighed

Indstil derefter overløbene til synlige.

  • Horisontalt og lodret overløb: synlig
flydende kontaktsektion

Position

Til sidst skal du indstille sektionens Z-indeks til 10.

  • Z-indeks: 10
Divi sektion position

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.

Række har to kolonner divi

dimensionering

Åbn linjeparametrene, og juster størrelsen på følgende måde.

  • Bredde
    • Kontor: 90%
    • Tablet og telefon: 80%
  • Maks bredde: 90%
Divi line parameter

synlighed

Klik på den avancerede fane, og juster derefter overløb.

  • Horisontalt og lodret overløb: synlig
Divi line overløbskonfiguration

Position

Udfør rækkeindstillingerne ved at ændre positionsindstillingerne.

  • Position: Relativ
  • Offset oprindelse: øverst til venstre
  • Lodret offset
    • Skrivebord: -8vw
Konfigurer delelinjens position

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
Kolonne farve 1 divi

Mellemrum

Justér afstanden indstillinger næste.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

  • Top og bund polstring
    • Desktop og tablet: 7vw
  • Venstre og højre polstring
    • Skrivebord: 3vw
    • Tablet og telefon: 6vw
Konfiguration af mellemrum med to søjler

Border

Tilføj derefter nogle afrundede hjørner til grænseindstillingerne.

  • Afrundede hjørner: 10px alle fire hjørner
Afrundet sektion med afrundede kanter

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
Tilpas divi-sektions rulleeffekt

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
Divi-kolonnetilpasning

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
Divi-rulleeffekt

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.

Kolonne 1-indholdsmodul

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
Divi skrifttilpasning øverst

Føj et kontaktformuleringsmodul til kolonne 1

Indhold

Tilføj en kontaktformular under tekstmodulet. Dette er de felter, vi bruger:

  • Efternavn
  • E-mail
  • materiale
  • Besked
Tilføj divi-kontaktformular

Spam Beskyttelse

Inden styling af kontaktformularmodulet. aktiver spambeskyttelse og tilslut din ReCaptcha-konto.

  • Brug en spambeskyttelsestjeneste: Ja
  • Tjenesteudbyder: ReCaptcha
  • Vælg en konto
Divi-kontaktformular spambeskyttelse

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
Tilpas farvefelter 1

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
Tilpas divi-knapstil 1
Divi knap farve konfiguration

dimensionering

Vi ændrer derefter størrelsesparametrene.

  • Bredde: 100%
  • Maks bredde: 100%
Konfiguration af divisstørrelse

afstand

Vi tilføjer også top polstring.

  • Øvre polstring: 4vw
Divi afstand

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
Divi kantkonfiguration

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.

  • Facebook
  • Twitter
  • Linkedin
Modul følger os på sociale netværk

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
Rediger divi 1 baggrund

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
Tilpas farvedeling

Vareafstand

Tilføj derefter en lille margin for at adskille ikonerne fra hinanden.

  • Højre margen: 1vw
Konfiguration af mellemrum for social deling

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.

Kopiér stilelement
Indsæt stilelement divi

tilpasning

Skift til hoveddesignfanen, og sørg for, at modulet er venstrejusteret.

  • Justering af modulet: venstre
Vælg justering

dimensionering

Justér derefter størrelsen på modulet.

  • Bredde: 100%
Konfigurer opdelingsstørrelse

afstand

Ryd også al standardfyldning.

  • Øvre, nedre, venstre og højre polstring: 0vw
Konfigurer divi-afstand

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
Divi-modul kantkonfiguration

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]
Divi tekst modul adressekonfiguration

contexte

Skift modulets baggrundsfarve.

  • Farve: mørkeblå # 25274d
Tekstmodul baggrundskonfiguration

Tekster

Skift til designfanen, og stil teksten.

  • Skrifttype: Palanquin
  • Farve: gul # ffd868
  • Størrelse: 18px
Divi modul tekst skrifttype

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
Divi afstandsmargin

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.
Afrundet kantdelemodul

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.

flydende kontaktsektion

Yderligere ressourcer

Det er ressourcer, der kan supplere det, du lige har læst. De kan bruges derudover eller af dem, der ikke har Divi-temaet.

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!

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
0 aktier
andel
tweet
Tilmeld