Gå till innehållet

Skapa en flytande kontaktsektion med rullningseffekter på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Varje webbplats behöver ett kontaktsektion, men det betyder inte att du måste gå för en standarddesign. Med Divis rullningseffekter kan du skapa ett flytande kontaktavsnitt som sticker ut. Förbättra din användarinteraktion med en vertikal rullande kontaktavsnittslayout som bjuder in besökare att interagera med ditt kontaktformulär. I den här artikeln ska vi visa dig hur du skapar ett flytande kontaktavsnitt i full bredd som du kan lägga till på vilken sida som helst. Du kan till och med lägga till det högst upp på en sidfot med Divi Theme Builder.

Nedan hittar du en gratis nedladdningsbar fil med JSON-layout som kan laddas ner i ditt eget Divi-bibliotek. Vi har också inkluderat en PSD-mall som hjälper dig att återskapa kartbakgrunden, samt en SVG för kartnål så att du kan anpassa den med dina egna färger.

Skapa en elementstruktur

I den här designen kommer vi att använda en bakgrundsbild som representerar på Google Map den plats du vill markera. 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 ska göra är att öppna en ny eller befintlig sida och lägga till ett nytt avsnitt.

Lägg till bakgrunden på kartan som du skapade i Photoshop på innehållsfliken.

  • Bakgrundsbild: din modifierade karta
Divi bakgrundsbild

avstånd

Anpassa sedan sektionsavståndsinställningarna på designfliken.

  • Övre och undre marginal: 50vh
  • Botten stoppning: 0vw
Divi 1 sektionsavståndskonfiguration

synlighet

Ställ sedan överflödena till synliga.

  • Horisontellt och vertikalt överflöde: synligt
flytande kontaktsektion

Placera

Slutligen ställer du in Z-index för avsnittet till 10.

  • Z-index: 10
Divisektionens position

Lägg till en ny rad

Kolumnstruktur

Nu är det dags att lägga till några saker. Lägg först till en rad med två kolumner.

Rad har två kolumner divi

dimensionering

Öppna linjeparametrarna och justera storleken på följande sätt.

  • Bredd
    • Kontor: 90%
    • Tablet och telefon: 80%
  • Max bredd: 90%
Divi line parameter

synlighet

Klicka på den avancerade fliken och justera sedan överflödet.

  • Horisontellt och vertikalt överflöde: synligt
Konfiguration av överflödesdelning

Placera

Slutför radinställningarna genom att ändra positionsinställningarna.

  • Position: Relativ
  • Offset-ursprung: övre vänster
  • Vertikal förskjutning
    • Skrivbord: -8vw
Konfigurera delningslinjens position

Kolumn 1 Inställningar

Bakgrund

Innan du lägger till moduler måste vi utforma de enskilda kolumnerna. Lägg till en bakgrundsfärg i kolumn 1.

  • Fast färg: # 25274d
Kolumnfärg 1 divi

Förband

Justera avståndsinställningarna nästa

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • Övre och nedre stoppning
    • Skrivbord och surfplatta: 7vw
  • Vänster och höger stoppning
    • Skrivbord: 3vw
    • Tablet och telefon: 6vw
Konfiguration av avstånd med två kolumner

Border

Lägg sedan till några avrundade hörn i kantinställningarna.

  • Rundade hörn: 10px alla fyra hörnen
Avdelade rundade kanter

Ruleffekter

Sist men inte minst, använd viss vertikal rörelse i rullningseffektinställningarna. Detta hjälper oss att skapa en flytande effekt.

  • Scroll Transform Effects: Vertical Motion
  • Vertikal rörelse / stationär uppsättning
    • Starta offset: 4
    • Mid Offset: 0 (50%)
    • Avsluta offset: -4
  • Vertikal rörelse / surfplatta och telefonuppsättning
    • Starta offset: 4
    • Mid Offset: 0 (40% och 60%)
    • Slutförskjutning: -3
  • Trigger motion-effekt: mitt i elementet
Anpassa rullningseffekt för divisektion

Inställningar för kolumn 2

Placera

Låt oss nu gå vidare till parametrarna i den andra kolumnen. Justera positionsinställningarna därefter.

  • Position: Relativ
  • Offsetens ursprung: uppe till vänster
  • Vertikal offset
    • Kontor: 25vw
Divi kolumn anpassning

Rullaffekter

Vi lägger också till en vertikal rörelse i den här kolumnen.

  • Effekter för rullningsomvandling: vertikal rörelse
  • Definiera vertikal / stationär rörelse
    • Startförskjutning: 2
    • Genomsnittlig offset: 0 (vid 50%)
    • Slutförskjutning: -2
  • Definiera vertikal rörelse / surfplatta och telefon
    • Startförskjutning: 0
    • Genomsnittlig offset: 0 (vid 50%)
    • Slutförskjutning: -2
  • Motion Effect Trigger: Element Top
Divi rullningseffekt

Lägg till en textmodul i 1-kolumnen

Innehåll

Det är dags att lägga till moduler, med en textmodul i kolumn 1. Lägg till H2-innehåll du vill ha.

Innehållsmodul för kolumn 1

Titeltext

Gå till fliken design och utforma H2-texten enligt följande.

  • Titelnivå: H2
  • Typsnitt: Palanquin Dark
  • Teckensnitt vikt: fetstil
  • Teckensnittstyp: TT
  • Färg: gul # ffd868
  • storlek
    • Kontor: 5vw
    • Tablet: 10vw
    • Telefon: 12vw
  • Brevavstånd: 4px
Divi-teckensnittsanpassning överst

Lägg till en kontaktformulärmodul i kolumn 1

Innehåll

Lägg till ett kontaktformulär under textmodulen. Det här är de fält vi använder:

  • namn
  • E-post
  • material
  • Meddelande
Lägg till divi-kontaktformulär

spam skydd

Innan du utformar kontaktformulärsmodulen. aktivera skräppostskydd och anslut ditt ReCaptcha-konto.

  • Använd en skräpposttjänst: Ja
  • Tjänsteleverantör: ReCaptcha
  • Välj ett konto
Divi-kontaktformulär skräppostskydd

fält

Byt till designfliken och utforma 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
  • Brevavstånd: 1px
Anpassa färgfält 1

knapp

Styliser sedan knappen.

  • Anpassade stilar: Ja
  • Textstorlek: 20px
  • Textfärg: mörkblå # 25274d
  • Bakgrundsfärg: gul # ffd868
  • Gränseradie: 7px
  • Ikonfärg: Mörkblå # 25274d
  • Övre marginal: 5px
Anpassa divi-knappstil 1
Divi-knappens färgkonfiguration

dimensionering

Vi modifierar sedan dimensioneringsparametrarna.

  • Bredd: 100%
  • Max bredd: 100%
Konfiguration av delningsstorlek

avstånd

Vi kommer också att lägga till toppfyllning.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Övre stoppning: 4vw
Divi-avstånd

gräns

Slutför modulparametrarna genom att anpassa gränsparametrarna.

  • Ingångar med rundade hörn: 6px vid de fyra hörnen
  • Poster Border-stilar: alla fyra sidor
  • Ingångsbredd: 2px
  • Poster Gränsfärg: gul # ffd868
Divi kantkonfiguration

Lägg till spårningsmodulen för sociala medier i kolumn 2

Innehåll

Gå till kolumn 2 och lägg till en modul för sociala medier. Använd alla sociala nätverk du behöver.

  • Facebook
  • Twitter
  • LinkedIn
Modulen följer oss på sociala nätverk

Lien

Lägg till länkar till motsvarande nätverk innan du stylar.

Artikelns sammanhang

Öppna nu det första sociala nätverket och ändra bakgrundsfärgen.

  • Färg: Mörkblå # 25274d
Ändra divi 1-bakgrund

Element-ikonen

På designfliken för samma element ändrar du ikoninställningarna enligt följande.

  • Färg: gul # ffd868
  • Ikon teckenstorlek
    • Skrivbord och surfplatta: 31 st
    • Telefon: 26 st
Anpassa färg divi

Objektavstånd

Lägg sedan till en liten marginal för att skilja ikonerna från varandra.

  • Höger marginal: 1vw
Konfiguration av socialt delningsavstånd

Kopiera och klistra in artikelformat

För att utforma de återstående sociala nätverken, gå tillbaka till huvudinnehållsfönstret och kopiera elementstilarna från den första ikonen. Klistra sedan in elementstilarna på återstående sociala nätverk.

Kopiera stilelement
Klistra in stilelement divi

uppriktning

Byt till huvuddesignfliken och se till att modulen är vänsterjusterad.

  • Justering av modulen: vänster
Välj inriktning

dimensionering

Justera sedan storleken på modulen.

  • Bredd: 100%
Konfigurera delningsstorlek

avstånd

Ta också bort alla standardfyllningar.

  • Övre, nedre, vänster och höger stoppning: 0vw
Konfigurera divi-avstånd

gräns

Slutligen lägg till rundade hörn i gränsinställningarna. Detta justerar gränserna för alla ikoner samtidigt.

  • rundade hörn
    • Upp till vänster och höger: 7 pixlar
    • Nedre vänster och höger: 0px
Divi-modul kantkonfiguration

Lägg till en textmodul i 2-kolumnen

Innehåll

Lägg till en annan textmodul under modulen sociala medier. Lägg till innehåll efter eget val. Vi lade till två adresser, ett telefonnummer och ett e-postmeddelande. Använd fetstil på titeln på varje artikel i alla versaler.

  • Allmänt område: 1587 Sukhumvit Soi 21, Bangkok, Thailand.
  • Försäljningspunkt : Emporium Mall, 2: a våningen
  • telefon: (321) 564 2398
  • e-post: [email protected]
Adresskonfiguration för Divi-textmodul

sammanhang

Ändra modulens bakgrundsfärg.

  • Färg: Mörkblå # 25274d
Textmodulens bakgrundskonfiguration

Texte

Byt till designfliken och utforma texten.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • Typsnitt: Palanquin
  • Färg: gul # ffd868
  • Storlek: 18px
Divi-modul text typsnitt

avstånd

Lägg också till anpassade avståndsvärden.

  • Övre marginal
    • Kontor: -60px
    • Tablet och telefon: -50 pixlar
  • Övre, nedre, vänster och höger stoppning
    • Kontor: 3vw
    • Tablet: 6vw
    • Telefon: 8vw
Divi-avståndsmarginal

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 längst upp till höger, nedre vänstra och nedre höger.
Rundad delad textmodul

undersökningen

Nu när vi har återskapat avsnittet med flytande kontakter, ta en sista titt på resultatet på olika skärmstorlekar.

flytande kontaktsektion

Ytterligare resurser

Dess resurser kan komplettera det du just läst. De kan användas förutom eller av dem som inte har Divi-temat.

att avsluta

Med de nya Divi-rullningseffekterna förvandlas alla standardlayouter till en fin 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 kommentarfältet nedan!

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer