Otestujte vektorové šablony popisků pomocí CSS proměnných

09.01.2024
« Zpět na výpis článků

Otestujte vektorové šablony popisků pomocí proměnných v CSS

Nová generace šablon umožňuje nastavit vzhled pomocí proměnných v CSS. Ukážeme si, jak na to.

Otestujte vektorové šablony popisků pomocí CSS proměnných

Důležitá informace: Návod je určen primárně technicky orientovaným uživatelům, kodérům či designerům. 

Co jsou to vektorové šablony a jaké mají výhody

Tyto šablony jsou z velké části nastavitelné pomocí tzn. nativních CSS proměnných, které dovolují kodérům upravit nebo opravit vzhled bez nutnosti psaní zbytečného kódu navíc. 

Jak funkci otestovat

Pro zapnutí  proměnných v šablonách je potřeba v administraci (Vzhled a obsah > Editor) přidat kód, který přepne šablonu:

<script>
window.enableForceGeneric = true;
</script>

Nyní obnovíme stránku a zobrazíme si vlastnosti např. nadpisu, kde uvidíme následující kód:

#pobo-all-content .widget-typography h2 {
    font-size: var(--pobo-typo-h2-font-size);
    line-height: var(--pobo-typo-h2-line-height);
    font-weight: var(--pobo-typo-h2-font-weight);
    color: var(--pobo-typo-h2-font-color);
    padding: var(--pobo-typo-h2-padding);
    margin: var(--pobo-typo-h2-margin);
    z-index: 2;
    position: relative;
}
Otestujte vektorové šablony popisků pomocí CSS proměnných Inspekce CSS nadpisu 
Otestujte vektorové šablony popisků pomocí CSS proměnných Seznam proměnných

Seznam těchto proměnných lze upravovat podle potřeby velmi snadno - v Pobo Page Builder vytvoříme novou CSS úpravu a jako kód vložíme následující:

:root {
  --pobo-typo-h2-font-size: 25px;
}
Otestujte vektorové šablony popisků pomocí CSS proměnných Náhled CSS úprav

Co vše lze upravit pomocí proměnných

Pomocí proměnných lze upravit poměrně detailně typografii nadpisů, odrážek, odstavců atd. (velikost textu, řádkování, barvu, odsazení, ...) stejně tak i u widgetů. U složitějších widgetů lze měnit také zaoblení, stíny, barvu a pod.

Seznam veškerých proměnných naleznete na stránce https://github.com/pobo-builder/widget-asset/blob/master/src/utils/native-variable.scss . 

Konkrétní ukázka  

Vektorovou šablonu si ukážeme na prvním e-shopu www.ksd-art.cz, ve kterém jsou použity následující proměnné:

:root {
  --pobo-typo-h3-font-size: 25px;
  --pobo-typo-h3-line-height: 30px;
  --pobo-typo-list-padding: 0 0 0 30px;
  --pobo-typo-p-font-size: 18px;
  --pobo-typo-p-line-height: 25px;
  --pobo-checked-list-li-font-size: 18px;
  --pobo-checked-list-li-line-height: 25px;
  --pobo-typo-list-item-margin: 0;
  --pobo-advantages-ico-container-border-radius: 50%;
  --pobo-advantages-ico-container-width: 150px;
  --pobo-advantages-ico-container-margin: 0 auto 20px auto;
  --pobo-reviews-two-inner-box-shadow: #9c9c9c33 0px 5px 5px -5px;
  --pobo-interview-photo-box-shadow: #9c9c9c33 0px 5px 5px -5px;
  --pobo-advantages-ico-container-box-shadow: #9c9c9c33 0px 5px 5px -5px;
  --pobo-advantages-four-info-font-size: 15px;
  --pobo-advantages-info-font-color: #747474;
  --pobo-typo-h2-before-content: '';
  --pobo-typo-h2-before-bg: #8f0141;
  --pobo-checked-list-li-background: url('https://image.pobo.cz/assets/checked.svg') no-repeat center center;
  --pobo-gallery-image-title-font-size: 14px;
  --pobo-gallery-image-title-font-color: black;
  --pobo-gallery-image-title-line-height: 17px;
  --pobo-global-widget-padding: 25px 20px;
  --pobo-gallery-image-title-text-align: left;
}

Pomocí tohoto jednoduchého kódu lze vzhled přizpůsobit danému e-eshopu. 

Ukázka vzhledu

Otestujte vektorové šablony popisků pomocí CSS proměnných Ukázka produktu
Otestujte vektorové šablony popisků pomocí CSS proměnných Ukázka produktu