Každá webová stránka potrebuje sekciu s kontaktmi, ale to neznamená, že musíte siahnuť po štandardnom dizajne. Pomocou rolovacích efektov Divi si môžete vytvoriť plávajúcu sekciu kontaktov, ktorá bude vynikať. Vylepšite svoju interakciu s používateľmi pomocou rozloženia sekcie kontaktov s vertikálnym posúvaním, ktoré pozve návštevníkov, aby s vami interagovali Kontaktný formulár. V tomto článku vám ukážeme, ako vytvoriť plávajúcu sekciu kontaktov s plnou šírkou, ktorú môžete pridať na ľubovoľnú stránku. Môžete ho dokonca pridať do hornej časti päty celej lokality pomocou nástroja Divi Theme Builder.
Ďalej nájdete bezplatný súbor na stiahnutie s rozložením JSON, ktorý si môžete stiahnuť vo svojej vlastnej knižnici Divi. Zahrnuli sme tiež šablónu PSD, ktorá vám pomôže znovu vytvoriť pozadie mapy, ako aj kolík mapy SVG, aby ste si ho mohli prispôsobiť svojimi vlastnými farbami.
Vytvorte štruktúru prvkov
V tomto dizajne použijeme obrázok na pozadí, ktorý predstavuje na Google mape miesto, ktoré chcete prezentovať. Môžete to urobiť pomocou Photoshopu alebo akéhokoľvek iného editora obrázkov.
Pridajte novú sekciu
Teraz je čas začať vytvárať sekciu plávajúcich kontaktov pomocou nástroja Divi Builder! Prvá vec, ktorú urobíme, je otvorenie novej alebo existujúcej stránky a pridanie novej sekcie.
Na karte obsah pridajte pozadie mapy, ktorú ste vytvorili vo Photoshope.
- Obrázok na pozadí: vaša upravená mapa
vzdialenosť
Ďalej upravte nastavenia medzery sekcií na karte dizajn.
- Horný a dolný okraj: 50 h
- Spodné čalúnenie: 0vw
viditeľnosť
Potom nastavte prepady na viditeľné.
- Horizontálny a vertikálny prepad: viditeľný
poloha
Nakoniec nastavte index Z sekcie na 10.
- Z Index: 10
Pridať nový riadok
Štruktúra stĺpcov
Teraz je čas pridať pár vecí. Najskôr pridajte riadok s 2 stĺpcami.
dimenzovanie
Otvorte parametre linky a upravte veľkosť podľa nasledujúceho postupu.
- Šírka
- Kancelária: 90%
- Tablet a telefón: 80%
- Maximálna šírka: 90%
viditeľnosť
Kliknite na kartu rozšírené a potom upravte pretečenia.
- Horizontálny a vertikálny prepad: viditeľný
poloha
Dokončite nastavenia riadku úpravou nastavení polohy.
- Pozícia: relatívna
- Počiatočný posun: ľavý horný
- Vertikálne posunutie
- Pracovná plocha: -8vw
Nastavenia stĺpca 1
pozadia
Pred pridaním modulov musíme upraviť jednotlivé stĺpce. Pridajte farbu pozadia do stĺpca 1.
- Jednofarebné: # 25274d
riadkovanie
Ďalej upravte nastavenie medzier.
- Vrchné a spodné čalúnenie
- Stolné počítače a tablety: 7vw
- Čalúnenie vľavo a vpravo
- Pracovná plocha: 3vw
- Tablet a telefón: 6 Vw
Hranice
Potom pridajte niektoré zaoblené rohy do nastavení okrajov.
- Zaoblené rohy: 10px všetky štyri rohy
Efekty posúvania
V neposlednom rade použite určitý zvislý pohyb v nastaveniach efektov posúvania. Pomôže nám to vytvoriť plávajúci efekt.
- Efekty posunutej transformácie: Vertikálny pohyb
- Vertikálny pohyb / pracovná plocha
- Počiatočný posun: 4
- Stredná korekcia: 0 (pri 50%)
- Koncový ofset: -4
- Vertikálny pohyb / tablet a telefón
- Počiatočný posun: 4
- Stredná odchýlka: 0 (pri 40% a 60%)
- Koncový posun: -3
- Efekt spúšťacieho pohybu: stred prvku
Nastavenia stĺpca 2
poloha
Teraz prejdime k parametrom druhého stĺpca. Podľa toho upravte nastavenie polohy.
- Pozícia: relatívna
- Počiatok odsadenia: vľavo hore
- Vertikálne odsadenie
- Kancelária: 25vw
Posúvacie efekty
Do tohto stĺpca pridávame aj vertikálny pohyb.
- Efekty transformácie posunu: vertikálny pohyb
- Definujte vertikálny / desktopový pohyb
- Počiatočný posun: 2
- Priemerný ofset: 0 (pri 50%)
- Koncový posun: -2
- Definujte vertikálny pohyb / tablet a telefón
- Počiatočný posun: 0
- Priemerný ofset: 0 (pri 50%)
- Koncový posun: -2
- Spúšťač pohybových efektov: vrchná časť prvku
Pridajte textový stĺpec do stĺpca 1
Obsah
Je čas pridať moduly, počnúc textovým modulom v stĺpci 1. Pridajte ľubovoľný požadovaný obsah H2.
Text nadpisu
Prejdite na kartu Dizajn a text H2 upravte nasledujúcim spôsobom.
- Úroveň Názov: H2
- Písmo: Palanquin Dark
- Hmotnosť písma: tučné
- Štýl písma: TT
- Farba: žltá # ffd868
- veľkosť
- Kancelária: 5vw
- Tablet: 10vw
- Telefón: 12vw
- Riadkovanie písmen: 4px
Pridajte modul kontaktného formulára do stĺpca 1
Obsah
Pod textový modul pridajte a Kontaktný formulár. Toto sú polia, ktoré používame:
- názov
- materiál
- správa
Ochrana spam
Pred stylingom modulu Kontaktný formulár. povoľte ochranu proti spamu a pripojte svoj účet ReCaptcha.
- Použite službu ochrany proti spamu: Áno
- Poskytovateľ služieb: ReCaptcha
- Vyberte účet
poľa
Prepnite na kartu dizajn a upravte štýl polí nasledujúcim spôsobom.
- Farba pozadia: Tmavo modrá # 25274d
- Farba textu: svetlo šedá # d1d1d1
- Farba pozadia zamerania: tmavo modrá # 25274d
- Farba textu zaostrenia: svetlo šedá # d1d1d1
- Písmo: Palanquin
- Štýl: TT
- Veľkosť textu
- Kancelária: 0.9vw
- Tablet: 2vw
- Telefón: 3vw
- Riadkovanie písmen: 1px
gombík
Potom štylizujte tlačidlo.
- Vlastné štýly: Áno
- Veľkosť textu: 20px
- Farba textu: tmavo modrá # 25274d
- Farba pozadia: žltá # ffd868
- Polomer okraja: 7 pixlov
- Farba ikony: Tmavo modrá # 25274d
- Horný okraj: 5px
dimenzovanie
Potom upravíme parametre veľkosti.
- Šírka: 100%
- Maximálna šírka: 100%
vzdialenosť
Pridáme tiež vrchné čalúnenie.
- Vrchná vypchávka: 4vw
hraničné
Dokončite parametre modulu prispôsobením parametrov hranice.
- Vstupy so zaoblenými rohmi: 6 pixlov v štyroch rohoch
- Štýly orámovania: všetky štyri strany
- Šírka vstupného okraja: 2px
- Záznamy Farba okraja: žltá # ffd868
Pridajte modul sledovania sociálnych médií do stĺpca 2
Obsah
Prejdite do stĺpca 2 a pridajte modul sociálnych médií. Využite všetky sociálne siete, ktoré potrebujete.
Spojenie
Pred stylingom pridajte odkazy do príslušných sietí.
Kontext článku
Teraz otvorte prvú sociálnu sieť a zmeňte farbu pozadia.
- Farba: Tmavomodrá # 25274d
Ikona prvku
Na karte dizajn toho istého prvku zmeňte nastavenie ikony nasledovne.
- Farba: žltá # ffd868
- Veľkosť písma ikony
- Stôl a tablet: 31 px
- Telefón: 26 px
Riadkovanie položiek
Potom pridajte malý okraj, aby ste od seba oddelili ikony.
- Pravý okraj: 1vw
Skopírujte a prilepte štýly položiek
Ak chcete upraviť štýl zostávajúcich sociálnych sietí, vráťte sa do hlavného okna obsahu a skopírujte štýly prvkov z prvej ikony. Potom prilepte štýly prvkov na zvyšné sociálne siete.
zarovnanie
Prepnite na hlavnú kartu dizajnu a uistite sa, že je modul zarovnaný doľava.
- Zarovnanie modulu: vľavo
dimenzovanie
Potom upravte veľkosť modulu.
- Šírka: 100%
vzdialenosť
Vymažte tiež všetky predvolené výplne.
- Vrchná, spodná, ľavá a pravá výplň: 0vw
hraničné
Nakoniec v nastaveniach ohraničenia pridajte zaoblené rohy. Týmto sa upravia hranice všetkých ikon naraz.
- zaoblené rohy
- Vľavo a vpravo hore: 7 pixelov
- Vľavo a vpravo dole: 0px
Pridajte textový stĺpec do stĺpca 2
Obsah
V rámci modulu sociálnych médií pridajte ďalší textový modul. Pridajte obsah podľa vášho výberu. Pridali sme dve adresy, telefónne číslo a e-mail. Tučným písmom označte nadpis každej položky veľkými písmenami.
- Všeobecné Oblasť: 1587 Sukhumvit Soi 21, Bangkok, Thajsko.
- Miesto predaja : Emporium Mall, 2. poschodie
- telefón: (321) 564 2398
- e-mail: [chránené e-mailom]
kontext
Zmeňte farbu pozadia modulu.
- Farba: Tmavomodrá # 25274d
Texty
Prepnite na kartu dizajn a upravte štýl textu.
- Písmo: Palanquin
- Farba: žltá # ffd868
- Veľkosť: 18px
vzdialenosť
Pridajte tiež vlastné hodnoty medzery.
- Horný okraj
- Kancelária: -60px
- Tablet a telefón: -50 pixelov
- Vrchná, spodná, ľavá a pravá výplň
- Kancelária: 3vw
- Tablet: 6vw
- Telefón: 8vw
hraničné
A modul dokončite pridaním zaoblených rohov v nastaveniach ohraničenia. To je všetko!
- Zaoblené rohy: 10 pixelov vpravo hore, vľavo dole a vpravo dole.
prehľad
Teraz, keď sme dokončili nové vytváranie plávajúcich kontaktov, sa pozrite na výsledok na rôznych veľkostiach obrazovky.
Dodatočné zdroje
c'est zdroje môže dopĺňať to, čo ste práve čítali. Môžu byť použité dodatočne alebo tými, ktorí ich nemajú Divi téma.
- Ako pridať kontaktný formulár vyskakovacie na WordPress
- Ako pridať rozbaľovací formulár do globálnej hlavičky v Divi
- 5 doplnkov na vytvorenie kontaktných formulárov
Dokončiť
Pomocou nových rolovacích efektov Divi sa každé štandardné rozloženie zmení na pekný dizajn. Vytvorením vlastného pozadia získate väčšiu kontrolu nad vzhľadom hotového dizajnu. Ak máte akékoľvek otázky alebo návrhy, zanechajte komentár v sekcii komentárov nižšie!
