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