Vytvořte plovoucí část kontaktu s efekty posouvání na Divi

Každý web potřebuje sekci kontaktů, ale to neznamená, že musíte sáhnout po standardním designu. Pomocí efektů posouvání Divi můžete vytvořit plovoucí kontaktní sekci, která vynikne. Vylepšete svou interakci s uživatelem pomocí rozvržení sekce kontaktů s vertikálním posouváním, které návštěvníky vyzve k interakci s vámi kontaktní formulář. V tomto článku vám ukážeme, jak vytvořit plovoucí sekci kontaktů v plné šířce, kterou můžete přidat na libovolnou stránku. Pomocí Divi Theme Builder jej můžete dokonce přidat do horní části zápatí celého webu.

Níže najdete soubor ke stažení zdarma s rozvržením JSON, který si můžete stáhnout ve své vlastní knihovně Divi. Zahrnuli jsme také šablonu PSD, která vám pomůže znovu vytvořit pozadí mapy, a také mapový kolík SVG, abyste si jej mohli přizpůsobit svými vlastními barvami.

Vytvořte strukturu prvků

V tomto návrhu použijeme obrázek na pozadí, který na mapě Google představuje místo, které chcete předvést. Můžete to udělat pomocí Photoshopu nebo jakéhokoli jiného editoru obrázků.

Přidejte novou sekci

Nyní je čas zahájit vytváření sekce plovoucího kontaktu pomocí nástroje Divi Builder! První věc, kterou uděláme, je otevřít novou nebo stávající stránku a přidat novou sekci.

Na kartě obsah přidejte pozadí mapy, kterou jste vytvořili ve Photoshopu.

• Obrázek na pozadí: vaše upravená mapa

vzdálenost

Dále přizpůsobte nastavení rozestupu sekcí na kartě design.

• Horní a dolní okraj: 50vh
• Spodní výplň: 0vw

viditelnost

Poté nastavte přepady na viditelné.

• Horizontální a vertikální přetečení: viditelné

Pozice

Nakonec nastavte index Z sekce na 10.

• Z Index: 10

Přidat nový řádek

Struktura sloupců

Nyní je čas přidat několik věcí. Nejprve přidejte řádek se 2 sloupci.

dimenzování

Otevřete parametry linky a upravte velikost podle následujících pokynů.

• Šířka
  • Kancelář: 90%
  • Tablet a telefon: 80%
• Maximální šířka: 90%

viditelnost

Klikněte na kartu Upřesnit a poté upravte přetečení.

• Horizontální a vertikální přetečení: viditelné

Pozice

Dokončete nastavení řádku úpravou nastavení polohy.

• Pozice: Relativní
• Počátek ofsetu: Vlevo nahoře
• Vertikální ofset
  • Desktop: -8vw

Nastavení sloupce 1

Pozadí

Před přidáním modulů musíme upravit jednotlivé sloupce. Do sloupce 1 přidejte barvu pozadí.

• Plná barva: # 25274d

Vzdálenost

Dále upravte nastavení mezer.

• Vrchní a spodní polstrování
  • Stolní počítače a tablety: 7vw
• Levé a pravé polstrování
  • Desktop: 3vw
  • Tablet a telefon: 6vw

Hranice

Poté přidejte některé zaoblené rohy k nastavení okrajů.

• Zaoblené rohy: 10px všechny čtyři rohy

Posunujte efekty

V neposlední řadě použijte nějaký vertikální pohyb v nastavení efektů posouvání. To nám pomůže vytvořit plovoucí efekt.

• Efekty posunu transformace: Vertikální pohyb
• Svislý pohyb / pracovní plocha
  • Počáteční ofset: 4
  • Střední ofset: 0 (při 50%)
  • Ukončení posunu: -4
• Vertikální pohyb / tablet a telefon
  • Počáteční ofset: 4
  • Střední ofset: 0 (při 40% a 60%)
  • Koncový offset: -3
• Efekt spouštěcího pohybu: střed prvku

Nastavení sloupce 2

Pozice

Nyní přejdeme k parametrům druhého sloupce. Podle toho upravte parametry polohy.

• Pozice: Relativní
• Počátek ofsetu: vlevo nahoře
• Vertikální posun
  • Kancelář: 25vw

Posunovat efekty

Do tohoto sloupce přidáme také svislý pohyb.

• Efekty posuvné transformace: vertikální pohyb
• Definujte vertikální / desktopový pohyb
  • Počáteční posun: 2
  • Průměrný ofset: 0 (při 50%)
  • Koncový offset: -2
• Definujte svislý pohyb / tablet a telefon
  • Počáteční posun: 0
  • Průměrný ofset: 0 (při 50%)
  • Koncový offset: -2
• Motion Effect Trigger: Element Top

Přidejte textový sloupec do sloupce 1

Obsah

Je čas přidat moduly, počínaje textovým modulem ve sloupci 1. Přidejte libovolný obsah H2, který chcete.

Text nadpisu

Přejděte na kartu Návrh a stylujte H2 text následujícím způsobem.

• Úroveň titulu: H2
• Písmo: Palanquin Dark
• Hmotnost písma: tučně
• Styl písma: TT
• Barva: žlutá # ffd868
• velikost
  • Kancelář: 5vw
  • Tablet: 10vw
  • Telefon: 12vw
• Mezery mezi písmeny: 4px

Přidejte modul kontaktního formuláře do sloupce 1

Obsah

Pod textový modul přidejte a kontaktní formulář. Toto jsou pole, která používáme:

• Příjmení
• email
• materiál
• Zpráva

Ochrana proti spamu

Před úpravou modulu z kontaktní formulář. povolte ochranu proti spamu a připojte svůj účet ReCaptcha.

• Použijte službu ochrany proti spamu: Ano
• Poskytovatel služeb: ReCaptcha
• Vyberte účet

Pole

Přepněte na kartu Návrh a upravte pole následujícím způsobem.

• Barva pozadí: Tmavě modrá # 25274d
• Barva textu: světle šedá # d1d1d1
• Barva pozadí zaostření: Tmavě modrá # 25274d
• Barva textu zaostření: světle šedá # d1d1d1
• Písmo: Palanquin
• Styl: TT
• Velikost textu
  • Kancelář: 0.9vw
  • Tablet: 2vw
  • Telefon: 3vw
• Mezery mezi písmeny: 1px

knoflík

Poté stylizujte tlačítko.

• Vlastní styly: Ano
• Velikost textu: 20px
• Barva textu: tmavě modrá # 25274d
• Barva pozadí: Žlutá # ffd868
• Okrajový poloměr: 7px
• Barva ikony: Tmavě modrá # 25274d
• Horní okraj: 5px

dimenzování

Poté upravíme parametry dimenzování.

• Šířka: 100%
• Maximální šířka: 100%

vzdálenost

Přidáme také horní výplň.

• Horní výplň: 4vw

hraniční

Dokončete parametry modulu přizpůsobením parametrů ohraničení.

• Vstupy se zaoblenými rohy: 6px ve čtyřech rozích
• Styly ohraničení položek: všechny čtyři strany
• Šířka vstupního okraje: 2px
• Položky Barva ohraničení: žlutá # ffd868

Do sloupce 2 přidejte modul sledování sociálních médií

Obsah

Přejděte do sloupce 2 a přidejte modul sociálních médií. Využijte všechny sociální sítě, které potřebujete.

• facebook
• X
• linkedin

Odkaz

Před stylingem přidejte odkazy do příslušných sítí.

Kontext článku

Nyní otevřete první sociální síť a změňte barvu pozadí.

• Barva: Tmavě modrá # 25274d

Ikona prvku

Na kartě návrhu stejného prvku změňte nastavení ikony následujícím způsobem.

• Barva: žlutá # ffd868
• Velikost písma ikony
  • Stůl a tablet: 31 px
  • Telefon: 26 px

Mezery mezi položkami

Poté přidejte malý okraj, abyste od sebe oddělili ikony.

• Pravý okraj: 1vw

Zkopírujte a vložte styly položek

Chcete-li stylovat zbývající sociální sítě, vraťte se do hlavního okna obsahu a zkopírujte styly prvků z první ikony. Potom vložte styly prvků do zbývajících sociálních sítí.

zarovnání

Přepněte na kartu Hlavní design a zkontrolujte, zda je modul zarovnán doleva.

• Zarovnání modulu: vlevo

dimenzování

Poté upravte velikost modulu.

• Šířka: 100%

vzdálenost

Zrušte také všechny výchozí výplně.

• Horní, dolní, levé a pravé čalounění: 0vw

hraniční

Nakonec přidejte zaoblené rohy v nastavení ohraničení. Tím se upraví ohraničení všech ikon najednou.

• Kulaté rohy
  • Levá a pravá horní část: 7 pixelů
  • Dole vlevo a vpravo: 0px

Přidejte textový sloupec do sloupce 2

Obsah

Pod modul sociálních médií přidejte další textový modul. Přidejte obsah podle svého výběru. Přidali jsme dvě adresy, telefonní číslo a e-mail. Tučně použijte nadpis každé položky velkými písmeny.

• Ředitelství: 1587 Sukhumvit Soi 21, Bangkok, Thajsko.
• Prodejní místo : Emporium Mall, 2. patro
• telefon: (321) 564
• E-mail: [chráněno e-mailem]

kontext

Změňte barvu pozadí modulu.

• Barva: Tmavě modrá # 25274d

Texty

Přepněte na kartu Návrh a upravte styl textu.

• Písmo: Palanquin
• Barva: žlutá # ffd868
• Velikost: 18px

vzdálenost

Přidejte také vlastní hodnoty mezer.

• Horní okraj
  • Kancelář: -60px
  • Tablet a telefon: -50 pixelů
• Horní, dolní, levé a pravé polstrování
  • Kancelář: 3vw
  • Tablet: 6vw
  • Telefon: 8vw

hraniční

A dokončete modul přidáním zaoblených rohů v nastavení ohraničení. A je to!

• Zaoblené rohy: 10 pixelů vpravo nahoře, vlevo dole a vpravo dole.

přehled

Nyní, když jsme dokončili opětovné vytvoření plovoucího kontaktu, se konečně podívejte na výsledek na různých velikostech obrazovky.

Další zdroje

Tohle je ressources může doplňovat to, co jste právě četli. Mohou být použity navíc nebo těmi, kteří je nemají Divi téma.

• Jak přidat kontaktní formulář vyskakovací na WordPress
• Jak přidat rozevírací formulář do globální hlavičky v Divi
• 5 pluginů k vytvoření kontaktních formulářů

finskému

Pomocí nových efektů posouvání Divi se každé standardní rozvržení promění v pěkný design. Vytvořením vlastního pozadí získáte větší kontrolu nad vzhledem hotového designu. Pokud máte nějaké dotazy nebo návrhy, zanechte komentář v sekci komentáře níže!