Jak na web ve Webnode přidat přepínání jazyků do horní části webu?

🎁Wpromotions.eu TIP:

Věděli jste, že Webnode v roce 2021 spustil své vlastní vlaječky pro přepínání jazyků?

Viz. návod: Jak si na web ve Webnodě přidat horní lištu s kontaktními informacemi a ikonami soc. sítí?

Potřebujete na webových stránkách ve Webnode změnit pozici pro přepínání jazyků?

V tomto návodu se dozvíte jak funguje více-jazyčná verze webu u Webnode.

Ukážeme si také, jakým způsobem je možné přidat do horní části webu vlaječky pro přepínání mezi jazykovými verzemi webu.

#Jak funguje vícejazyčný web ve Webnode?

S aktivním Prémiovým balíčkem Standard nebo Profi si můžete u Vašeho webu aktivovat funkci, která Vám umožní vytvořit novou jazykovou verzi webu. Zobrazit ceník služeb (Webnode).

S balíčkem Standard můžete web zobrazovat v 2 jazycích. S balíčkem Profi můžete vytvořit neomezený počet jazykových mutaci webu.

Poznámka: Webnode Vám umožní vytvořit jazykovou verzi po zakoupení služeb. Neznamená to, že to Webnode za Vás i přeloží !!! Přeložit si to musíte sami !!!

#Aktivoval jsem si vícejazyčný web, ale stránka se zobrazuje v jiném jazyce …

Vaše webstránka se zobrazí v jazyce, v jakém je nastaven i prohlížeč daného návštěvníka. Pokud Vaši stránku navštíví Angličan a jeho prohlížeč bude mít v angličtině – zobrazí se mu Vaše stránka v angličtině (pokud máte anglickou verzi webu).

Když web otevřete Vy, a Váš prohlížeč je nastaven např. v češtině – zobrazí se Vám tak stránky v češtině. (Pokud máte českou verzi webu)

Přepínání jazyků tak není vůbec nutné, protože jazyk se zvolí automaticky podle tohoto, jaký jazyk je nastaven v nastavení prohlížeče daného návštěvníka.

Primární jazyk určujete proto, aby v případě, že nemáte jazykový překlad pro nějakou zemi – systém zvolil správný jazyk. Pokud máte v sekci (Nastavení – Jazyky) nastaven primární jazyk angličtinu, tak v případě, že vaši stránku navštíví např. Němec – zobrazí se mu anglická verze Vašeho webu.

#Návod na změnu pozice pro přepínání jazyků u Webnode (přes vlajky)

#Pojďme nato

1. Pokud máte webové stránky v 2 jazycích (čeština a UK angličtina), použijte prosím tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 5px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

@media screen and (max-width: 767px) {.flags {left: 165px;}}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

2. Kód vložte do sekce „Nastavení“ – „Nastavení webu“ – „HTML kód do hlavičky všech stránek“ a klikněte na Uložit.

3. Změny Publikujte a máte hotovo – vlaječky uvidíte v publikované verzi webu (vpravo nahoře).

TIP: Vlajky se na mobilech/tabletech nemusí zobrazovat v každé šabloně správně. Použijte proto tento kód, který vlajky na mobilu zobrazí až po kliknutí na „Menu“.

Kód vložte do patičky všech stránek.

1
2
3
4
5
6
7
8
9

<script>
if (window.innerWidth < 767) {
    var div = document.createElement("div");
    div.setAttribute("style", "text-align:right;height:32px;");
    var flags = document.querySelector(".flags");
    div.appendChild(flags);
    document.querySelector("#menu").prepend(div);
}
</script>

Viz online ukázku přepínaču jazyků v horní části webu (přes vlaječky)

Pokud máte web v slovenčine a US angličtine, použijte prosím tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 5px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

@media screen and (max-width: 767px) {.flags {left: 165px;}}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

Pokud máte web v slovenčine a UK angličtine , použijte, prosím, tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 5px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

@media screen and (max-width: 767px) {.flags {left: 165px;}}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

Pokud máte web v češtine a US angličtine , použijte, prosím, tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 5px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

@media screen and (max-width: 767px) {.flags {left: 165px;}}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

Pokud máte web v češtine a nemčine , použijte, prosím, tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 5px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

@media screen and (max-width: 767px) {.flags {left: 165px;}}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

Pokud máte web v češtine a francúžštine , použijte, prosím, tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 5px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

@media screen and (max-width: 767px) {.flags {left: 165px;}}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

Pokud máte web v slovenčine a nemčine , použijte, prosím, tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 5px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

@media screen and (max-width: 767px) {.flags {left: 165px;}}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

Pokud máte web v 3 jazykoch (čeština, angličtina a poľština), tak použite tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 35px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

Pokud máte web v 3 jazykoch (CZ,SK,EN) použite tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 35px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

Pokud máte web v 4 jazykoch (CZ,EN,DE,PL) tak použite tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 35px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

Pokud máte web s češtinou a ruštinou, použijte tento kód:

<style>

.flags {

position: absolute;

top: 10px;

right: 5px;

z-index: 99;

}

.flags ul {

margin: 0;

padding-left: 0;

}

.flags ul li {

margin-left: 5px;

list-style-type: none;

display: inline-block;

}

@media screen and (max-width: 767px) {.flags {left: 165px;}}

</style>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

TIP: Vložte si na web online chat pro rychlejší komunikaci s návštěvníky Vašeho webu. Doporučuji službu, která je zdarma – Smartsupp

Další návody

Webnode Recenze

Webnode recenze 2025Tvorba webu s Webnode je jednoduchá - zvládne to i Vaše babičkaVítejte v naší Webnode recenzi, kde Vám nabízíme objektivní pohled na editor, tzv. program pro vytváření webových stránek, od společnosti Webnode. Tvorba webu zdarma vs. prémiové...

Jak vytvořit webové stránky pro pronájem karavanu?

Tvorba webových stránek pro pronájem karavanu Co patří na web pro pronájem karavanu / obytné dodávky? Kolik stojí webové stránky pro pronájem karavanu? Webnode šablony pro pronájem karavanu Jak vytvořit webové stránky pro pronájem karavanu zdarma v 6 krocích? Pár slov...

Jak si založit Webnode e-shop v roce 2025?

Internetový prodej Co všechno lze prodávat přes e-shop? Webnode e-shop - výhody a nevýhody Webnode e-shop - šablony Webnode e-shop - ceník Webnode e-shop - zkušenosti NÁVOD: Jak si založit vlastní Webnode e-shop? Pár slov na závěr Webnode e-shop - Časté dotazy...

Jak přidat kolo štěstí na webové stránky?

Kolo štěstí / Spinning Wheel Kolo štěstí - zdarma VS premium Kolo štěstí - šablony NÁVOD: Jak přidat kolo štěstí na webové stránky ve Webnode? Pár slov na závěr Kolo štěstí - Časté dotazy (FAQ)Kolo štěstí / Spinning WheelV předchozích článcích jsme si ukázali Jak...

Jak přidat kalendář akcí/eventů na webové stránky?

Kalendář akcí/eventů Event Calendar widget - zdarma VS premium Kalendář akcí šablony - kalendář pro každý event NÁVOD: Jak přidat kalendář akcí/eventů na webové stránky ve Webnode? Kalendář akcí - ukázka Pár slov na závěr Kalendář akcí - Časté dotazy (FAQ)Kalendář...

Jak vytvořit webové stránky zdarma v 6 krocích?

Webové stránky zdarma Webové stránky zdarma – šablony Pro koho jsou webové stránky zdarma určeny? Webové stránky zdarma s vlastní doménou Webové stránky zdarma - 5 ověřených tipů jak začít NÁVOD: Jak vytvořit webové stránky v 6-ti krocích? Pár slov na závěr Webové...

Jak přidat počítadlo čísel na webové stránky?

Animované počítadlo čísel Počítadlo čísel - zdarma VS premium Počítadlo čísel - vyberte si ten správný typ NÁVOD: Jak přidat počítadlo čísel na webové stránky ve Webnode? Počítadlo čísel - ukázka Pár slov na závěr Počítadlo čísel - Časté dotazy (FAQ)Animované...

Nákupní proces s Webnode e-shopem

Nákupní proces a Webnode e-shop Co je to nákupní proces? Co všechno lze nastavit pro nákupní proces ve Webnode e-shopu? NÁVOD: Jak nastavit nákupní proces pro Webnode e-shop? Pár slov na závěr Nákupní proces – Časté dotazy (FAQ) Nákupní proces a Webnode e-shopV...

Jak vytvořit webové stránky pro chovatelskou stanici?

Tvorba webových stránek pro chovatelskou stanici Vlastní web pro chovatelskou stanici - výhody Co patří na web pro chovatelskou stanici? Kolik stojí webové stránky pro chovatelskou stanici? Webnode šablony pro chovatelský web NÁVOD: Jak vytvořit webové stránky pro...

Líbil se ti tento návod? Pošli ho přátelům 🙂

Vytvořit web zdarma

About
Latest Posts

Follow me

Viliam

CEO at Webgrow s.r.o.

Baví mě Internet a zvlášť redakční systémy jako Webnode nebo WordPress s Divi šablónou. Vytvořil jsem pro Vás portál Wpromotions.eu, abych Vám pomohl s tvorbou Vaší webové stránky nebo e-shopu. V případě potřeby mě neváhejte kontaktovat, rád Vám poradím.

Follow me