Chcete vytvoriť plávajúce tlačidlo so zapnutým indexom Z Elementor ?
Sme si istí, že poznáte tlačidlo, ktoré sa zobrazuje pred celým obsahom obrazovky a má zvyčajne kruhový tvar a ikonu v strede. No, to je plávajúce akčné tlačidlo.
Plávajúce akčné tlačidlo môže spustiť akciu alebo vás poslať niekam vyplávať. Ako spúšťače pre e-maily, sociálne siete, orientácia Návštevníci prihlásiť sa na odber kanála a mnoho ďalších.
Dans Elementor, existujú dva spôsoby vytvorenia plávajúceho tlačidla akcie, sú nasledovné:
- Nastavením Z-Indexu
- Vytvorením kontextového okna -Popup-
V tomto návode vám iba ukážeme, ako vytvoriť plávajúce tlačidlo akcie nastavením indexu Z. A na jeho uskutočnenie použijeme profesionálnu verziu.
Najprv však zistite: Ako nainštalovať Elementor na WordPress
Ako vytvoriť plávajúce akčné tlačidlo v Elementore
Môžete použiť bezplatnú verziuElementor na vytvorenie plávajúceho tlačidla akcie pomocou tejto metódy. Tlačidlo, ktoré ste navrhli, však musíte prilepiť na každú stránku, na ktorú chcete, aby sa tlačidlo zobrazovalo webové stránky.
s Elementor Pro, môžete tiež pristupovať k tejto funkcii Vlastné CSS, ktorý použijeme v tomto návode.
Prejdite do svojho editora Elementor; môžete upraviť svoj existujúci obsah (stránky, články atď...) alebo vytvoriť nový. V tomto návode upravíme stránku.
Najprv vytvorte novú sekciu s jedným stĺpcom. Vyberte miniaplikáciu Tlačidlo a presuňte ho do oblasti úprav z panela miniaplikácií. Potom zmeňte tlačidlo Texty a odkaz.
V tomto návode použijeme tlačidlo ako spúšť na stlačenie Návštevníci navigovať webové stránky Elementor. Potom na opcii zarovnanie, nastavte ho na právo et, Nakoniec zmeňte pás tlačidla Zapnúť Veľmi veľký.
Ako môžete vidieť na obrázku GIF vyššie, toto tlačidlo je v sekcii nehybné. Ďalej ho pri posúvaní posunieme, pričom ho ponecháme v rovnakej polohe.
Prejdite na kartu pokročilý. V parametri Rozloženie, nastavte šírku on Inline (auto), definovať pozícia na Pevné, sada horizontálna orientácia na právo a upravte ho décalage ako chcete.
Ďalej si v tejto metóde zadefinujeme náležitosti. V teréne Z-Index, zadajte číslo 9999 ; vďaka tomu bude tlačidlo vždy vpredu (plávajúce).
Teraz je čas otočiť plávajúce tlačidlo akcie. Vždy pod záložkou pokročilý, prístup css triedy z bloku dispozície, potom napíš rotate vo vnútri.
Pozri tiež: Elementor: Predstavujeme najlepší nástroj na tvorbu stránok WordPress
Potom prejdite do bloku Vlastné CSS a potom do poľa vložte nasledujúci kód:
.rotate.rotate
{transform: rotate(90deg);}Môžete vidieť, že sa gombík práve otočil, ale medzi bočnou stranou obrazovky je zvláštna medzera. Takže, poďme to opraviť úpravou décalage na -92
Nakoniec urobíme posledný malý dotyk pre toto plávajúce akčné tlačidlo. Vstúpte do bloku Transformer, vyberte ho PREHĽAD, prístup k možnosti smena a nastavte každú možnosť na 7.
Existuje niekoľko možností, ako dosiahnuť určitú vec v Elementore. Pokiaľ ide o plávajúce tlačidlo, existujú dve možnosti, ktoré môžete použiť. Tu sme pokryli iba jednu metódu, druhá metóda bude ďalším tutoriálom.
Čítajte tiež: Elementor: Ako migrovať webovú stránku WordPress
Ak chcete mať viac možností štýlu, lepšou alternatívou bude vytvorenie plávajúceho tlačidla akcie pomocou nástroja na tvorbu vyskakovacích okien, pretože budete mať možnosti na prispôsobenie tlačidla, ako aj správania, ako je čas zatvorenia tlačidla, trvanie, vstupná alebo výstupná animácia atď. .
Práve ste túto úlohu ľahko dokončili. Stačí si zobraziť ukážku práce svojho tabletu a smartfónu a pokúsiť sa zmeniť okraje tak, aby zodpovedali každému zariadeniu.
Získajte teraz prvok Elementor!
záver
Takže ! To je všetko pre tento článok, ktorý vám ukáže, ako použiť efekt priblíženia na kartu profilu. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
