Používání vlastního CSS je v Elementoru je běžnou součástí návrhu webu, je však třeba si dobře promyslet, jest je to opravdu potřeba.

<aside> 💡 Držte se pravidla: CSS vytvoří vše, ale opravu nelze tato část vytvořit nastavením widgetu nebo kombinací widgetů?

</aside>

Vlastní CSS volte až v poslední chvíli a vždy je lepší strávit čas oběvováním a nastavováním widgetu, než vždy zkoušet přímo vše řešit vlastním CSS. Pamatujte si heslo v jednoduchosti je krása.

Pokud se už k použití vlastního CSS chystáte a nemáte jinou možnost, zkuste se držet následujících pravidel. Zjednodušíte si tím systém webu a předejdete problémům rozbití designu při aktualizacích různých částí WordPressu.

Kde psát vlastní CSS a kde ne?

Možností kde psát vlastní CSS je vždy několik. Vždy začněte na tzn. nejnižší úrovni a postupujte vzhůru. Úrovně si lze představit tímto způsobem. 1 - 5 značí od nejnižší úrovně k nejvyšší.

V každé čísti Elementoru Pro (bezplatná verze tyto části nepodporuje) je vždy možnost otevřít záložku Advanced, kde se nachází sekce Custom CSS. V této části můžete psát libovolné CSS, tedy ovlivnit vše na dané stránce.

Nastavení šablony pro použití vlastního CSS volte opravdu ve velmi výjimečných případech. Tato část ovlivní vše na webu (v šabloně WordPress). Kde lze třeba toto natavení použít? Třeba pro nastavení některých globálních částí 🚧 WooCommerce a jiných pluginů, které nelze vidět v Elementoru.

Jak psát CSS?

CSS se píše naprosto stejně jako v klasickém kódu. Navíc ale zde používáme značku selector. Tato značka označí vždy danou část webu. Tedy widget, page, post, section a další.

<aside> ☝ selector - Tento prvek je NUTNÉ používat! Jinak můžete nedopatřením ovlivnit jiné části webu!

</aside>

selector .inner-container {
	// CSS code
}

selector.ele-widget {
	// CSS code
}

Pomocí selector označujete konkrétní widget u kterého píšete vlastní CSS. Pro klienta se tato část tváří například jako #elem-id-XXXYYYXY, tedy je proměnlivé. Více informací na oficiálních stránkách https://elementor.com/help/how-to-use-selector-in-the-custom-css-tab/

Co responzivní design?

Vyhněte se používání jakýchkoliv @media! Místo toho využívejte techniku přepínače přímo v Elementoru. Výhodou je, že vám umožní vše nastavovat uvnitř Elementoru a nebude tak mít zmatek co na co reaguje.

body[data-elementor-device-mode=mobile] selector ...další selektory... {
	/* CSS code mobile */
}

body[data-elementor-device-mode=tablet] selector ...další selektory... {
	/* CSS code tablet */
}

body[data-elementor-device-mode=desktop] selector ...další selektory... {
	/* CSS code desktop */
}

Tento návod vychází z již několikrát řešeného problému Add responsive selector to Custom CSS na GitHub.

ZDROJE:

https://www.wppagebuilders.com/elementor-widget-selectors-list/