--- site_name: WPlama site_description: Internetové stránky na WordPressu snadno a česky site_url: https://www.wplama.cz contact_email: tomas@wplama.cz title: Jak ve WordPress vytvořit stránku s Elementorem, bez použití předpřipravené šablony url: https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/ date: 2023-10-27 modified: 2023-10-26 author: Bára C. type: post categories: [Elementor] tags: [Elementor, tvorba webu, vizuální editor, vizuální editor Elementor, web, webové stránky, WordPress] --- ![Elementor](https://www.wplama.cz/wp-content/uploads/2023/10/elementor-nahledovy-obrazek-1-1024x683.png "Elementor") # Jak ve WordPress vytvořit stránku s Elementorem, bez použití předpřipravené šablony 27.10.2023 V dnešním článku se podíváme, jak si ve WordPress můžete s Elementorem vytvořit stránku s vlastním designem, bez použití předpřipravené šablony. Pokud Elementor neznáte, podívejte se na článek [Seznamte se s Elementorem](https://www.wplama.cz/seznamte-se-s-elementorem/). V případě, že nechcete tvořit své stránky od nuly, ale chcete využít předpřipravený design stránky, koukněte na návod [Jak instalovat a nastavit Elementor](https://www.wplama.cz/jak-instalovat-a-nastavit-elementor/). ## Jak vytvořit stránku ve WordPress Článek je součástí návodů jak vytvořit web na Elementoru a předpokládáme, že [plugin Elementor](https://www.wplama.cz/elementor-domaci-stranka) máte již nainstalovaný. Vytvořit novou stránku ve WordPress je velmi snadné. Začneme tím, že se přihlásíme do redakčního systému WordPress a v levém menu vybereme *Stránky → Vytvořit stránku*. [![uvodni stranka wordpress nastenka 1](https://www.wplama.cz/wp-content/uploads/2023/10/uvodni-stranka-wordpress-nastenka-1.png "uvodni stranka wordpress nastenka 1")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/uvodni-stranka-wordpress-nastenka-2/) Objeví se stránka, kde kliknete na *Zadejte název* a napíšete název vytvářené stránky. V našem případě to bude *Kontakt*. [![zmena nazvu](https://www.wplama.cz/wp-content/uploads/2023/10/zmena-nazvu.png "zmena nazvu")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/zmena-nazvu/) Pak kliknete na *Upravit s Elementorem* (modré tlačítko vlevo nahoře) a počkáte, až se vizuální editor načte. [![zadejte nazev 2](https://www.wplama.cz/wp-content/uploads/2023/10/zadejte-nazev-2.png "zadejte nazev 2")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/zadejte-nazev-3/) Vznikla nám stránka Kontakt, kterou nyní budeme doplňovat o text, obrázky a další prvky. Tyto prvky (widgety) najdete na levé straně. V Elementor verzi zdarma můžeme dále přidat například tlačítko, video, mapu (Google) či ikonu. Další obsahové prvky můžete získat ve verzi [Elementor PRO](https://www.wplama.cz/Elementor-cenik). [![stranka kontakt 1](https://www.wplama.cz/wp-content/uploads/2023/10/stranka-kontakt-1.png "stranka kontakt 1")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/stranka-kontakt-2/) ## Rozvržení stránky a vytváření kontejnerů V Elementoru se po kliknutí na znaménko plus v růžovém poli objeví možnosti rozvržení stránky, přesněji struktury (jednotlivých kontejnerů – sloupců). Zvolte si kliknutím myši rozvržení, které vám vyhovuje. [![Rozvržení kontejnerů](https://www.wplama.cz/wp-content/uploads/2023/10/rozvrzeni-kontejneru.png "Rozvržení kontejnerů")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/rozvrzeni-kontejneru/) Teď jsme si zvolili jednoduché rozvržení kontejnerů na dvě poloviny, které se ve vizuálním editoru Elementor zobrazí následovně. V nastavení kontejneru je v záložce Rozvržení možnost Mezery. Zde si můžete nastavit mezeru mezi sloupci a řádky. Tuto možnost budete určitě využívat často, protože nebudete chtít mít jednotlivé prvky obsahu na sobě namačkané. [![struktura 1](https://www.wplama.cz/wp-content/uploads/2023/10/struktura-1.png "struktura 1")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/struktura-2/) ## Jak upravit kontejner Při kliknutí myší na obdélníček v rohu kteréhokoliv kontejneru můžete následně v levé nabídce upravit některé jeho parametry. Například šířku, minimální výšku nebo zarovnání obsahu v daném kontejneru. [![upravit kontejner](https://www.wplama.cz/wp-content/uploads/2023/10/upravit-kontejner.png "upravit kontejner")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/upravit-kontejner/) ## Jak naplnit kontejnery (sloupce) obsahem Naším cílem je nyní v Elementoru vytvořit na levé straně obrázek, na pravou si dáme textové pole a pod to všechno si přidáme Google mapu. Naplnit kontejnery obsahem zvládneme raz dva. Začneme obrázkem, který dáme do levého kontejneru. V kontejneru klikneme na uprostřed umístěné znaménko plus a na levé straně vybereme*Obrázek*. [![pridani obrazku](https://www.wplama.cz/wp-content/uploads/2023/10/pridani-obrazku.png "pridani obrazku")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/pridani-obrazku/) V levé nabídce Elementoru klikněte myší na obrázek a můžete ze své WordPress knihovny vybrat obrázek. Pokud jste dosud žádný nenahráli, klikněte na*Nahrávání obrázků* a vyberte si obrázek z počítače. [![nahravani obrazku](https://www.wplama.cz/wp-content/uploads/2023/10/nahravani-obrazku.png "nahravani obrazku")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/nahravani-obrazku-2/) Nahrál se nám obrázek a my si nyní do pravého kontejneru přidáme text. Klikneme na obdélníček (tím vybereme kontejner) a následně na plus ve vybraném kontejneru. V levé nabídce zvolíme *Textový editor*. [![textovy editor](https://www.wplama.cz/wp-content/uploads/2023/10/textovy-editor.png "textovy editor")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/textovy-editor/) Zobrazí se nám text „Lorem Ipsum“, který má předvést jak text vypadá. V levé nabídce Elementoru můžeme tento text snadno přepsat na údaje, které chceme mít na stránce. V tomto textovém editoru můžete využít možnosti ztučnit písmo, dát mu kurzívu, podtrhnout jej, využít odrážek, vytvořit odkaz a tak dále. Při kliknutí na *Rozšířené možnosti* můžete také změnit barvu písma, pokud se vám předvolená nelíbí. [![uprava textu](https://www.wplama.cz/wp-content/uploads/2023/10/uprava-textu.png "uprava textu")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/uprava-textu/) Dalším krokem je Google mapa, která mi přijde pro kontaktní stránku velice praktická. Tato mapa je naštěstí také v neplacené verzi Elementoru k dispozici. Klikneme opět na plus v růžovém kolečku a vybereme si další kontejner. V něm klikneme myší na šedivé plus uprostřed a v levé nabídce vybereme Mapy Google. [![upravit google mapu](https://www.wplama.cz/wp-content/uploads/2023/10/upravit-google-mapu.png "upravit google mapu")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/upravit-google-mapu/) Naskočí předvolená mapa s rovnou otevřeným nastavením. Do pole Umístění zadejte adresu, kde chcete mít umístěný pin na mapě. Nastavením Přiblížení pak můžete upravit oddálení mapy. [![uprava mapy google](https://www.wplama.cz/wp-content/uploads/2023/10/uprava-mapy-google.png "uprava mapy google")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/uprava-mapy-google/) Pokud nechcete využívat mezery mezi řádky v nastavení Kontejneru , můžete využít widget s názvem *Distanční podložka.*V detailu tohoto prvku si můžete vybrat, jak široká vzniklá mezera bude. [![distancni podlozka](https://www.wplama.cz/wp-content/uploads/2023/10/distancni-podlozka.png "distancni podlozka")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/distancni-podlozka/) Abychom se podívali, jak v reálném náhledu naše Elementorem vytvořená stránka vypadá, klikneme v levém dolním rohu v nabídce na *Aktualizovat* a pak na ikonku oka, která znamená *Zobrazit změny*. [![zobrazit zmeny](https://www.wplama.cz/wp-content/uploads/2023/10/zobrazit-zmeny.png "zobrazit zmeny")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/zobrazit-zmeny/) Náhled se nám otevře v novém okně. [![hotova stranka kontakt](https://www.wplama.cz/wp-content/uploads/2023/10/hotova-stranka-kontakt.png "hotova stranka kontakt")](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/hotova-stranka-kontakt/) ## Závěrem Nejlepším způsobem, jak vytvářet stránky je experimentování. Projděte si jednotlivé sekce ve vizuálním editoru Elementoru a vyzkoušejte různá rozvržení kontejnerů, odsazení, obrázky, tlačítka a další prvky tak, aby výsledný web odpovídal vašim představám a potřebám návštěvníků. Pokud vám některé prvky chybí, zvažte zakoupení verze [Elementor PRO](https://www.wplama.cz/Elementor-cenik). Při tvorbě stránek a rozmisťování kontejnerů se můžete inspirovat již existujícími weby. V příštím článku se blíže podíváme na [šablonu Hello](https://wordpress.org/themes/hello-elementor/), základní šablonu Elementoru přímo od jeho autorů. ### Správa WordPress webu Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními. [Více informací](https://www.wplama.cz/sprava-wordpress-webu/) ### O autorovi ![093c645353b2646e6c2107574349048681b97f0ac7d43979e0e7377ceb99dd06](https://secure.gravatar.com/avatar/093c645353b2646e6c2107574349048681b97f0ac7d43979e0e7377ceb99dd06?s=100&d=monsterid&r=g "093c645353b2646e6c2107574349048681b97f0ac7d43979e0e7377ceb99dd06") [#### Bára C.](https://www.wplama.cz/author/barbora/) Věnuji se reklamě ve všech jejích podobách - grafice, copywritingu a fotografii. ## Mohlo by vás také zajímat [![WordPress plugin Elementor](https://www.wplama.cz/wp-content/uploads/2023/02/wordpress-plugin-elementor-1024x584.png "WordPress plugin Elementor")](https://www.wplama.cz/elementor-nejlepsi-page-builder-plugin-pro-wordpress/) ### [Elementor: Nejlepší page builder plugin pro WordPress?](https://www.wplama.cz/elementor-nejlepsi-page-builder-plugin-pro-wordpress/) [Elementor](https://www.wplama.cz/wordpress/elementor/)[![Elementor PRO cena v roce 2023](https://www.wplama.cz/wp-content/uploads/2023/07/elementor-pro-cena-1024x513.png "Elementor PRO cena v roce 2023")](https://www.wplama.cz/elementor-pro-cena/) ### [Elementor PRO cena v roce 2023](https://www.wplama.cz/elementor-pro-cena/) [Elementor](https://www.wplama.cz/wordpress/elementor/)[![Elementor](https://www.wplama.cz/wp-content/uploads/2023/10/elementor-nahledovy-obrazek-1-1024x683.png "Elementor")](https://www.wplama.cz/seznamte-se-s-elementorem/) ### [Seznamte se s Elementorem](https://www.wplama.cz/seznamte-se-s-elementorem/) [Elementor](https://www.wplama.cz/wordpress/elementor/) ### 2 názory na “Jak ve WordPress vytvořit stránku s Elementorem, bez použití předpřipravené šablony” ![ca1be67218284a0d131e4749ace28376eceba7662c8bb13c0e8984a33e618aa5](https://secure.gravatar.com/avatar/ca1be67218284a0d131e4749ace28376eceba7662c8bb13c0e8984a33e618aa5?s=50&d=monsterid&r=g "ca1be67218284a0d131e4749ace28376eceba7662c8bb13c0e8984a33e618aa5") **SEO specialista a copywriter Daniel Beránek** [27.10.2023 v 20:01](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/#comment-310101) není web na Elementeru (a potažmo všech vizuálních editorech) datově obsáhlejší než weby postavené jen na šabloně? [Odepsat](https://www.wplama.cz/#comment-310101) ![579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892](https://secure.gravatar.com/avatar/579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892?s=50&d=monsterid&r=g "579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892") **[Tomáš Cirkl](https://www.wpress.help/)** [30.10.2023 v 8:05](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/#comment-310139) Pokud tím myslíte, velikost stránky nebo DB, tak obecně odpovězeno ano. Ale není to nic dramatického a v dnešní době rychlejšího internetu to nikdo nepozná. Taková média jsou například na načtení stránky horší než pár bajtů textu. [Odepsat](https://www.wplama.cz/#comment-310139) --- --- ### Diskuze [Zruš odpověď](https://www.wplama.cz/jak-vytvorit-stranku-s-elementorem/?_tmcb=1772962889#respond)