Nová generace šablon umožňuje nastavit vzhled pomocí proměnných v CSS. Ukážeme si, jak na to.
Důležitá informace: Návod je určen primárně technicky orientovaným uživatelům, kodérům či designerům.
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.
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;
}
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;
}
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 .
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.
(c) 2020 - 2023 Page Builder s.r.o., All rights reserved. Hosted by VasHosting.cz ❤️. Version API: 16.0.2