Elementor: Ako prispôsobiť tému WordPress

Chceli by ste zistiť, ako prispôsobiť tému WordPress pomocou Elementor plugin ?

Prispôsobenie témy WordPress je jednou z hlavných úloh pri vytváraní webových stránok WordPress. Pretože ovláda vzhľad webovej stránky, mnoho odborníkov trávi väčšinu času týmto spôsobom.

Vytvorenie vlastnej témy WordPress zvyčajne zahŕňa prácu so súbormi tém a editorom kódov. Zmeny rozloženia sa vyskytujú v súboroch šablón, zmeny dizajnu prostredníctvom CSS. Tiež budete musieť neustále obnovovať okno prehliadača, aby ste zobrazili svoje prispôsobenia, ktoré môžu byť trochu ťažkopádne.

Našťastie s Elementor, tento proces sa stáva mimoriadne ľahkým, takže by ste si ho mohli pozrieť.

Ale predtým sa spolu objavíme Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu.

Potom späť k tomu, prečo sme tu.

Čo je téma WordPress

Téma WordPress je v podstate zbierka šablón, ktoré definujú vizuálny vzhľad webovej stránky WordPress.

Téma WordPress zahŕňa všetko, čo ovplyvňuje návrh webovej stránky, od hlavičiek a pätičiek až po farebnú schému, rozloženie a ďalšie.

K dispozícii je množstvo tém, bezplatných aj prémiových, ktoré sa hodia takmer do každého odvetvia fotografie, webové stránky telocvične, webové stránky pre kadernícke salóny, právne webové stránkyA ďalšie.

Prečo si prispôsobiť tému WordPress?

Jedným z hlavných dôvodov pre vytvorenie webovej stránky je propagácia vašej firmy. Aký lepší spôsob, ako to urobiť, ako to urobiť vytvoriť webovú stránku jedinečný, ktorý podporuje štýl a dizajn spoločnosti.

Viete si predstaviť, že Amazon, eBay alebo Google sú tým, čím sú, bez ich jedinečného dizajnu?

Samozrejme, že nie, a to je jeden z dôvodov, prečo chceme prispôsobiť tému WordPress. Chceme, aby bol jedinečný a prispôsobený posolstvu našej spoločnosti.

Niekedy alebo skôr často tiež prechádzate témou WordPress, ktorá je sužovaná zlým dizajnom, farbami, ktoré nejdú dobre spolu, alebo témou, ktorá je príliš ťažká a ovplyvňuje iba výkon stránok. web. Téma WordPress by mohla byť silná okrem tej veci, ktorá vám vadí. Prispôsobte si to a zmena tejto veci by mohla vyriešiť všetky vaše problémy a vytvoriť lepšia používateľská skúsenosť.

Ako prispôsobiť tému WordPress

Existuje niekoľko metód na prispôsobenie témy WordPress.

1. Ručne pomocou prispôsobovača WordPress
2. S kódom
3. S Elementorom

Ako ručne prispôsobiť tému WordPress

Tému WordPress podľa vlastného výberu si môžete prispôsobiť pomocou vstavaného nástroja WordPress Customizer. Ak to urobíte bez kódu, často ste obmedzený v tom, čo môžete zmeniť. Niektorí Témy WordPress premium vám umožní viac možností prispôsobenia, ale v podstate pre vás nie je veľa možností dizajnu.

Než sa ponoríme hlbšie do tejto oblasti, chceli by sme zdôrazniť, že keď prispôsobíte existujúcu tému WordPress, je najlepšie použiť ju detská téma a nie materská téma.

Dieťa téma WordPress

Podradená téma je téma WordPress, ktorá má úplne rovnaké funkcie a vlastnosti ako iná téma WordPress, rodičovská téma. Podradená téma sa používa na bezpečné prispôsobenie a úpravu témy bez ovplyvnenia nadradenej témy a bez straty jej aktualizácie. 

Prispôsobovač tém WordPress

Teraz, keď vieme, že je najlepšie pracovať s podradenou témou, naučme sa, ako prispôsobiť tému pomocou programu WordPress Customizer. Prístup k nej získate na hlavnom paneli kliknutím na apparence na ľavej strane a vyberte položku Prispôsobiť.

Hlavné funkcie, ktoré môžete pomocou tohto prispôsobovača upraviť, sú nasledujúce:

Pridanie názvu webovej stránky, loga a ikony

Ak chcete pridať alebo zmeniť názov, logo alebo ikonu, môžete jednoducho prejsť na panel Identity na webovej stránke. a vyberte každý z týchto prvkov na ich úpravu.

Zmena farieb témy WordPress

niektorí Témy WordPress vám umožní zmeniť ich farebné schémy, ale nie všetky, a zvyčajne sú Témy WordPress prémie. Ak vám vaša téma WordPress umožňuje zmeniť farebnú schému, táto možnosť sa vám zobrazí, keď vstúpite do nástroja Customizer.

Pridanie navigačných ponúk

Prispôsobovač vám tiež umožňuje jednoducho pridávať a upravovať navigačné ponuky webových stránok.

Ako prispôsobiť tému WordPress pomocou kódu

Všimnite si, že na karte Vzhľad máte možnosť vybrať si editor tém. Kliknutím naň vás privíta okno s kódom témy. Táto voľba vyžaduje dobré pochopenie kódovania CSS a nie je odporúčaná pre začiatočníkov.

Tu budete mať prístup k súborom ako style.css, features.phpa práve pre tento scenár budete potrebovať podriadenú tému, aby ste nenarušili svoje webové stránky.

Ďalším spôsobom, ako prispôsobiť svoju tému kódovaním, je odovzdanie súborov pomocou riešenia FTP. Tento proces spočíva v vytvorení poverení FTP prostredníctvom poskytovateľa hostingu, stiahnutí a inštalácii riešenia FTP (napríklad FileZilla), prihlásení do vášho účtu a úprave súborov, ktoré potom pomocou nich odovzdáte. FTP riešenie.

Objavte nášho sprievodcu Ako nainštalovať WordPress pomocou FileZilla

Pokiaľ nie ste oboznámení s kódovaním, neodporúčame túto možnosť.

Prispôsobte si tému WordPress ľahko pomocou aplikácie Elementor

Môžete to urobiť priamo z používateľského rozhrania. Nie je potrebné meniť jeden riadok kódu ani znova načítať okno prehliadača, a to ani raz.

Elementor vám umožní rýchlo a ľahko zmeniť každý prvok webovej stránky pomocou niekoľkých kliknutí myšou a tieto funkcie môžete dokonca optimalizovať pre mobilnú platformu.

Elementor tento proces značne uľahčuje pomocou dynamického obsahu a umožňuje vám zobraziť ukážku stránok. Týmto spôsobom môžete okamžite zistiť, ako zmeny v dizajne ovplyvnia váš skutočný web a obsah.

Prispôsobte hlavičku a pätu

Elementor vám umožňuje úplnú flexibilitu pri navrhovaní záhlavia a päty. Všetci vieme, aké nudné môže byť, že máte tému WordPress a nemôžete zmeniť jediný aspekt dizajnu hlavičky alebo päty. Potrebujete špecializované témy, doplnky atď.

S prvkom Elementor je to ľahké.

1. Vytvorte šablónu hlavičky

Najskôr nakonfigurujte novú šablónu hlavičky. Ak to chcete urobiť, prejdite na Elementor> Moje šablóny.

Jeden spôsob, ako začať, je stlačiť tlačidlo Pridať nový hore. Na ďalšej obrazovke použite rozbaľovaciu ponuku a vyberte typ záhlavia ako typ navrhovanej šablóny.

Na túto obrazovku sa môžete dostať aj kliknutím na kartu Hlavička z predchádzajúcej obrazovky a potom stlačením zobrazeného veľkého zeleného tlačidla.

Predvolí hlavičku ako typ šablóny. V každom prípade musíte do šablóny pridať vhodný názov (aby ste vedeli, čo je neskôr) a potom pokračujte kliknutím na Vytvoriť šablónu.

Dostane sa sem.

S prvkom Elementor Pro si môžete vybrať z vopred navrhnutých blokov hlavičiek. Toto sú šablóny dizajnu, ktoré môžete použiť ako východiskový bod pre svoj vlastný dizajn, čo v tomto prípade urobíme.

Keď umiestnite kurzor myši na blok hlavičky, kliknite na tlačidlo Vložiť umožňuje začať s návrhom okamžite. V opačnom prípade kliknite na obrázok a zobrazte väčšiu verziu. Potom môžete vždy stlačiť Vložiť v hornej časti.

V opačnom prípade, ak chcete začať od nuly, jednoducho zatvorte okno kliknutím na X v pravom hornom rohu.

2. Zmeňte základný dizajn hlavičky

Po zadaní novej hlavičky si prvá vec, ktorú si všimnete, je, že logo a menu, ktoré sme predtým nakonfigurovali, sú už tam.

To je presne dôvod, prečo sme ich spojili a budeme hovoriť o tom, ako ich prispôsobiť. Najprv však uvidíme, ako prispôsobiť samotnú časť hlavičky.

Ak to chcete urobiť, jednoducho naň umiestnite kurzor myši a kliknite na tlačidlo Upraviť v hornej časti. Tým sa vľavo otvorí zoznam možností úprav.

Tu je to, čo môžete ovládať v rôznych ponukách:

• Dispozícia - Ovládajte šírku sekcie, veľkosť medzery medzi stĺpcami, jej výšku, vertikálny stĺpec a umiestnenie obsahu, priradenú značku HTML a všeobecnú štruktúru.
• Štýl - Tu môžete zmeniť farbu pozadia vrátane efekty vznášania, dokonca pridať obrázok alebo video ak chcete, pridajte efekty prekrytia, orámovania a oddeľovača a tiež zmeňte nastavenia typografie.
• avanced - Táto časť vám umožňuje pridať atribúty CSS, ako sú okraj a index z, animácie, ID a triedy. Umožňuje tiež nastaviť lepivú časť a ovládať nastavenia a pridať niektoré Vlastné CSS.

Všetky vyššie uvedené informácie sú celkom samozrejmé a rýchlo dostanete, čo chcete.

3. Prispôsobte prvky hlavičky

Môžete však nielen upraviť časť hlavičky ako celok, ale aj položky v nej obsiahnuté. Napríklad, ak chcete prispôsobiť logo webovej stránky, stačí naň kliknúť. Aj toto vám poskytne možnosti úprav na ľavej strane.

V prípade loga získate nasledujúce možnosti:

• obsah - Zmeňte veľkosť obrázka, zarovnanie a miesto, na ktoré je pripojený.
• Štýl - Ovládajte šírku a výšku, pridajte efekty CSS a efekty vznášania sa, ak chcete, zahrňte ohraničenie a tieň.
• avanced - Tu nájdete v podstate rovnaké možnosti ako v sekcii hlavičky.

Pomocou nastavení upravte logo tak, aby sa malo dobre zobrazovať v hlavičke. Upozorňujeme tiež, že každá položka má svoj vlastný typ možností, preto si každú skontrolujte.

4. Pridajte položky

Samozrejme, s prvkom Elementor môžete tiež pridať položky do hlavičky. Stačí kliknúť na symbol v pravom hornom rohu a zistiť, čo je k dispozícii.

Pri úprave šablóny záhlavia Elementor automaticky zobrazí príslušné bloky v hornej časti zoznamu, čo má za daných okolností najväčší zmysel. V takom prípade sa jedná o veci ako logo webovej stránky, navigačné menu a názov webovej stránky.

Napríklad, ak chcete pridať názov webovej stránky vedľa loga, jednoducho naň pretiahnite myšou. Šablóna hlavičky, ktorú sme práve vybrali, nám však umožňuje pridať ju nad alebo pod logo. Je to však problém, ktorý sa dá ľahko vyriešiť.

V takomto prípade umiestnite kurzor myši na hlavičku a použite symbol plus –+- pridať sekciu vyššie.

Kliknite sem na fialové tlačidlo a vyberte si dizajn s tromi stĺpcami.

Potom pretiahnite prvky z existujúcej sekcie hlavičky do novej sekcie a pridajte nadpis webovej stránky do stredu.

Ale počkajte, štýl je úplne iný! žiaden problém. Stačí kliknúť pravým tlačidlom na existujúcu hlavičku a vybrať Kópia. Potom kliknite pravým tlačidlom myši na novú sekciu a kliknite sem Vložiť štýl. Elementor potom použije štýl existujúcej sekcie, ktorú môžete neskôr zavrieť. 

Rovnaký proces môžete vykonať s ktorýmkoľvek z ďalších prvkov hlavičky a samozrejme so všetkými ostatnými prvkami zahrnutými v prvku Elementor.

Prispôsobte jedinečnú šablónu príspevku

V aplikácii Elementor môžete tiež prispôsobiť jednu šablónu príspevku. Tu je postup:

1. Vytvorte nový model

Vytvorenie šablóny funguje obvyklým spôsobom. Tentoraz však zvoliť jednoposteľová ako typ modelu. Potom nižšie vyberte jedinečnú šablónu, ktorú chcete upraviť. V tomto príklade je to príklad pošta.

Ak chcete vytvoriť nový dizajn stránky, upravte svoju stránku 404 (viac o tom neskôr) alebo upravte vlastný typ príspevku konkrétne by ste si vybrali niečo iné. V oboch prípadoch zadajte názov a pokračujte.

Na nasledujúcej obrazovke si môžete vybrať z preddefinovaných šablón ako zvyčajne. V tomto prípade však chceme vytvoriť nový model od nuly. Kliknutím na symbol X vpravo hore zatvorte toto okno.

2. Nakonfigurujte ukážku

Potom nastavte okno ukážky na existujúci príspevok. Môžete to urobiť kliknutím na ikonu oka v dolnej časti možností editora a potom Nastavenia.

V ponuke, ktorá sa otvorí, pod položkou náhľad dynamický obsah, vyberte Publikovať. Potom v ďalšom riadku môžete vyhľadať a vybrať existujúci príspevok podľa mena.

Keď to urobíte, klepnite na Podať žiadosť & náhľad, Aj keď v tejto chvíli nebudete vidieť nič (pretože na stránke nie je nič), povie Elementorovi, aby odteraz použil údaje v tomto príspevku. Čoskoro uvidíte, čo to znamená.

3. Vytvorme sekciu vyššie 

Najprv vytvoríme vyššie uvedenú časť. Tu nájdete zvyčajne položky ako názov príspevku a metadáta, ako je autor, dátum a kategória.

Prvým krokom je kliknúť na znamenie + a vytvorenie jednej sekcie stĺpca.

Ak tak urobíte, v časti rozloženia máte možnosť ovládať jej šírku, výšku, umiestnenie a štýl. V tomto prípade tu nie je čo robiť. Nebojte sa, vždy sa môžete kedykoľvek vrátiť a vykonať zmeny neskôr.

Potom posuňte miniaplikáciu s názvom príspevku do novej sekcie.

Ak tak urobíte, nezabudnite použiť všetky dostupné možnosti na úpravu dizajnu a rozloženia podľa vašich predstáv. Tu sú napríklad moje nastavenia:

K dispozícii je tiež skvelá funkcia, ktorú by ste sa mali naučiť. Keď kliknete na symbol kľúča názvu príspevku, môžete pridať statický obsah pred a za svoje dynamické údaje.

Ak napríklad vytvoríte šablónu pre určitú kategóriu príspevku, napríklad pre správy alebo recepty, môžete ju pridať do názvu príspevku takto:

Takto by sa tieto údaje zobrazili pre každý príspevok v tejto kategórii. V tejto chvíli to nebudem používať, ale myslel som si, že to bola pre vás dôležitá vedľajšia poznámka.

Pod názov príspevku vložíme pošta Info widget na zobrazenie metadát príspevku.

Tu uvádzam nastavenia, ktoré používam:

Okrem toho som použil možnosti štýlu, aby bol dizajn vhodný pre zvyšok stránky. Uistite sa, že robíte to isté.

4. Nastavte teleso stĺpika

Za hlavičkou je čas vytvoriť telo stránky. Ak chcete, aby táto časť mala iný dizajn ako hlavička, budete musieť vytvoriť novú časť. Snažím sa však o to jednoduché, takže nemusím.

Prvá vec, ktorú chceme vložiť, je odporúčaný obrázok. Za týmto účelom môžete umiestniť miniaplikáciu s rovnakým menom pod to, čo už je na stránke.

V zásade som nijaké nastavenie nezmenil, iba som nechal všetko tak, ako je.

Potom je čas na uverejnenie obsahu. Aj tu máte zodpovedajúci blok.

Všimnite si, že v prípade odporúčaného obrázkového a poštového obsahu Elementor automaticky sťahuje to, čo už je na webových stránkach. Vykonajte akékoľvek úpravy vzhľadu nového bloku, ktorý potrebujete, napríklad hraním s typografickým nastavením.

To je všetko. Nie je toho veľa práce, aby sme sa dostali k poslednej časti.

5. Nakonfigurujte pätu

V tomto prípade chceme, aby sa v päte zobrazoval profil autora, možnosti zdieľania a komentáre čitateľa. Najprv musíme vytvoriť novú sekciu s dvoma stĺpcami. Ak chcete vytvoriť viac miesta pre profil autora, môžete ho nastaviť na rozloženie 66.33.

Potom umiestnite miniaplikáciu Pole pre autorov v ľavej časti.

Nezabudnite prispôsobiť štýl tak, aby vyhovoval vašim potrebám. Pridal som trochu farby pozadia a mierne som upravil nastavenia typografie.

Potom je čas pridať blok Zdieľať tlačidlá na pravej strane.

Moje nastavenia vidíte na obrázku vyššie.

Potom zostáva len vytvoriť sekciu o jeden stĺpec nadol a presunúť do nej miniaplikáciu Post Comments.

(Mimochodom, ak máte niekedy problémy s nájdením niektorého z týchto miniaplikácií, jednoducho použite funkciu vyhľadávania).

Vykonajte akékoľvek úpravy v sekcii komentárov, ktoré považujete za potrebné (nechal som ju tak, ako sú) a ste pripravení uverejňovať príspevky. Tu je hotový dizajn:

Prispôsobte šablónu archívu

1. Nakonfigurujte archívnu šablónu WordPress

Už teraz viete riešenie pri vytváraní nových modelov. Jediným rozdielom je, že v tomto prípade si vyberiete Archív ako typ modelu.

Potom, ako obvykle, získate niekoľko blokov, z ktorých si môžete vybrať, alebo si môžete tiež vytvoriť svoj vlastný model od nuly. Pre archívy však máte iba dva widgety Element, ktoré sú rovnako dôležité.

2. Definujte názov archívu

Prvý blok, o ktorom chcem hovoriť, je názov archívu Názov archívu.

Okrem obvyklých nastavení v časti Štýl a pokročilý, nájdete dôležitú možnosť po kliknutí na symbol kľúča pod položkou Názov.

Tu môžete povoliť alebo zakázať, či Elementor zobrazuje typ archívu na stránke, ako je časť, kde je nižšie uvedené Autor:. To sa deje pomocou tlačidla pod Zahrnúť kontext. 

Mimochodom, ako obvykle si môžete prezrieť rôzne archívy pomocou nastavení ukážky (Symbol oka> Nastavenia). Týmto spôsobom môžete vidieť dizajn jedinečných kategórií, značiek, autorov a ďalších. Majte to na pamäti.

3. Použite blok archívnych publikácií

Druhým dôležitým widgetom pre archívy je Archive Posts. Týmto sa zobrazia všetky príspevky patriace do ľubovoľného archívu na jednej stránke. Keď vyberiete šablónu, sú už v nej k dispozícii, ale pomocou tohto bloku ich môžete tiež ľahko pridať sami.

Pozrime sa na možnosti, ktoré vám umožňujú prispôsobiť svoje archívne stránky:

• Koža - Vyberte, či chcete svoje príspevky zobrazovať v klasickom alebo kartovom štýle.
• Stĺpce - Určuje počet stĺpcov, v ktorých sa zobrazujú vaše príspevky.
• Zobraziť obrázok - Aktivujte odporúčané obrázky na archívnych stránkach
• Murivo – Zobrazuje položky v murovanom dizajne alebo nie.
• Veľkosť obrázka - Veľkosť obrazového prvku, ktorý by sa mal použiť na archívnych stránkach.
• nadpis - Chcete zobraziť názvy príspevkov?
• Názov značky HTML - Ak áno, ktorú značku HTML by sa mala omotať okolo nej?
• Výňatok - Zahrňte úryvky z vašich príspevkov alebo zobrazte iba názov.
• Výňatok dĺžka - Stanovte dĺžku extraktov.
• Metadáta - Definuje post metadáta dostupné pre návštevníkov.
• Oddeľovač medzi - Symbol oddeľovača medzi informáciami o metaúdajoch.
• Čítaj viac - Zahrnúť odkaz „prečítať viac“, áno alebo nie?
• odznak - Umožňuje vám pridať ďalšie informácie k príspevkom, ako sú kategórie a značky.
• Odznak taxonómie - Tu sa môžete rozhodnúť, ktoré informácie zahrnúť.
• avatar – Pomocou toho môžete zmeniť profilový obrázok autorov článkov

Okrem vyššie uvedeného máte aj niekoľko ďalších možností. pod paging, môžete definovať spôsob spracovania stránkovania archívov. Napríklad, ako ju zobraziť, počet strán, ktoré sa majú zahrnúť, a zarovnanie textu.

Enfin, pokročilý umožňuje nastaviť zobrazenie správy, keď sa návštevník dostane do prázdneho archívu. Všetko ostatné by malo byť známe. Len si všimnite, že možnosti štýlu sa menia v závislosti od pokožky, ktorú ste si vybrali.

4. Skontrolujte počet publikácií na archív

Stručná poznámka o archívnych šablónach. Ak chcete zmeniť počet príspevkov, ktoré sa zobrazujú v archíve (alebo na vašej blogovej stránke), musíte to urobiť v programe WordPress v časti Nastavenia> Čítanie. 

Tu stačí zadať počet príspevkov, ktoré majú návštevníci vidieť.

personalizácie jednoduchý Téma WordPress s prvkom Elementor

Prispôsobenie tém WordPress je chlebom a maslom mnohých profesionálov. Hoci to zvyčajne zahŕňa veľa kódovania a úprav súborov, s Elementor to už nie je potrebné.

Ako ste videli vyššie, doplnok je plnohodnotným editorom tém WordPress. Umožňuje vám prispôsobiť si všetky jeho časti pomocou používateľského rozhrania. Môžete upravovať hlavičky webových stránok, päty, šablóny strán a príspevkov, archívne šablóny a ďalšie.

Vďaka možnosti používať dynamický obsah a zobraziť ukážku ktorejkoľvek časti svojho webu môžete implementovať všetky trendy prispôsobenia

V skratke, Elementor uľahčuje prispôsobenie vašej témy WordPress. Namiesto starostlivého vykonávania zmien s desiatkami súborov a stovkami riadkov kódu, môžete to urobiť rýchlo na jednom mieste.

Získajte teraz prvok Elementor!

záver

Je to tu ! To je všetko pre tento článok, ktorý vám ukáže, ako prispôsobiť tému WordPress pomocou nástroja Page Builder Elementor. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...