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="EN">
                    </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 vytvoriť jednoduchý vizitkový web?

Ako vytvoriť jednoduchý vizitkový web? (scroll-ovací web)Čo je to vizitkový web? Vizitkový web je jednoduchý web, ktorý stručne a jasne predstavuje Vaše služby, či produkty. Je to jednoduchá webová stránka, ktorá slúži pre získanie základných informácií o Vašej firme....

Ako si vytvoriť vlastnú pätičku vo Webnode?

Chceli by ste na web/e-shop pridať vlastnú pätičku (footer) vo Webnode?Chceli by ste si na webové stránky, či e-shop vo Webnode pridať presmerovanie resp. odkaz na Vaše obchodné podmienky&GDPR do pätičky? S mojim jednoduchým návodom to určite zvládnete. Stačí sa...

Ako skryť kategóriu “všetky produkty” vo výpise produktov v e-shope od Webnode?

Ako na webe vo Webnode skryť kategóriu "Všetky produkty" vo výpise produtkov?V návode Ako vo Webnode skryť košík v eshope? a Ako vo Webnode skryť dátum zverejňenia článku? sme si ukázali ako jednoducho je možné vo Webnode niečo "skryť". V tomto článku sa dozviete, ako...

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

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

Vytvorte si vlastný web alebo e-shop

O plugine
Najnovšie príspevky

Follow me

Viliam

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

Follow me

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

Ako vytvoriť jednoduchý vizitkový web? - 31.5.2020
Ako si vytvoriť vlastnú pätičku vo Webnode? - 29.5.2020
Ako skryť kategóriu “všetky produkty” vo výpise produktov v e-shope od Webnode? - 26.4.2020

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 vytvoriť jednoduchý vizitkový web?

Ako si vytvoriť vlastnú pätičku vo Webnode?

Ako skryť kategóriu “všetky produkty” vo výpise produktov v e-shope od Webnode?

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?

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 ☕