Ako ─żahko vytvori┼ą vlastn├║ t├ęmu WordPress (bez k├│du)

Chcete vytvori┼ą vlastn├║ t├ęmu WordPress od za─Źiatku?

V minulosti ste museli vytvori┼ą k├│d WordPress a ma┼ą slu┼ín├ę znalosti k├│dovania, aby ste vytvorili vlastn├║ t├ęmu WordPress. Ale v─Ćaka nov├Żm gener├ítorom t├ęm WordPress si teraz m├┤┼że ktoko─żvek vytvori┼ą ├║plne vlastn├║ t├ęmu WordPress za jednu hodinu (nie s├║ potrebn├ę ┼żiadne znalosti k├│dovania).

V tomto ─Źl├ínku v├ím uk├í┼żeme, ako ─żahko vytvori┼ą vlastn├║ t├ęmu WordPress bez toho, aby ste museli p├şsa┼ą ak├Żko─żvek k├│d.

Vytvorte si vlastn├║ t├ęmu WordPress pre za─Źiato─Źn├şkov

Na rozdiel od statick├Żch str├ínok HTML s├║ t├ęmy WordPress s├║borom ┼íabl├│nov├Żch s├║borov nap├şsan├Żch v PHP, HTML, CSS a JavaScript. Zvy─Źajne by ste mali ma┼ą slu┼ín├ę porozumenie v┼íetk├Żm t├Żmto jazykom webov├ęho dizajnu alebo si naja┼ą webov├ęho v├Żvoj├íra, aby ste si vytvorili vlastn├║ t├ęmu WordPress.

Ak si najmete v├Żvoj├íra alebo agent├║ru, n├íklady na vlastn├║ t├ęmu WordPress m├┤┼żu vies┼ą k tis├şcom dol├írov.

Preto┼że mnoho majite─żov mal├Żch firiem si nem├┤┼że dovoli┼ą vysok├ę n├íklady na vlastn├║ t├ęmu WordPress, mnoh├ş sa jednoducho uspokojili s predvolen├Żmi t├ęmami, ktor├ę sa dod├ívaj├║ s programom WordPress.

T├ş, ktor├ş sa nechceli prisp├┤sobova┼ą a chceli prisp├┤sobenia, pou┼żili na vytv├íranie ┼íabl├│n str├ínok drag and drop aplik├ície WordPress alebo na vytvorenie vlastnej t├ęmy pou┼żili r├ímec t├ęm.

Aj ke─Ć tematick├ę r├ímce WordPress u─żah─Źili vytvorenie t├ęmy WordPress, s├║ rie┼íen├şm pre v├Żvoj├írov, nie priemern├ęho majite─ża webov├Żch str├ínok.

Na druhej strane, doplnky na vytv├íranie str├ínok WordPress u─żah─Źili vytv├íranie vlastn├Żch rozlo┼żen├ş str├ínok pomocou drag and drop rozhrania, ale boli obmedzen├ę iba na rozlo┼żenia. Nem├┤┼żete s t├Żm vytvori┼ą vlastn├ę mot├şvy.

Dokonca aj Beaver Builder, jeden z najlep┼í├şch doplnkov na tvorbu str├ínok WordPress, sa rozhodol tento probl├ęm vyrie┼íi┼ą pomocou doplnku s n├ízvom Beaver Themer.

Beaver Builder, najlep┼í├ş doplnok gener├ítora str├ínok WordPress

Beaver Themer je doplnok na vytv├íranie str├ínok, ktor├Ż v├ím umo┼ż┼łuje vytv├íra┼ą vlastn├ę n├ívrhy mot├şvov pomocou drag and drop rozhrania a bez nau─Źenia sa k├│dovania.

Pozrime sa, ako pou┼ż├şva┼ą Beaver Themer na ─żahk├ę vytvorenie t├ęmy WordPress.

V├Żukov├Ż program pre video

Prihláste sa na odber WPBeginner

Ak sa v├ím video nep├í─Źi alebo potrebujete ─Ćal┼íie pokyny, ─Ź├ştajte ─Ćalej.

Nakonfigurujte Beaver Themer na vytvorenie vlastnej t├ęmy

Beaver Themer je ─Ćal┼í├ş doplnok pre Beaver Builder, tak┼że budete potrebova┼ą oba pluginy pre tento ─Źl├ínok.

Najprv mus├şte nain┼ítalova┼ą a aktivova┼ą doplnky Beaver Builder a Beaver Themer. ─Äal┼íie inform├ície n├íjdete v na┼íej podrobnej pr├şru─Źke, ako nain┼ítalova┼ą doplnok WordPress.

Beaver Themer v├ím umo┼ż┼łuje vytvori┼ą vlastn├║ t├ęmu, ale na jej za─Źatie budete e┼íte potrebova┼ą nejak├║ t├ęmu. Ako v├Żchodiskov├Ż mot├şv odpor├║─Źame pou┼żi┼ą od─żah─Źen├║ t├ęmu, ktor├í obsahuje ┼íabl├│nu str├ínky s plnou ┼í├şrkou.

Mnoho z t├Żchto t├ęm n├íjdete v adres├íri t├ęm WordPress.org. Medzi najmodernej┼íie t├ęmy WordPress patr├ş ┼íabl├│na s plnou ┼í├şrkou. Na┼íe najlep┼íie mo┼żnosti s├║:

  • Astra – bezplatn├í a ─żahk├í univerz├ílna t├ęma WordPress, ktor├í je dod├ívan├í so zabudovanou podporou pre Beaver Builder.

  • OeanWP – ─Ćal┼íia ob─ż├║ben├í bezplatn├í viac├║─Źelov├í t├ęma WordPress, ktor├í prich├ídza s plnou podporou vytv├írania str├ínok.

  • T├ęmy StudioPress: V┼íetky va┼íe t├ęmy s├║ kompatibiln├ę s Beaver Builder a so Beaver Themerom by fungovali skvele.

Kv├┤li tomuto tutori├ílu pou┼żijeme Astra, ktor├í je ─żahkou a ─żahko prisp├┤sobite─żnou t├ęmou WordPress.

Nastavte si t├ęmu pre Beaver Themer

Pri vytv├íran├ş vlastnej t├ęmy WordPress s Beaver Themerom je d├┤le┼żit├ę zabezpe─Źi┼ą, aby Beaver Themer mal pr├şstup k cel├ęmu telu str├ínky (od okraja k okraju).

Toto je predvolen├ę rozlo┼żenie Astra. Ako vid├şte, tento dizajn obsahuje bo─Źn├Ż panel, s ktor├Żm je ┼ąa┼żk├ę pracova┼ą, ke─Ć pou┼ż├şvate Beaver Themer.

Predvolen├ę rozlo┼żenie t├ęmy s bo─Źn├Żm panelom

M├┤┼żete to zmeni┼ą tak, ┼że nav┼ít├şvite spr├ívcovsk├Ż panel svojej webovej str├ínky a potom prejdete na Vzh─żad ┬╗Prisp├┤sobi┼ą str. Odtia─ż by ste sa mali prepn├║┼ą na Dizajn ┬╗Bo─Źn├ę li┼íty tab.

disable barras bo─Źn├ę vo va┼íej t├ęme

V predvolenom nastaven├ş rozlo┼żenia jednoducho vyberte mo┼żnos┼ą ┼Żiadny bo─Źn├Ż panel a ulo┼żte zmeny kliknut├şm na tla─Źidlo Zverejni┼ą.

Va┼ía t├ęma za─Źne pou┼ż├şva┼ą rozlo┼żenie bez barras side. Toto je najlep┼í├ş dizajn, ktor├Ż m├┤┼żete pou┼żi┼ą s Beaver Themer.

T├ęma bez barras bo─Źn├ę

Toto rozlo┼żenie na celej str├ínke umo┼ż┼łuje spolo─Źnosti Beaver Themer pou┼ż├şva┼ą ka┼żd├Ż palec obrazovky, tak┼że si m├┤┼żete vytvori┼ą kr├ísny vizu├ílny z├í┼żitok od za─Źiatku do konca.

V├Ą─Ź┼íina t├ęm WordPress obsahuje s├║bor ┼íabl├│n pre str├ínky s plnou ┼í├şrkou. Ak pou┼ż├şvate nejak├║ in├║ t├ęmu, n├íjdete mo┼żnos┼ą odstr├íni┼ą barras strany v nastaven├ş t├ęmy.

Ak to nen├íjdete, kontaktujte v├Żvoj├íra t├ęmy a m├┤┼żu v├ím s t├Żm pom├┤c┼ą.

Po nastaven├ş t├ęmy v rozlo┼żen├ş v plnej ┼í├şrke ste pripraven├ş vytvori┼ą si vlastn├║ t├ęmu WordPress pomocou Beaver Themer.

Základy funkcie Quick Beaver Themer

Beaver Themer pracuje na Beaver Builderi. Ako doplnok k n├ístroju na tvorbu str├ínok v├ím Beaver Builder umo┼ż┼łuje drag and drop prvky na str├ínku vytv├íra┼ą vlastn├ę rozlo┼żenia.

M├í nasleduj├║ce prvky, ktor├ę m├┤┼żete pou┼żi┼ą vo svojich dizajnoch:

  • ┼áabl├│na – Zbierka st─║pcov, riadkov a modulov, ktor├ę tvoria ├║pln├ę rozlo┼żenie str├ínky.
  • St─║pce – moduly vertik├ílneho rozlo┼żenia, ktor├ę pom├íhaj├║ horizont├ílne zarovnanie obsahu.
  • Riadky: horizont├ílna kolekcia viacer├Żch modulov
  • Modul: prvok, ktor├Ż generuje konkr├ętne inform├ície, ako je n├ízov, textov├Ż blok, tabu─żka, gal├ęria at─Ć.

Sta─Ź├ş upravi┼ą str├ínku v n├ístroji Beaver Builder a potom kliknite na tla─Źidlo Prida┼ą v pravom hornom rohu. Potom m├┤┼żete presun├║┼ą st─║pce, riadky, moduly a presun├║┼ą ich na svoju str├ínku a ihne─Ć ich za─Źa┼ą upravova┼ą.

Pou┼żitie Beaver Builder

Ak si ne┼żel├íte za─Źa┼ą od nuly, vyberte zoznam vopred pripraven├Żch ┼íabl├│n, ktor├ę sa maj├║ za─Źa┼ą.

Šablóny Beaver Buildera

Beaver Builder v├ím tie┼ż umo┼ż┼łuje ulo┼żi┼ą svoje n├ívrhy a potom ich nesk├┤r pou┼żi┼ą ako ┼íabl├│ny.

Viac inform├íci├ş n├íjdete v na┼íom ─Źl├ínku o tom, ako vytvori┼ą vlastn├ę rozlo┼żenie str├ínky s Beaver Builder.

Nechceme v┼íak iba vytv├íra┼ą rozlo┼żenie str├ínky. Chceme vytvori┼ą kompletn├║ vlastn├║ t├ęmu.

Vtedy prichádza Beaver Themer.

Pridajte do Beaver Buildera ─Ćal┼í├ş prvok s n├ízvom ÔÇ×Rozlo┼żenie ThemerovÔÇť.

Themerov dizajn

Rozlo┼żenia Themer v├ím umo┼ż┼łuj├║ vytv├íra┼ą vlastn├ę rozlo┼żenia pre hlavi─Źku, p├Ątu, oblasti obsahu, str├ínku 404 a ─Ćal┼íie ─Źasti ┼íabl├│ny.

Toto s├║ stavebn├ę kamene v┼íetk├Żch t├ęm WordPress a pomocou nich budete m├┤c┼ą vytvori┼ą vlastn├║ t├ęmu, ktor├í vyhovuje va┼íim potreb├ím.

Pou┼żitie ┼íabl├│n Beaver Themer na vytvorenie vlastnej t├ęmy WordPress

V nasleduj├║cich pokynoch v├ís prevedieme krokmi potrebn├Żmi na vytvorenie najpopul├írnej┼í├şch prvkov vlastnej t├ęmy. A┼ż budete hotov├ş, ├║plne zmen├şte svoju z├íkladn├║ t├ęmu na plne prisp├┤soben├║ podraden├║ t├ęmu WordPress.

Vytvorte vlastn├║ hlavi─Źku pre svoj mot├şv

Za─Źnime oblas┼ąou hlavi─Źky v├í┼ího webu. Vlastn├í hlavi─Źka je nevyhnutnou s├║─Źas┼ąou t├ęmy a jej zostavenie m├┤┼że by┼ą zlo┼żit├ę pomocou tradi─Źn├Żch met├│d.

Na┼í┼ąastie m├í Beaver Themer vstavan├ę hlavi─Źky. M├┤┼żete pou┼żi┼ą vopred vytvoren├║ ┼íabl├│nu alebo pou┼żi┼ą moduly ponuky a obr├ízkov s rozlo┼żen├şm dvoch st─║pcov.

Aby sme sa dostali do tejto oblasti hlavi─Źky, najprv mus├şme nastavi┼ą rozlo┼żenie hlavi─Źiek v Beaver Themer. n├ív┼íteva Beaver Builder ┬╗Prida┼ą nov├Ż a zadajte n├ízov svojej hlavi─Źky.

Vytvorte vlastn├ę rozlo┼żenie hlavi─Źky

Potom vyberte ako typ rozlo┼żenie ÔÇ×Themer LayoutÔÇť a ako mo┼żnos┼ą rozlo┼żenia ÔÇ×HeaderÔÇť. Po dokon─Źen├ş kliknite na tla─Źidlo ÔÇ×Prida┼ą Themer DesignÔÇť a pokra─Źujte.

T├Żmto sa dostanete na konfigura─Źn├║ str├ínku rozlo┼żenia. Odtia─ż mus├şte ako miesto, kde sa bude zobrazova┼ą ┼íabl├│na hlavi─Źky, vybra┼ą ÔÇ×Cel├Ż serverÔÇť.

Mo┼żnosti rozlo┼żenia

Potom kliknut├şm na tla─Źidlo ÔÇ×Spusti┼ą stavite─ż BeaverÔÇť otvorte rozhranie gener├ítora.

Beaver Builder sa spust├ş s jednoduch├Żm z├íkladn├Żm st─║pcom a dvojradov├Żm usporiadan├şm hlavi─Źiek ako v├Żchodiskov├Żm bodom.

Dizajn hlavi─Źky

Na zmenu pozadia, farieb, textu at─Ć. M├┤┼żete pou┼żi┼ą rovnak├ę n├ístroje drag and drop n├ístroja Beaver Builder. M├┤┼żete tie┼ż prida┼ą ─Ćal┼íie moduly, na─Ź├şta┼ą predpripraven├ę ┼íabl├│ny a prida┼ą riadky / st─║pce kliknut├şm na tla─Źidlo Prida┼ą v pravom hornom rohu.

Ke─Ć ste s n├ívrhom spokojn├ş, kliknut├şm na tla─Źidlo Hotovo svoj n├ívrh ulo┼żte alebo zverejnite.

Teraz m├┤┼żete nav┼ít├şvi┼ą ich webov├║ str├ínku a zobrazi┼ą hlavi─Źky vlastnej t├ęmy v akcii. Ako vid├şte, pou┼żili sme rozlo┼żenie hlavi─Źiek na na┼íu vlastn├║ t├ęmu.

Vlastn├í hlavi─Źka v├í┼ího vlastn├ęho mot├şvu

Okrem hlavi─Źky sa st├íle nezobraz├ş ┼żiadny obsah a pravdepodobne uvid├şte oblas┼ą p├Ąty z├íkladnej t├ęmy.

Pozrime sa na to.

Vytvorte si vlastn├ę p├Ąty pre svoj mot├şv

Vlastn├║ p├Ątu pre svoj mot├şv m├┤┼żete vytvori┼ą pomocou Beavera Themera, rovnako ako ste vytvorili vlastn├║ hlavi─Źku.

Cho─Ćte na Beaver Builder ┬╗Prida┼ą nov├Ż a zadajte n├ízov pre rozlo┼żenie p├Ąty. Potom vyberte ako typ rozlo┼żenie Themer Layout a ako rozlo┼żenie mo┼żnos┼ą Footer.

Rozlo┼żenie p├Ąty

Pokra─Źujte kliknut├şm na tla─Źidlo ÔÇ×Prida┼ą Themer DesignÔÇť.

T├Żmto sa dostanete na konfigura─Źn├║ str├ínku rozlo┼żenia. Odtia─ż mus├şte ako miesto, kde sa bude ┼íabl├│na zobrazova┼ą, vybra┼ą ÔÇ×Cel├Ż serverÔÇť.

Nastavenia rozlo┼żenia p├Ąty

Potom kliknite na tla─Źidlo "Spusti┼ą Beaver Builder" a otvorte rozhranie gener├ítora.

Beaver Builder sa spust├ş s rozlo┼żen├şm p├Ąty troch st─║pcov. Tento n├ívrh m├┤┼żete pou┼żi┼ą ako v├Żchodiskov├Ż bod a za─Źa┼ą s ├║pravami.

├Üprava rozlo┼żenia p├Ąty

M├┤┼żete prida┼ą moduly, textov├ę bloky alebo ─Źoko─żvek in├ę. V┼żdy m├┤┼żete meni┼ą farby, p├şsma, prida┼ą obr├ízok na pozad├ş a ─Ćal┼íie.

Ke─Ć ste s n├ívrhom spokojn├ş, kliknut├şm na tla─Źidlo Hotovo svoj n├ívrh ulo┼żte alebo zverejnite.

Vytvorte oblas┼ą obsahu pre pr├şspevky a str├ínky

Teraz, ke─Ć sme vytvorili hlavi─Źky a p├Ąty pre ka┼żd├║ str├ínku a pr├şspevok na webe, je ─Źas vytvori┼ą pr├şspevok alebo telo str├ínky (oblas┼ą obsahu).

Rovnak├Żm sp├┤sobom za─Źneme zostavova┼ą hlavi─Źku a p├Ątu pridan├şm rozlo┼żenia ÔÇ×Singular" na str├ínke Add New.

Vytv├írajte pr├şspevky a rozlo┼żenia str├ínky

Potom si vyberiete, kde chcete tento dizajn zobrazi┼ą. M├┤┼żete si zvoli┼ą jednotn├ę ─Ź├şslo, ktor├ę sa pou┼żije pre v┼íetky pr├şspevky a jednotliv├ę str├ínky, alebo si m├┤┼żete vybra┼ą pr├şspevky alebo iba str├ínky.

Jedine─Źn├ę nastavenie dizajnu

Potom kliknite na tla─Źidlo "Spusti┼ą Beaver Builder" a otvorte rozhranie gener├ítora.

Unik├ítna ed├şcia

Beaver Builder na─Ź├şta jedine─Źn├ę vzorov├ę rozlo┼żenie s nadpisom pr├şspevku / str├ínky navrchu, za ktor├Żm nasleduje obsah, pole bio autora a oblas┼ą koment├írov.

Ak chcete upravi┼ą niektor├║ z t├Żchto polo┼żiek alebo prida┼ą nov├ę moduly, st─║pce a riadky, pod─ża potreby m├┤┼żete ukazova┼ą a klika┼ą.

Ke─Ć ste s n├ívrhom spokojn├ş, zmeny ulo┼żte a zverejnite kliknut├şm na tla─Źidlo Hotovo.

Teraz m├┤┼żete nav┼ít├şvi┼ą ich webov├║ str├ínku a vidie┼ą ich v akcii.

N├ívrh t├ęmy s obsahom.

Vytvorte rozlo┼żenie s├║borov pre svoj vlastn├Ż mot├şv

Po vytvoren├ş vlastnej t├ęmy m├┤┼żete pokra─Źova┼ą vo vytv├íran├ş rozlo┼żen├ş pre ─Ćal┼íie ─Źasti svojho webu. Str├ínky arch├şvu s├║ miestom, kde program WordPress zobrazuje va┼íe kateg├│rie, zna─Źky, autora a mesa─Źn├ę s├║bory.

Vytvor├şme rozlo┼żenie str├ínky s├║boru pre v├í┼í vlastn├Ż mot├şv.

Za─Źnete n├ív┼ítevou Beaver Builder ┬╗Prida┼ą nov├Ż a zadajte n├ízov pre rozlo┼żenie s├║boru.

Vytvorte rozlo┼żenie s├║boru pre svoj vlastn├Ż mot├şv

Potom vyberte ako typ rozlo┼żenie ÔÇ×Themer LayoutÔÇť a ako mo┼żnos┼ą rozlo┼żenia vyberte ÔÇ×FileÔÇť. Pokra─Źujte kliknut├şm na tla─Źidlo ÔÇ×Prida┼ą Themer DesignÔÇť.

T├Żmto sa dostanete na konfigura─Źn├║ str├ínku rozlo┼żenia. Odtia─ż mus├şte ako miesto, kde sa bude ┼íabl├│na zobrazova┼ą, vybra┼ą ÔÇ×V┼íetky s├║boryÔÇť. M├┤┼żete tie┼ż vytvori┼ą samostatn├ę rozlo┼żenia pre ka┼żd├Ż typ s├║boru, ako je d├ítum, v├Żsledky vyh─żad├ívania, kateg├│ria, zna─Źky at─Ć.

Nastavenia rozlo┼żenia s├║borov

Potom kliknite na tla─Źidlo "Spusti┼ą Beaver Builder" a otvorte rozhranie gener├ítora.

Beaver Builder sa spust├ş so z├íkladn├Żm rozlo┼żen├şm s├║borov v jednom st─║pci. V hornej ─Źasti sa zobraz├ş n├ízov s├║boru a potom pr├şspevky.

├Üprava rozlo┼żenia s├║boru pre v├í┼í mot├şv

Ak chcete upravi┼ą jeho vlastnosti, m├┤┼żete uk├íza┼ą a klikn├║┼ą na ktor├║ko─żvek polo┼żku. Pod─ża potreby m├┤┼żete tie┼ż prida┼ą nov├ę moduly, riadky a st─║pce.

Potom kliknut├şm na tla─Źidlo ÔÇ×HotovoÔÇť ulo┼żte a zverejnite svoje zmeny.

Vytvorte ─Ćal┼íie n├ívrhy pre svoju vlastn├║ t├ęmu WordPress

Beaver Themer v├ím tie┼ż umo┼ż┼łuje vytv├íra┼ą rozlo┼żenia pre ─Ćal┼íie str├ínky v hierarchii ┼íabl├│n, napr├şklad strana 404, ─Źasti ┼íabl├│n, str├ínka s v├Żsledkami vyh─żad├ívania a ─Ćal┼íie.

Pomocou vstavanej funkcie drag and drop spolo─Źnosti Beaver Builder si m├┤┼żete ─żahko vytvori┼ą svoju vlastn├║ t├ęmu WordPress od nuly bez toho, aby ste museli p├şsa┼ą k├│d. Toto je skuto─Źne najviac pr├şstupn├í met├│da v├Żvoja t├ęmy WordPress pre za─Źiato─Źn├şkov.

D├║fame, ┼że v├ím tento ─Źl├ínok pomohol nau─Źi┼ą sa vytv├íra┼ą vlastn├║ t├ęmu WordPress bez toho, aby sa nau─Źil k├│dova┼ą. M├┤┼żete si tie┼ż pre─Ź├şta┼ą n├í┼ího sprievodcu o tom, ako zr├Żchli┼ą va┼íe webov├ę str├ínky WordPress, aby ste mali lep┼í├ş u┼ż├şvate─żsk├Ż komfort a SEO.

Ak sa v├ím tento ─Źl├ínok p├í─Źil, prihl├íste sa na odber n├í┼ího kan├íla YouTube pozera┼ą videoz├íznamy z programu WordPress. N├íjdete n├ís aj na Twitter a Facebook,