Přejít k hlavnímu obsahu

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

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 701.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Každá webová stránka potřebuje sekci kontaktů, ale to neznamená, že musíte použít standardní design. S efekty posouvání Divi můžete vytvořit plovoucí sekci kontaktů, která vynikne. Vylepšete interakci uživatele s vertikálním rolováním rozložení sekce kontaktů, které vyzve návštěvníky k interakci s vaším kontaktním formulářem. V tomto článku vám ukážeme, jak vytvořit sekci plovoucího kontaktu s plnou šířkou, kterou můžete přidat na libovolnou stránku. Dokonce jej můžete přidat do horní části zápatí celého webu pomocí nástroje Divi Theme Builder.

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 designu budeme používat obrázek na pozadí, který je reprezentací místa, které chcete zvýraznit, na Google Map. Můžete to udělat pomocí Photoshopu nebo 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
Obrázek pozadí Divi

vzdálenost

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

  • Horní a dolní okraj: 50vh
  • Spodní výplň: 0vw
Konfigurace rozestupu divi 1 sekce

viditelnost

Poté nastavte přepady na viditelné.

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

Pozice

Nakonec nastavte index Z sekce na 10.

  • Z Index: 10
Pozice sekce Divi

Přidat nový řádek

Struktura sloupců

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

Řádek má dva sloupce divi

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%
Parametr Divi Line

viditelnost

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

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

Pozice

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

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

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
Barva sloupce 1 divi

Vzdálenost

Dále upravte nastavení mezer.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

  • Vrchní a spodní polstrování
    • Stolní počítače a tablety: 7vw
  • Levé a pravé polstrování
    • Desktop: 3vw
    • Tablet a telefon: 6vw
Konfigurace rozestupu sekcí se dvěma sloupci

Hranice

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

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

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
Přizpůsobte efekt posouvání sekce divi

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
Přizpůsobení sloupce Divi

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
Efekt posouvání Divi

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.

Modul obsahu sloupce 1

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
Personalizace písma Divi

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

Obsah

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

  • Příjmení
  • Email
  • materiál
  • Zpráva
Přidejte divi kontaktní formulář

Ochrana proti spamu

Před stylingem modulu kontaktního formuláře. aktivujte ochranu proti spamu a připojte svůj účet ReCaptcha.

  • Použijte službu ochrany proti spamu: Ano
  • Poskytovatel služeb: ReCaptcha
  • Vyberte účet
Divi kontaktní formulář ochrana proti spamu

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
Přizpůsobení barevných polí 1

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
Přizpůsobení stylu tlačítka divi 1
Konfigurace barev tlačítka Divi

dimenzování

Poté upravíme parametry dimenzování.

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

vzdálenost

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

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

  • Horní výplň: 4vw
Rozteč Divi

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
Konfigurace hranice Divi

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
  • Twitter
  • linkedin
Modul sledujte nás na sociálních sítích

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
Upravit pozadí divi 1

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
Přizpůsobte divi barvy

Mezery mezi položkami

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

  • Pravý okraj: 1vw
Konfigurace mezer v sociálním sdílení

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í.

Kopírovat prvek stylu
Vložit prvek stylu divi

zarovnání

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

  • Zarovnání modulu: vlevo
Zvolte zarovnání

dimenzování

Poté upravte velikost modulu.

  • Šířka: 100%
Nakonfigurujte velikost divi

vzdálenost

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

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

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
Konfigurace ohraničení modulu Divi

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]
Konfigurace adresy textového modulu Divi

kontext

Změňte barvu pozadí modulu.

  • Barva: Tmavě modrá # 25274d
Konfigurace pozadí textového modulu

Texty

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

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

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

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
Rozpětí divi mezer

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.
Zaokrouhlený rámeček divi textový modul

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.

plovoucí kontaktní sekce

Další zdroje

Jeho zdroje mohou doplňovat to, co jste právě četli. Mohou být použity navíc nebo těmi, kteří nemají téma Divi.

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!

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
0 akcie
podíl
tweet
Zadat