Chcete vytvořit plovoucí tlačítko se zapnutým Z indexem Elementor ?
Jsme si jisti, že dobře znáte tlačítko, které se zobrazuje před veškerým obsahem obrazovky a obvykle s kruhovým tvarem a ikonou uprostřed. No, to je plovoucí akční tlačítko.
Plovoucí akční tlačítko může spustit akci nebo vás poslat někam odplout. Jako spouštěče e-mailů, sociálních sítí, orientace Návštěvníci přihlásit se k odběru kanálu a mnoho dalších.
Dans Elementor, existují dva způsoby, jak vytvořit plovoucí akční tlačítko, jsou následující:
- Nastavením Z-Indexu
- Vytvořením vyskakovacího okna -Popup-
V tomto tutoriálu vám pouze ukážeme, jak vytvořit plovoucí akční tlačítko nastavením indexu Z. A k jeho uskutečnění použijeme profesionální verzi.
Nejprve však zjistěte: Jak nainstalovat Elementor na WordPress
Jak vytvořit plovoucí akční tlačítko v Elementoru
Můžete použít bezplatnou verziElementor k vytvoření plovoucího akčního tlačítka touto metodou. Tlačítko, které jste navrhli, však musíte vložit na každou stránku, kam chcete, aby se na vaší stránce zobrazovalo webové stránky.
S Elementor Pro, můžete k této funkci také přistupovat Vlastní CSS, který použijeme v tomto tutoriálu.
Přejděte do svého editoru Elementor; můžete upravit svůj stávající obsah (stránky, články atd...) nebo vytvořit nový. V tomto tutoriálu upravíme stránku.
Nejprve vytvořte novou sekci s jedním sloupcem. Vyberte widget Tlačítko a přetáhněte jej do oblasti úprav z panelu widgetů. Poté změňte tlačítko Texty a odkaz.
V tomto tutoriálu použijeme tlačítko jako spoušť ke stisknutí Návštěvníci pro navigaci Webové stránky Elementor. Pak na opci zarovnání, nastavte jej na právo et, Nakonec změňte taille tlačítka Zapnout Velmi velký.
Jak můžete vidět na obrázku GIF výše, toto tlačítko je v sekci nehybné. Dále jej při posouvání posouváme a držíme jej ve stejné poloze.
Přejděte na kartu pokročilý. V parametru Rozložení, nastavte šířku on Inline (auto), definovat pozice na Pevné, set horizontální orientace na právo a upravit to décalage jak si přejete.
Dále si v této metodě definujeme náležitosti. V oboru Z-index, zadejte číslo 9999 ; bude tlačítko vždy vpředu (plovoucí).
Nyní je čas otočit plovoucím akčním tlačítkem. Vždy pod záložkou pokročilý, přístup třídy css z bloku Rozložení, potom napiš rotate uvnitř.
Viz též: Elementor: Představujeme nejlepší tvůrce stránek WordPress
Poté přejděte do bloku Vlastní CSS a poté do pole vložte následující kód:
.rotate.rotate
{transform: rotate(90deg);}Můžete vidět, že se knoflík právě otočil, ale mezi stranou obrazovky je podivná mezera. Pojďme to tedy napravit úpravou décalage v -92
Nakonec uděláme poslední malý dotyk pro toto plovoucí akční tlačítko. Vstupte do bloku transformátor, vyberte ji PŘEHLED, přístup k možnosti směna a nastavte každou možnost na 7.
Existuje několik možností, jak v Elementor dosáhnout určité věci. Pokud jde o plovoucí tlačítko, můžete použít dvě možnosti. Zde jsme probrali pouze jednu metodu, druhou metodou bude další tutoriál.
Čtěte také: Elementor: Jak migrovat web WordPress
Pokud si přejete mít více možností stylingu, vytvoření plovoucího akčního tlačítka pomocí Popup's Builder bude lepší alternativou, protože budete mít možnosti přizpůsobit tlačítko i chování, jako je doba zavření tlačítka, doba trvání, vstupní nebo výstupní animace atd. .
Právě jste tento úkol snadno dokončili. Stačí si prohlédnout práci svého tabletu a smartphonu a pokusit se změnit okraje tak, aby odpovídaly každému zařízení.
Získejte nyní prvek Elementor Pro!
Proč investovat do čističky vzduchu?
Tak ! To je vše pro tento článek, který vám ukáže, jak aplikovat efekt přiblížení na kartu profilu. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět commentaires.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
