Potrebujete na webových stránkach vo Webnode zmeniť pozíciu pre prepínanie jazykov?

V tomto návode sa dozviete ako funguje viac-jazyčná verzia webu u Webnode.

Ukážeme si tiež, akým spôsobom je možné pridať do hornej časti webu vlajočky pre prepínanie medzi jazykovými verziami webu.

#Ako funguje viacjazyčný web vo Webnode?

S aktívnym Prémiovým balíčkom Standard alebo Profi si môžete u Vášho webu aktivovať funkciu, ktorá Vám umožní vytvoriť novú jazykovú verziu webu.

Zobraziť cenník služieb (Webnode).

S balíčkom Standard môžete web zobrazovať v 2 jazykoch. S balíčkom Profi môžete vytvoriť neobmedzený počet jazykových mutácii webu.

Poznámka: Webnode Vám umožní vytvoriť jazykovú verziu po zakúpení služieb. Neznamená to, že to Webnode za Vás aj preloží!!! Preložiť si to musíte sami!!!

#Aktivoval som si viacjazyčný web, ale stránka sa zobrazuje v inom jazyku…

Vaša webstránka sa zobrazí v jazyku, v akom je nastavený aj prehliadač daného návštevníka. Ak Vašu stránku navštívi Angličan a jeho prehliadač bude mať v angličtine – zobrazí sa mu Vaša stránka v angličtine (ak máte anglickú verziu webu).

Keď webstránku otvorite Vy, a Váš prehliadač je nastavený napr. v češtine – zobrazia sa Vám tak stránky v češtine. (ak máte českú verziu webu)

Prepínanie jazykov nie je až tak potrebné, pretože jazyk sa zvolí automaticky podľa tohto, aký jazyk je nastavený v nastaveniach prehliadača daného návštevníka.

Primárny jazyk určujete preto, aby v prípade, že nemáte jazykový preklad pre nejakú krajinu – systém zvolil správny jazyk. Ak máte v sekcii (Nastavenia – Jazyky) nastavený primárny jazyk angličtinu, tak v prípade, že Vašu stránku navštívi napr. Nemec – zobrazí sa mu anglická verzia Vášho webu.

#Návod na zmenu pozície pre prepínanie jazykov u Webnode (cez vlajky)

#Poďme nato

1. Ak máte webové stránky v 2 jazykoch (čeština a UK angličtina), použite, 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>
    
        <div class="flags">
            <ul>
                <li>
                    <a href="/home/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/Czech-Republic.png" alt=CZ">
                    </a>
                </li>
                <li>
                    <a href="/en/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/United-KingdomGreat-Britain.png" alt="Facebook">
                    </a>
                </li>
            </ul>
        </div>

<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 sekcie “Nastavenia” – “Nastavenia webu” – “HTML kód do hlavičky všetkých stránok” a kliknite na Uložiť.

3. Zmeny PUBLIKUJTE a máte hotovo – vlajočky uvidíte v publikovanej verzii webu (vpravo hore).

Pozrite si online ukážku prepínaču jazykov v hornej časti webu (cez vlajočky)

Ak máte web v slovenčine a US angličtine, použite, 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>
    
        <div class="flags">
            <ul>
                <li>
                    <a href="/home/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/SVK-vlajka.png" alt=SVK">
                    </a>
                </li>
                <li>
                    <a href="/en/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/americky-flag.png" alt="USA">
                    </a>
                </li>
            </ul>
        </div>

<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>

Ak máte web v slovenčine a UK angličtine , použite, 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>
    
        <div class="flags">
            <ul>
                <li>
                    <a href="/home/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/SVK-vlajka.png" alt=SVK">
                    </a>
                </li>
                <li>
                    <a href="/en/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/United-KingdomGreat-Britain.png" alt="GB">
                    </a>
                </li>
            </ul>
        </div>

<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>

Ak máte web v češtine a US angličtine , použite, 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>
    
        <div class="flags">
            <ul>
                <li>
                    <a href="/home/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/Czech-Republic.png" alt=CZ">
                    </a>
                </li>
                <li>
                    <a href="/en/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/americky-flag.png" alt="USA">
                    </a>
                </li>
            </ul>
        </div>

<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>

Ak máte web v češtine a nemčine , použite, 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>
    
        <div class="flags">
            <ul>
                <li>
                    <a href="/home/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/Czech-Republic.png" alt=CZ">
                    </a>
                </li>
                <li>
                    <a href="/de/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/DE.png" alt="DE">
                    </a>
                </li>
            </ul>
        </div>

<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>

Ak máte web v slovenčine a nemčine , použite, 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>
    
        <div class="flags">
            <ul>
                <li>
                    <a href="/home/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/SVK-vlajka.png" alt=CZ">
                    </a>
                </li>
                <li>
                    <a href="/de/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/DE.png" alt="DE">
                    </a>
                </li>
            </ul>
        </div>

<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>

Ak máte web v slovenčine a maďarčine , použite, 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>
    
        <div class="flags">
            <ul>
                <li>
                    <a href="/home/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/SVK-vlajka.png" alt=SVK">
                    </a>
                </li>
                <li>
                    <a href="/hu/">
                        <img src="https://www.wpromotions.eu/wp-content/uploads/2019/01/hu-flag.png" alt="HU">
                    </a>
                </li>
            </ul>
        </div>

<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 PRE VLAJKY V MOBILNEJ VERZII:

V niektorých šablónach sa kód nemusí zobraziť dobre na mobiloch. Ak by sa Vám vlajky nezobrazovali správne, tak vložte nižšie uvedený kód do pätičky všetkých stránok.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
if ($(window).width() < 767) {
    let div = document.createElement("div");
    div.setAttribute("style", "text-align:right;height:32px;");
    let flags = document.querySelector(".flags");
    div.appendChild(flags);

    document.querySelector("#menu").prepend(div);
}
</script>

if ($(window).width() < 767) {

let div = document.createElement("div");

div.setAttribute("style", "text-align:right;height:32px;");

let flags = document.querySelector(".flags");

div.appendChild(flags);

document.querySelector("#menu").prepend(div);

}

</script>

Ďalšie skvelé návody

Ako si vytvoriť web stránku jednoducho a zdarma (Webnode návod)

Chceli ste si niekedy vytvoriť vlastnú webovú stránku úplne od začiatku? Chcete si vytvoriť webstránku alebo e-shop a zviditeľniť sa na Internete? Začnite práve teraz a naučte sa ako si jednoducho vytvoríte svoj prvý vlastný web. Tvorba webu s...

Ako vo Webnode skryť dátum zverejňenia článku?

Ako na webe vo Webnode skryť dátum zverejnenia článku?V návode Ako vo Webnode skryť košík v eshope? sme si ukázali ako jednoducho je možné vo Webnode niečo "skryť". V tomto článku sa dozviete, ako jednoducho môžete vo Webnode, odstrániť dátum z článku vo Vašom blogu....

Ako na webové stránky vložiť mapu z Mapy.cz?

Ako na Vaše webové stránky vložiť mapu od Mapy.cz?V návodoch Ako správne nastaviť Google Mapu vo Webnode? a Ako si vytvoriť mapu s vlastnými bodmi (špendlíky na mape)? sme si ukázali jednoduché riešenie pre pridanie mapy na web cez služby Google. V tomto návode sa...

Ako na web pridať padajúce konfety?

Ako na webové stránky vo Webnode pridať animáciu - padajúce konfety?Do mojej Webnode poradne prišla otázka, či je možné na webe vo Webnode pridať animáciu padajúcich konfet. Áno je to možné - pre všetkých, ktorí hľadajú "padajúce konfety na web" som pripravil kód,...

Ako prepojiť Google Tag Manager s webom od Webnode?

Čo je to Google Tag Manager?Internetový (online) marketing vyžaduje vkladanie rôznych meriacich kódov na Váš web či e-shop. Aby ste nemuseli vkladať každý meriaci kód "ručne" do hlavičky,či pätičky webu môžete použiť službu Google Tag Manager, ktorá Vám umožní vložiť...

Ako zvýšiť predaj v e-shope o 7-18 % ?

Chcete zvýšiť predaj na Vašom e-shope? Máte návštevníkov, avšak len málo ľudí si niečo kúpi? V tomto návode Vám ukážem skvelý spôsob ako zvýšiť predaje v e-shope. Sú to notifikácie. Áno - obyčajné, pre niekoho možno otravné, notifikácie. Online nástroj Notifikuj.cz sa...

Ako vo Webnode skryť košík v eshope?

Ako vo Webnode e-shope skryť nákupný košík?Máte u spoločnosti Webnode vytvorený e-shop a chceli by ste skryť nákupný košík v menu a tlačítko "Pridať do košíku", aby ste mohli využívať e-shopové prvky ako napr. pridávanie produktov, avšak nechcete využívať e-shop ako...

Ako na web vo Webnode vložiť anketu?

Chcete na webové stránky vo Webnode vložiť anketu?Online dotazník zdarma (anketa na web) je jeden z najčastejších spôsobov ako dostať od návštevníkov webu spätnú väzbu. Bez spätnej väzby je ťažké posúdiť, či na svojich zákazníkov pôsobíte správne a či má vôbec Vaše...

Ako pridať obrázok GIF vo Webnode?

Chcete na web vo Webnode vložiť GIF obrázok? Systém Webnode nepovoľuje gify, keď ich vložíte ako obrázok. Z tohto dôvodu musíte najprv požadovaný .GIF obrázok nahrať na externú stránku a získať tak URL adresu obrázku. Získanú URL adresu vložíte do kódu a HTML kód...

Online rezervačný systém na web? Odporúčam systém, ktorý sa prispôsobí každému podnikaniu

Chcete na Váš web pridať spoľahlivý a jednoduchý online rezervačný systém? Reservanto je najlepší rezervačný systém, ktorý ponúka verziu Zdarma bezplatne a to dožitovne. Jedným z cieľov Vášho webu môže byť napríklad vytvorenie rezervácie. Najčastejšie túto formu...

Pomohol ti tento návod? Pošli ho priateľom 🙂

Vytvorte si vlastný web alebo e-shop

O plugine
Najnovšie príspevky

Viliam

Jednatel vo Webgrow s.r.o.

Baví ma Internet a zvlášť redakčné systémy ako Webnode alebo WordPress s Divi šablónou. Vytvoril som pre Vás portál Wpromotions.eu, aby som Vám pomohol s tvorbou Vašej webovej stránky alebo e-shopu. V prípade potreby ma neváhajte kontaktovať, rád Vám poradím.

Najnovšie články od Viliam (zobraziť všetky)

Ako vo Webnode skryť dátum zverejňenia článku? - 8.2.2020
Ako na webové stránky vložiť mapu z Mapy.cz? - 31.1.2020
Ako na web pridať padajúce konfety? - 31.12.2019

4 komentáre

Adámo 22.5.2019 o 20:32

Ahoj,
je možné touto úpravou změnit například nastavení nadpisu h3 nebo baru textuy navigačního menu? např.: při změně zadat do hlavičky pro nadpis3 červenou barvu? :

h3{
color: red;
}

bude to fungovat? Nebo je nadřazenější odkaz na rel=”stylesheet” ?
dík
Adámo
Odpovedať
- Viliam 23.5.2019 o 16:01
  
  Zdravím,
  
  Fonty písma napr. nadpisov alebo farby položiek v Menu si ťahá systém z nadradenejšieho odkazu tj. “stylesheet” (style.css) a ten nemáš možnosť upraviť (nemáš prístup ku FTP serveru)
  
  Ak chceš napr. upraviť farbu niektorého z nadpisov tak postup je nasledovný:
  
  Každá šablóna vo Webnode má iné názvy prvkov (elementov) a preto si najprv musíš nájsť názov daného elementu v šablóne (cez prehliadač v inspectore) a následne si pripraviť kód pre úpravu CSS kódu.
  
  Vytvoril som pre Teba krátke video ako editujem farbu nadpisu na tomto webe: http://bit.ly/2VX009P
  Video si môžeš prezrieť na tomto odkaze: bit.ly/navod-zmena-farby-webnode
  
  S pozdravom
  Viliam
  Odpovedať
Jana 17.3.2020 o 22:17

Dobrý den, mám web v angličtině a druhý jazyk francouzština, a chtěla bych dle Vašeho návodu přidat vlaječku nahoře. Mužete mi prosím napsat jaký kód použít?
Děkuji,
Jana
Odpovedať
- Viliam 21.3.2020 o 21:36
  
  Dobrý deň,
  
  ďakujem za záujem. Vytvoril som pre Vás kód, kde je čeština a francúština
  
  Kód na vlajky nájdete v tomto návode: https://www.wpromotions.eu/cs/jak-na-web-ve-webnode-pridat-prepinani-jazyku-do-horni-casti-webu/
  
  S pozdravom
  Viliam
  Odpovedať

Odoslať komentár Zrušiť odpoveď

Táto webová stránka používa Akismet na redukciu spamu. Získajte viac informácií o tom, ako sú vaše údaje z komentárov spracovávané.

Ako na web vo Webnode pridať prepínanie jazykov do hornej časti webu?

Potrebujete na webových stránkach vo Webnode zmeniť pozíciu pre prepínanie jazykov?

#Ako funguje viacjazyčný web vo Webnode?

#Aktivoval som si viacjazyčný web, ale stránka sa zobrazuje v inom jazyku…

TIP PRE VLAJKY V MOBILNEJ VERZII:

Ďalšie skvelé návody

Ako si vytvoriť web stránku jednoducho a zdarma (Webnode návod)

Ako vo Webnode skryť dátum zverejňenia článku?

Ako na webové stránky vložiť mapu z Mapy.cz?

Ako na web pridať padajúce konfety?

Ako prepojiť Google Tag Manager s webom od Webnode?

Ako zvýšiť predaj v e-shope o 7-18 % ?

Ako vo Webnode skryť košík v eshope?

Ako na web vo Webnode vložiť anketu?

Ako pridať obrázok GIF vo Webnode?

Online rezervačný systém na web? Odporúčam systém, ktorý sa prispôsobí každému podnikaniu

Prihláste sa k odberu noviniek zo sveta webových stránok - William promotions

Ďakujem ti za prihlásenie. Ozvem sa čoskoro s novým návodom :)

4 komentáre

Odoslať komentár Zrušiť odpoveď

Odporúčam: Vytvorte si web alebo e-shop

Kategórie

Najnovšie články

Odporúčané: Vytvorte si web alebo e-shop

Kúpte mi kávu ☕