Nedávno sa nás jeden z našich čitateľov, ktorí nemali Pro verziu Elementoru, spýtal, ako môže na svoje webové stránky pridať vlastné CSS.

Pretože je problém trochu zložitejší, mysleli sme si, že s týmto problémom by sa mohlo stretnúť niekoľko používateľov. Preto sme sa rozhodli poskytnúť podrobný článok, ako sa tam dostať.

V tomto článku si ukážeme, ako ľahko pridať vlastné CSS na stránku alebo webovú stránku Elementor.

Existujú tri spôsoby, ako pridať vlastné CSS na stránku alebo webovú stránku Elementor:

  • Pridajte kód CSS pomocou prvku HTML.
  • Cez doplnok Úryvkový kód.
  • Používanie nástroja na prispôsobenie tém Elementor

Metóda 1: Pridajte kód CSS z prvku HTML Elementor

Túto metódu použite, ak chcete pridať CSS iba na jednu stránku.

Krok 1: Presuňte a pusťte element HTML Elementor

Tento prvok HTML môžete umiestniť kamkoľvek na stránku a bude fungovať dobre.

Krok 2: Kliknite na ikonu Upraviť HTML

Kliknite na ikonu Upravte html napravo od prvku HTML prvku Elementor. Kliknutím na ňu sa na ľavej strane obrazovky zobrazí panel nástrojov na úpravy HTML.

Krok 3: Pridajte svoj kód CSS

  1. Kliknite na kartu Obsah a otvorte rozbaľovací zoznam HTML kód.
  2. Vložte svoj kód CSS do majáky.

Metóda 2: Vlastné CSS pre Elementor pomocou doplnku Code Snippets

Výhody použitia doplnku Code Snippets:

  • Ak chcete zmeniť alebo aktualizovať svoju tému WordPress, použije sa vždy CSS.
  • Toto je najpohodlnejší a najefektívnejší spôsob pridania kódu CSS, pretože môžete povoliť alebo zakázať kód CSS ako doplnky.

Krok 1: Na hlavnom paneli otvorte ponuku rozšírení

Krok 2: Pridajte nový doplnok

Kliknite na tlačidlo Add On »Prístup na stránku pre pridávanie nových doplnkov.

  1. Vyhľadajte doplnok „ Odchýlky kódu „.
  2. Nainštalujte ho kliknutím na tlačidlo nainštalovať teraz akonáhle sú výsledky výskumu pozitívne.

Krok 3: Aktivujte doplnok

Vlastné CSS u Elementora

Kliknite na tlačidlo aktivovať »Po dokončení inštalácie aktivujte doplnok Úryvky kódu.

Krok 4: Otvorte stránku doplnku a pridajte útržok kódu

  1. Otvorte ponuku extrakty z palubnej dosky
  2. Kliknutím na tlačidlo Nouveau pridať nový útržok kódu

Krok 5: Vytvorte úryvok a aktivujte ho

  1. Pomenujte svoj útržok kódu.
  2. Do štítku napíšte kód. Tento kód je na kopírovanie k dispozícii nižšie.
  3. Kliknite na tlačidlo Uložiť zmeny Ak chcete uložiť útržok kódu.
  4. Po uložení CSS kliknite na „ aktivovať Aktivácia kódu CSS.

Skopírujte kód

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

Metóda 3: Použite nástroj na prispôsobenie témy Elementor

Poznámka: Pred použitím tejto metódy buďte opatrní, pretože ak zmeníte tému, stratíte tento vlastný CSS.

Krok 1: Otvorte nástroj na prispôsobenie témy

Vlastné CSS u Elementora

Prejdite na svoj web a kliknite na možnosť prispôsobenia na hornom navigačnom paneli. Týmto sa otvorí okno prispôsobenia témy.

Krok 2: Kliknite na ďalšiu kartu CSS


Týmto sa otvorí vstupná stránka CSS.

Krok 3: Pridajte svoj kód CSS

Vlastné CSS u Elementora

Dobre! Teraz viete, ako ľahko pridať vlastné CSS na stránku alebo webovú stránku Elementor. Vďaka tomu bude dizajn jedinečných webových stránok v aplikácii Elementor Free flexibilnejší.

Získajte teraz prvok Elementor!

Objavte aj niektoré prémiové doplnky WordPress  

Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prácu s vaším blogom alebo webovou stránkou.

Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.

1. FileBird

Filebird

Už ste niekedy mali problémy so správou tisícok súborov obrázkov, videí alebo dokumentov, ktoré ste nahrali na svoj WordPress FTP? áno alebo nie, na tom nezáleží, dôležité je vedieť, že WordPress Plugin FileBird vám pomôže ľahko spravovať vaše mediálne súbory a prinesie viac výkonu do vašej knižnice.

Jeho plynulé užívateľské rozhranie a kontextové menu umožňujú používateľom presúvať súbory do priečinkov alebo majú potrebné práva na rýchle vytváranie, premenovanie alebo mazanie priečinkov rovnakým spôsobom ako v počítači.

Vďaka tomuto doplnku v ruke budú vaše mediálne súbory systematicky usporiadané a môžete jednoducho vybrať obrázok, ktorý chcete vložiť na stránku, alebo ho zverejniť. Tento doplnok je navyše plne kompatibilný s najpopulárnejšími doplnkami, najmä s WooCommerce, a tiež podporuje veľké množstvo jazykov.

Ak chcete zistiť viac, objavte Ako spravovať súbory a priečinky WordPress

Takže ak chcete dať podporu správa knižnice médiísa WordPress Plugin FileBird môže byť vašou tajnou zbraňou.

Stiahnuťdemo | web hosting

2. Ultimate WooCommerce Rozšíriteľné kategórie

Konečne rozšíriteľné kategórie woocommerce

Ce WordPress Plugin umožňuje jednoducho upravovať dlhé zoznamy nudných kategórií WooCommerce a nahradiť ich rôznymi úrovňami podpoložiek v ponuke akordeónu.

Jeho hlavné funkcie sú: možnosť aktivácie a nakoniec to, že pracuje automaticky (nie sú potrebné žiadne parametre!), Podpora viacerých úrovní kategórií (kategórie, podkategórie atď.), Zvýraznenie aktívna kategória, otvorenie všetkých nadradených kategórií, ak je aktuálna kategória vo vnútri, kompatibilita s ľubovoľnými Téma WooCommerce, reagovať na želanie, bezplatné aktualizácie a veľmi aktívna podpora zákazníkov.

Stiahnuť | demo | web hosting

3. WavePlayer

Ako by ste mohli uhádnuť z názvu, WavePlayer je doplnok audio prehrávača, ktorý preberá tvar vlny prehrávaného zvukového súboru. Pomocou tohto doplnku budete môcť hostiť skladby alebo ich jednoducho integrovať s inými službami.cloud hosting, ako je napríklad SoundCloud.

Prémiové doplnky wordpress pre Waveplayer pridávajú zvukový prehrávač

Môže byť tiež použitý na účely podcastingu a ponúka ďalšie funkcie, ako napríklad: podpora HTML5, responzívne rozloženie, integrácia WooCommerce atď.

Pred zverejnením zoznamu skladieb budete tiež môcť jeho vytvorenie vizuálne. Ďalšou podstatnou vlastnosťou je jeho rýchlosť a účinnosť.

Stiahnuť | demo | web hosting

Odporúčané zdroje

Zistite ďalšie odporúčané zdroje, ktoré vám pomôžu pri vytváraní a správe vašich webových stránok.

záver

Tu ! To je pre tento tutoriál všetko, dúfame, že vám pomôže zadarmo pridať vlastné CSS do aplikácie Elementor. Neváhaj zdieľať so svojimi priateľmi na obľúbených sociálnych sieťach

Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress.

Ak máte nejaké návrhy alebo pripomienky, nechajte ich v našej sekcii Komentáre.

...