Zanim zaczniesz
Najpierw zachowaj kopię obecnej treści
Samodzielne zmiany w kodzie HTML wykonywane w Edytorze wizualnym nie są objęte gwarancją ani rękojmią na wdrożenie szablonu. Przed edycją skopiuj cały bieżący kod do osobnego pliku.
Edytor tekstowy może usunąć potrzebne klasy albo fragment znacznika. Wklejaj cały domyślny kod, nie tylko uszkodzony kafel. Nie kopiuj ścieżek zaczynających się od /userdata z innego sklepu — takie pliki nie są częścią instalacji szablonu.
Krok po kroku
Jak wkleić domyślny kod
Otwórz moduł Mini Bento
W Edytorze wizualnym przejdź do strony głównej, kliknij moduł Mini Bento, a następnie wybierz Edytuj treść przy polu „Treść z edytora tekstu”.
W tym samym panelu znajdziesz przycisk edycji treści i pole „Klasa CSS”. Przełącz edytor na widok kodu
W otwartym oknie kliknij ikonę <> Widok kodu na pasku narzędzi. Na screenie poniżej widać położenie tej funkcji.
Najedź na ikonę <>; podpowiedź pokaże nazwę „Widok kodu”.Zastąp całą zawartość
Zaznacz wszystko, co widać w widoku kodu, usuń zawartość i wklej kompletny HTML z sekcji Domyślny HTML. Nie dopisuj kodu na końcu starej wersji.
Sprawdź osobne pole klasy CSS
Po zapisaniu okna treści wróć do panelu modułu. Pole „Klasa CSS” musi zawierać dokładnie
gc__main__mini_bento__1— bez kropki i bez dodatkowych znaków.Zapisz cały Edytor wizualny
Kliknij główny przycisk Zapisz w Edytorze wizualnym. Otwórz stronę główną na komputerze i telefonie, a potem przejdź checklistę na końcu poradnika.
Gotowiec do wklejenia
Domyślny HTML Mini Bento
Przycisk kopiuje dokładnie tę samą zawartość, którą pobierzesz w pliku mini-bento-domyslny.html. Ten wariant nie zawiera obrazów ani ścieżek zależnych od konkretnego sklepu; dekoracje rysuje CSS szablonu Modern 2.0 Electro.
<div class="gc__main__mini_bento__editor-notice" style="margin:0 0 14px;padding:12px 14px;border:1px dashed #a8a8a8;background:#f7f7f7;color:#333;font-size:13px;line-height:1.5;">
<strong>Chcesz dodać własne grafiki?</strong>
Wgraj je bezpośrednio w tym sklepie. Pliki z innego sklepu nie przechodzą z instalacją szablonu.
</div>
<div class="gc__main__mini_bento__description">Nowości, aktualne okazje i inspiracje w jednym miejscu.</div>
<div class="gc__main__mini_bento__grid" role="region" tabindex="0" aria-label="Nowości, promocje i inspiracje">
<div class="gc__main__mini_bento__box gc__main__mini_bento__box--1">
<span class="gc__main__mini_bento__art gc__main__mini_bento__art--new" aria-hidden="true"></span>
<a href="/pl/new">
<span class="gc__main__mini_bento__eyebrow">Dopiero co dodane</span>
<span class="gc__main__mini_bento__title">Nowości w sklepie</span>
<span class="gc__main__mini_bento__desc">Zobacz produkty, które właśnie pojawiły się w ofercie.</span>
<span class="gc__main__mini_bento__cta">Sprawdź nowości</span>
</a>
</div>
<div class="gc__main__mini_bento__box gc__main__mini_bento__box--2">
<span class="gc__main__mini_bento__art gc__main__mini_bento__art--offers" aria-hidden="true"></span>
<a href="/pl/promotions">
<span class="gc__main__mini_bento__eyebrow">Teraz taniej</span>
<span class="gc__main__mini_bento__title">Aktualne promocje</span>
<span class="gc__main__mini_bento__desc">Okazje, których nie warto odkładać na później.</span>
<span class="gc__main__mini_bento__cta">Zobacz promocje</span>
</a>
</div>
<div class="gc__main__mini_bento__box gc__main__mini_bento__box--3 gc__main__mini_bento__box--choice">
<span class="gc__main__mini_bento__art gc__main__mini_bento__art--choice" aria-hidden="true"></span>
<div class="gc__main__mini_bento__content">
<span class="gc__main__mini_bento__eyebrow">Wybieraj po swojemu</span>
<span class="gc__main__mini_bento__title">Znajdź coś dla siebie</span>
<span class="gc__main__mini_bento__desc">Porównuj, odkrywaj i wracaj po kolejne inspiracje.</span>
<span class="gc__main__mini_bento__tags" aria-label="Inspiracje">Nowości · Promocje · Bestsellery</span>
</div>
</div>
</div>
Drugie, osobne pole
Domyślna klasa CSS
HTML trafia do edytora treści, a poniższa klasa do pola „Klasa CSS” widocznego w panelu Mini Bento.
gc__main__mini_bento__1Po zapisie
Sprawdź sześć rzeczy
- Na komputerze widać trzy kafle Mini Bento.
- Na telefonie kafle tworzą poziomą listę i można ją przewinąć.
- Pierwszy i drugi kafel zachowały treść oraz link.
- Trzeci kafel pokazuje jasną dekorację i listę inspiracji.
- Pole „Klasa CSS” zawiera dokładnie
gc__main__mini_bento__1. - Kod nie zawiera ścieżek
/userdata, a konsola sieciowa nie pokazuje błędów 404 z Mini Bento.
Płatne wsparcie i naprawa
Wolisz, żebyśmy naprawili to za Ciebie?
Samodzielne zmiany w Edytorze wizualnym nie są objęte gwarancją ani rękojmią. Możesz zlecić nam płatne przywrócenie modułu oraz kontrolę efektu na komputerze i telefonie.