Nedávno nás jeden z našich čtenářů, kteří neměli verzi Elementor Pro, vyzval, jak může na svůj web přidat vlastní CSS.

Jelikož je problém trochu složitější, mysleli jsme si, že tomuto problému může čelit několik uživatelů. Rozhodli jsme se proto poskytnout podrobný článek o tom, jak se tam dostat.

V tomto článku vám ukážeme, jak snadno přidat vlastní CSS na stránku nebo web Elementor.

Tři způsoby, jak přidat vlastní CSS na stránku nebo web Elementor, jsou následující:

  • Přidejte kód CSS pomocí prvku HTML.
  • Prostřednictvím pluginu Úryvek kódu.
  • Používání přizpůsobovače motivů Elementor

Metoda 1: Přidejte kód CSS z prvku HTML Elementor

Tuto metodu použijte, pokud chcete přidat CSS pouze na jednu stránku.

Krok 1: Přetáhněte prvek Elementor HTML

Tento prvek HTML můžete umístit kamkoli na stránku a bude fungovat dobře.

Krok 2: Klikněte na ikonu Upravit HTML

Klikněte na ikonu Upravit html napravo od prvku Elementor HTML. Kliknutím na ni se na levé straně obrazovky zobrazí panel nástrojů pro úpravy HTML.

Krok 3: Přidejte svůj kód CSS

  1. Klikněte na záložku Obsah a otevřete rozevírací seznam HTML kód.
  2. Vložte svůj kód CSS do majáky.

Metoda 2: Vlastní CSS pro Elementor prostřednictvím pluginu Code Snippets

Výhody používání pluginu Code Snippets:

  • Pokud chcete změnit nebo aktualizovat své téma WordPress, použije se vždy CSS.
  • Toto je nejpohodlnější a nejefektivnější způsob přidání kódu CSS, protože můžete povolit nebo zakázat kód CSS jako doplňky.

Krok 1: Otevřete nabídku rozšíření na hlavním panelu

Krok 2: Přidejte nový plugin

Klikněte na tlačítko Add On »Přístup na stránku pro přidávání nových pluginů.

  1. Vyhledejte plugin " Úryvky kódu ".
  2. Nainstalujte jej kliknutím na tlačítko nainstalovat nyní jakmile jsou výsledky výzkumu pozitivní.

Krok 3: Aktivujte plugin

Custom CSS ve společnosti Elementor

Klikněte na tlačítko aktivovat »Po dokončení instalace aktivujte plugin Úryvky kódu.

Krok 4: Otevřete stránku pluginu a přidejte fragment kódu

  1. Otevřete nabídku extrakty z palubní desky
  2. Kliknutím na tlačítko Nouveau přidat nový fragment kódu

Krok 5: Vytvořte úryvek a aktivujte jej

  1. Pojmenujte fragment kódu.
  2. Do tagu napište svůj kód. Tento kód je níže k dispozici ke kopírování.
  3. Klikněte na tlačítko Uložit změny Chcete-li uložit fragment kódu.
  4. Po uložení CSS klikněte na „ aktivovat Aktivace kódu CSS.

Zkopírujte kód

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

Metoda 3: Použijte přizpůsobovač motivů Elementor

Poznámka: Před použitím této metody buďte opatrní, protože pokud změníte motiv, ztratíte tento vlastní CSS.

Krok 1: Otevřete nástroj pro přizpůsobení motivu

Custom CSS ve společnosti Elementor

Přejděte na svůj web a klikněte na možnost přizpůsobení na horním navigačním panelu. Otevře se okno přizpůsobení motivu.

Krok 2: Klikněte na další kartu CSS


Tím se otevře vstupní stránka CSS.

Krok 3: Přidejte svůj kód CSS

Custom CSS ve společnosti Elementor

Dobrý ! Nyní víte, jak snadno přidat vlastní CSS na stránku nebo web Elementor. Díky tomu bude design jedinečných webových stránek v aplikaci Elementor Free flexibilnější.

Získejte nyní prvek Elementor Pro!

Objevte také některé prémiové doplňky WordPress  

Můžete použít jiné WordPress pluginy poskytnout moderní vzhled a optimalizovat práci s vaším blogem nebo webem.

Nabízíme vám zde prémiové doplňky WordPress, které vám to pomohou.

1. FileBird

Filebird

Už jste někdy měli problémy se správou tisíců souborů obrázků, videí nebo dokumentů, které jste nahráli na váš WordPress FTP? ano nebo ne, na tom nezáleží, důležité je vědět, že WordPress Plugin FileBird vám pomůže snadno spravovat vaše mediální soubory a přinese více výkonu do vaší knihovny.

Jeho bezproblémové uživatelské rozhraní a místní nabídka umožňují uživatelům přetahovat soubory do složek nebo mít potřebná práva k rychlému vytváření, přejmenování nebo mazání složek stejným způsobem jako v počítači.

Díky tomuto pluginu budou vaše mediální soubory systematicky organizovány a můžete snadno vybrat obrázek, který chcete vložit na stránku, nebo jej publikovat. Kromě toho je tento plugin plně kompatibilní s nejoblíbenějšími pluginy, zejména s WooCommerce, a také podporuje velké množství jazyků.

Chcete-li se dozvědět více, objevte Jak spravovat soubory a složky WordPress

Takže pokud chcete dát podporu správa vaší knihovny médiíse WordPress Plugin FileBird může být vaší tajnou zbraní.

StáhnoutDemo | Web hosting

2. Ultimate WooCommerce Rozbalitelné kategorie

Dokonalé rozšiřitelné kategorie woocommerce

Ce WordPress Plugin umožňuje snadno upravovat dlouhé seznamy nudných kategorií WooCommerce a nahradit je různými úrovněmi podpoložek v nabídce akordeonu.

Mezi jeho hlavní funkce patří: možnost jeho aktivace a nakonec, že ​​funguje automaticky (nejsou nutné žádné parametry!), Podpora více úrovní kategorií (kategorie, podkategorie atd.), Zvýraznění aktivní kategorie, otevření všech nadřazených kategorií, pokud je aktuální kategorie uvnitř, kompatibilita s jakoukoli WooCommerce téma, reagovat na přání, bezplatné aktualizace a velmi aktivní zákaznická podpora.

Stáhnout | Demo | Web hosting

3. WavePlayer

Jak můžete uhodnout z názvu, WavePlayer je plugin pro audio přehrávač, který přebírá tvar vlny přehrávaného zvukového souboru. S tímto pluginem budete moci hostovat skladby nebo je jednoduše integrovat s jinými službami.cloud hosting, jako je SoundCloud.

Waveplayer premium wordpress pluginy přidávají audio přehrávač

Může být také použit pro účely podcastingu a nabízí další funkce, jako jsou: podpora HTML5, responzivní rozložení, integrace WooCommerce atd.

Před publikováním budete také moci vizuálně vytvořit seznam skladeb. Další základní vlastností je jeho rychlost a účinnost.

Stáhnout | Demo | Web hosting

Doporučené zdroje

Zjistěte další doporučené zdroje, které vám pomohou vytvořit a spravovat váš web.

Proč investovat do čističky vzduchu?

Tady ! To je pro tento tutoriál vše, doufáme, že vám pomůže přidat vlastní CSS do Elementoru zdarma. Neváhej sdílet se svými přáteli na svých oblíbených sociálních sítích

Budete však také moci konzultovat naše ressources, 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.

Pokud máte návrhy nebo připomínky, nechte je v naší sekci commentaires.

...