1. Hlavní stránka
  2. Používání šablon
  3. Responzivní šablony verze 2.0

Responzivní šablony verze 2.0

Do administrace byly nahrány nové responzivní grafické šablony, které jsou od předešlých tématické a tudíž koncipované pro konkrétní odvětví.

Volit a aktivovat je můžete opět v sekci Nastavení -> Design webu -> Grafické šablony -> Responzivní šablony.
Všechny z těchto nových šablon obsahují na úvodní straně slider, který se nachází na pozici hlavičky a v defaultním nastavení již obsahuje 3 námi vytvořené tématické obrázky, které lze libovolně použit.
Slider lze editovat v sekci Aplikace -> Rotátor obrázků, kde je nově i nabídka Rotátor šablona. Tato editační sekce se zobrazuje pouze v případě, že máte na webu aktivní responzivní šablonu, které slider obsahuje. Zde je možné nahrát neomezený počet obrázků (o rozměru 1920x500px), přiřadit jim odkazy (http://www…) a případně nastavit pořadí zobrazení obrázků, ve kterém se mají přehrávat.
Pokud budete chtít do šablony vrátit původní obrázky, je možné v Rotátoru šablony přepnout na Výchozí obrázky šablony, kde je případně možné i defaultní obrázky stáhnout do PC (ve formátu JPG).
V případě, že nechcete slider zobrazovat, je možné jej zcela deaktivovat.
Obrázky slideru obsahují defaultní ilustrační texty, které v případě nahrání vlastních obrázků zmizí. Pokud zde chcete text mít, je možné jej dosadit dvěma způsoby:
1. Text dosadíte přímo do obrázku – Obrázek si otevřete v grafické editoru (například Malování, které je součastí Windows) a zde text přímo do obrázku vložíte. Následně jej uložíte a poté do slideru nahrajete.
2. Text vložíte pomoci CSS stylů – CSS zápis, pomocí kterého je možné dosadit text, je dostupný níže. Tento kód upravíte a vložíte v sekci Nastaveni -> Design webu -> Vlastní CSS
<————————————————–>
.slider_available .bg-img-1::before {
content: „TEXT“;
font-size: 40px;
font-weight: bold;
position: relative;
top: 220px;
left: 400px;
font-family: Tahoma;
background-color: #40383B ;
text-shadow: 0px 1px 0.4px rgba(0, 0, 0, 0.3);
color: #FFF;
text-transform: uppercase;
}
<————————————————–>
Legenda:
.slider_available .bg-img-1::before { <— Číslo definuje pozici obrázku, pro který změnu provádíte (1= první obrázek ve slideru, druhy bude mít 2 atd.), pro každý slider kládáte tedy opětovně celý tento zápis CSS kódu
content: „TEXT„; <— Textový obsah, zde napíšete text, který se má zobrazit
font-size: 40px; <— Číslo definuje velikost písma v pixelech
font-weight: bold; <— Šířka písma, pokud nechcete tučné (bold), zadáte normal 
position: relative;
top: 220px; <— Odsazení shora
left: 400px; <— Odsazení zleva
font-family: Tahoma; <— Název fontu
background-color: #40383B; <— Barva podkladu textu, zadáváte hexadecimalní kód (#4CA206), anglický název (white, red..) nebo transparent (pro průhledné pozadí)
text-shadow: 0px 1px 0.4px rgba(0, 0, 0, 0.3);
color: #FFFFFF; <— Barva samotného textu, zadáváte hexadecimalní kód (#4CA206), anglický název (white, red..) nebo transparent (pro průhledné pozadí)
text-transform: uppercase; <— Uppercase nastaví všech písmena na velká, pokud chcete text zobrazit tak, jak jej napíšete, zadáváte hodnotu none
}
Pokud je pro vás výška slideru příliš velká, je možné si ji upravit CSS zápisem:
.slider_available #slider {
height: 500px !important;
}
500px je defualtně nastavená výška.
Obrázky jsou taktéž po nahrání roztaženy do maximální možné šířky a výšky. Pokud je chcete zobrazit přesně v takovém rozměru, v jakém je nahrajete, je nutné do CSS přidat zápis:
.slider_available .bg-img {
background-size: auto !important;
}
Pomohl Vám tento návod? Ano Ne