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

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

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 na web pridať padajúce konfety? - 31.12.2019
Ako prepojiť Google Tag Manager s webom od Webnode? - 27.11.2019
Ako zvýšiť predaj v e-shope o 7-18 % ? - 1.10.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)

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

Ako prepojiť Facebook Messenger s webom u Webnode?

Ako Nastaviť Emailový Marketing vo Webnode cez MailChimp?

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

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