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

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

Ako prepojiť Facebook Messenger s webom u Webnode?

Chcete prepojiť Facebook Messenger s webom u Webnode a získať tak "online chat" na webe úplne zdarma? Jednoduchý návod na prepojenie webu u Webnode s Facebook Messenger Facebook Messenger je skvelou voľbou pre komunikáciu s návštevníkom Vášho webu. Po kliknutí na...

Ako Nastaviť Emailový Marketing vo Webnode cez MailChimp?

Hľadáte jednoduché riešenie pre e-mailový marketing vo Webnode? Chcete na Váš web vložiť vyskakovacie okno (pop-up) pre zber e-mailov? Posielajte svojim odberateľom novinky skrz automatizovaný systém MailChimp. Je to zdarma do 2 000 odberateľov a 12 000 e-mailov...

Ako pridať remarketingový kód vo Webnode?

Ako nastaviť remarketing vo Webnode? a Kam vložiť remarketingový kód? V návode Ako pridať konverzný kód vo Webnode? som Vám ukázal jednoduchý postup pre vloženie konverzného kódu pre sledovanie konverzií. Poďme sa teraz spoločne pozrieť na ďalšiu PPC metódu...

Ako nastaviť poštového klienta Gmail s emailom od Webnode?

Chcete prepojiť svoj e-mail u Webnode s Gmail.com a nastaviť Gmail ako poštového klienta? Príjem správ z Webnode do Gmail. V návode Ako Vytvoriť Profesionálny E-mailový Podpis? Jednoducho a ZDARMA som Vám ukázal veľmi jednoduchý spôsob ako si vytvoriť emailový...

Ako sledovať aktivitu návštevníkov Vášho webu pomocou SmartLook?

Chcete pochopiť správanie Vášho klienta na webe? Služba SmartLook Vám s tým určite pomôže. Čo je to "Smartlook" ? Smartlook je online aplikácia pre nahrávanie pohybu myši návštevníkov Vášho webu/eshopu, Pomôže Vám odhaliť chyby na Vašom webe. Použitie...

Ako si vytvoriť mapu s vlastnými bodmi (špendlíky na mape)?

Chcete na web vo Webnode pridať mapu s vlastnými bodmi? V návode Ako správne nastaviť Google Mapu vo Webnode? som Vám ukázal ako vložiť mapu z klasickej adresy v Google My maps. V tomto návode si ukážeme postup pre vytvorenie vlastnej mapy s neobmezedným počtom...

Ako Vytvoriť Profesionálny E-mailový Podpis? Jednoducho a ZDARMA

Hľadáte spôsob ako si vytvoriť emailový podpis? (Gmail, Webmail, Outlook apod) Emailový podpis je nevyhnuteľnou súčasťou modernej komunikácie medzi zákazníkom a podnikateľom. Firemný email zvýši dôveryhodnosť v očiach Vášho potencionálneho klienta. Vytvorte si preto...

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)

Online rezervačný systém na web? Odporúčam systém, ktorý sa prispôsobí každému podnikaniu - 12.6.2019
Ako prepojiť Facebook Messenger s webom u Webnode? - 12.5.2019
Ako Nastaviť Emailový Marketing vo Webnode cez MailChimp? - 21.4.2019

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

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)

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

Ako prepojiť Facebook Messenger s webom u Webnode?

Ako Nastaviť Emailový Marketing vo Webnode cez MailChimp?

Ako pridať remarketingový kód vo Webnode?

Ako nastaviť poštového klienta Gmail s emailom od Webnode?

Ako sledovať aktivitu návštevníkov Vášho webu pomocou SmartLook?

Ako si vytvoriť mapu s vlastnými bodmi (špendlíky na mape)?

Ako Vytvoriť Profesionálny E-mailový Podpis? Jednoducho a ZDARMA

Viliam

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

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

2 komentáre

Odoslať komentár Zrušiť odpoveď

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

Kategórie

Najnovšie články

Domény za výhodnú cenu:

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

Návštevnosť webu

Kúpte mi kávu ☕

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

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

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

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

2 komentáre

Odoslať komentár Zrušiť odpoveď

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

Kategórie

Najnovšie články

Domény za výhodnú cenu:

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

Návštevnosť webu

Kúpte mi kávu ☕

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

Odoslať komentár Zrušiť odpoveď