Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Chceli by ste na Elementore vytvoriť plávajúce tlačidlo s indexom Z?

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ť. Napríklad spúšťače pre e-maily, sociálne siete, nasmerovanie návštevníkov na odber kanála a mnoho ďalších.

V Elementore existujú dve metódy na vytvorenie 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

Na vytvorenie plávajúceho tlačidla akcie pomocou tejto metódy môžete použiť bezplatnú verziu Elementor. Tlačidlo, ktoré ste navrhli, však musíte prilepiť na každú stránku, kde chcete, aby sa tlačidlo na vašom webe zobrazovalo.

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.

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

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

V tomto návode použijeme tlačidlo ako spúšťač, ktorý prinúti návštevníkov prehliadať webovú stránku Elementor. Potom na opcii zarovnanie, nastavte ho na právo et, Nakoniec zmeňte pás tlačidla Zapnúť Veľmi veľký.

vytvorte plávajúce tlačidlo s indexom Z

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.

vytvorte plávajúce tlačidlo s indexom Z

Ď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).

vytvorte plávajúce tlačidlo s indexom Z

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

vytvorte plávajúce tlačidlo s indexom Z

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.

vytvorte plávajúce tlačidlo s indexom Z

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.

...

0 akcie
podiel
tweet
Registrovať