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

více Stahování 901.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.

Chtěli byste na Elementoru vytvořit plovoucí tlačítko s indexem Z?

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. Například spouštěče pro e-maily, sociální sítě, nasměrování návštěvníků k odběru kanálu a mnoho dalších.

V Elementoru existují dvě metody, 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

K vytvoření plovoucího akčního tlačítka pomocí této metody můžete použít bezplatnou verzi Elementor. Tlačítko, které jste navrhli, však musíte vložit na každou stránku, kde chcete, aby se tlačítko na vašem webu zobrazovalo.

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.

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

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

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

V tomto tutoriálu použijeme tlačítko jako spouštěč, který návštěvníky přiměje k procházení webu Elementor. Pak na opci zarovnání, nastavte jej na právo et, Nakonec změňte taille tlačítka Zapnout Velmi velký.

vytvořte plovoucí tlačítko s indexem Z

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.

vytvořte plovoucí tlačítko s indexem Z

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

vytvořte plovoucí tlačítko s indexem Z

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

vytvořte plovoucí tlačítko s indexem Z

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.

vytvořte plovoucí tlačítko s indexem Z

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!

závěr

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.

...

0 akcie
podíl
tweet
Zadat