Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Hvert nettsted trenger en kontaktseksjon, men det betyr ikke at du må gå for en standarddesign. Med Divis rulleeffekter kan du opprette en flytende kontaktseksjon som skiller seg ut. Forbedre brukerinteraksjonen din med en vertikal rullende kontaktdel, som vil invitere besøkende til å kommunisere med kontaktskjemaet ditt. I denne artikkelen viser vi deg hvordan du oppretter en flytende kontaktdel i full bredde som du kan legge til på hvilken som helst side. Du kan til og med legge den til toppen av en sidebunn 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 denne designen skal vi bruke et bakgrunnsbilde som er en representasjon på Google Map av stedet du vil markere. Du kan gjøre dette med Photoshop eller andre bilderedigeringsprogrammer.

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

avstanden

Deretter tilpasser du innstillingene for seksjonsavstand i kategorien design.

  • Øvre og nedre margin: 50vh
  • Bunnpolstring: 0vw
Divi 1 seksjon avstandskonfigurasjon

synlighet

Sett deretter overløpene til synlige.

  • Horisontalt og vertikalt overløp: synlig
flytende kontaktseksjon

Stilling

Til slutt setter du Z-indeksen til seksjonen til 10.

  • Z-indeks: 10
Diviseksjonens posisjon

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.

Rad har to kolonner divi

dimensjonering

Åpne linjeparametrene og juster størrelsen på følgende måte.

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

synlighet

Klikk på den avanserte fanen og juster deretter overløpene.

  • Horisontalt og vertikalt overløp: synlig
Divi line overløpskonfigurasjon

Stilling

Fullfør radinnstillingene ved å endre posisjonsinnstillingene.

  • Stilling: Relativ
  • Offset opprinnelse: øverst til venstre
  • Vertikal forskyvning
    • Skrivebord: -8vw
Konfigurer delelinjens posisjon

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
Kolonnefarge 1 divi

Mellomrom

Juster avstanden innstillinger neste.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

  • Topp- og bunnpolstring
    • Desktop og nettbrett: 7vw
  • Polstring av venstre og høyre
    • Skrivebord: 3vw
    • Nettbrett og telefon: 6vw
Konfigurasjon av avstand med to kolonner

Border

Deretter legger du til noen avrundede hjørner i grenseinnstillingene.

  • Avrundede hjørner: 10x alle fire hjørner
Avrundede kanter

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
Tilpass divi-rulleeffekt

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

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

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.

Kolonne 1 innholdsmodul

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
Divi font tilpasning øverst

Legg til en kontaktformuleringsmodul i kolonne 1

Innhold

Legg til et kontaktskjema under tekstmodulen. Dette er feltene vi bruker:

  • navn
  • E-post
  • materiale
  • Melding
Legg til divi-kontaktskjema

spam beskyttelse

Før du utformer kontaktskjema-modulen. aktiver spambeskyttelse og koble ReCaptcha-kontoen din.

  • Bruk en spambeskyttelsestjeneste: Ja
  • Tjenesteyter: ReCaptcha
  • Velg en konto
Divi-kontaktskjema spambeskyttelse

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
Tilpass fargefelt 1

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
Tilpass divi-knappstil 1
Divi-knappens fargekonfigurasjon

dimensjonering

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

Vi endrer deretter størrelsesparametrene.

  • Bredde: 100%
  • Maks bredde: 100%
Divi dimensjonering konfigurasjon

avstanden

Vi vil også legge til toppfylling.

  • Øvre polstring: 4vw
Divi avstand

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
Divi border konfigurasjon

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.

  • Facebook
  • Twitter
  • Linkedin
Modulen følger oss på sosiale nettverk

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
Endre bakgrunn for divi 1

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
Tilpass fargedeling

Vareavstand

Legg deretter til en liten margin for å skille ikonene fra hverandre.

  • Høyre margin: 1vw
Sosial delingsavstandskonfigurasjon

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.

Kopier stilelement
Lim inn stilelement divi

justering

Bytt til hoveddesignfanen og sørg for at modulen er venstrejustert.

  • Justering av modulen: venstre
Velg justering

dimensjonering

Juster deretter størrelsen på modulen.

  • Bredde: 100%
Konfigurer divisjoner

avstanden

Fjern også standardfyllet.

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

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

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]
Adressekonfigurasjon for Divi-tekstmodul

contexte

Endre bakgrunnsfargen på modulen.

  • Farge: mørk blå # 25274d
Tekstmodulbakgrunnskonfigurasjon

Texte

Bytt til designfanen og stil teksten.

  • Skrift: Palanquin
  • Farge: gul # ffd868
  • Størrelse: 18px
Divi modul tekst skrift

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

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

undersøkelsen

Nå som vi er ferdig med å gjenskape den flytende kontaktseksjonen, ta en endelig titt på resultatet på forskjellige skjermstørrelser.

flytende kontaktseksjon

Ytterligere ressurser

Ressursene kan være komplementære til det du nettopp har lest. De kan brukes i tillegg eller av de som ikke har Divi-temaet.

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!

0 aksjer
del
tweet
Enregistrer