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ąć klasę obrazu, atrybuty responsywne albo fragment znacznika <picture>. Wklejaj cały domyślny kod, nie tylko uszkodzony kafel.
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.
<div class="gc__main__mini_bento__editor-notice" style="margin:0 0 16px;padding:14px 16px;border:1px solid #d2a900;background:#fff8d8;color:#332b00;font-size:14px;line-height:1.45;"><strong>Uszkodziłeś kod HTML?</strong> <a href="https://growdocs.growcommerce.pl/" target="_blank" rel="noopener">Kliknij tutaj i przywróć domyślny kod.</a></div>
<p>Znajdź wyposażenie, aktualne okazje i praktyczne inspiracje w jednym miejscu.</p>
<div class="gc__main__mini_bento__grid">
<div class="gc__main__mini_bento__box gc__main__mini_bento__box--1 gc__main__mini_bento__box--media"><picture class="gc__main__mini_bento__picture"><source media="(max-width: 768px)" srcset="/userdata/public/assets/meble-ogrodowe-mobile-640x600.webp"><img class="gc__main__mini_bento__media" src="/userdata/public/assets/meble-ogrodowe-desktop-1200x700.webp" alt="" width="1200" height="700" loading="lazy" decoding="async"></picture><a href="/pl/c/Meble-ogrodowe/2"><span class="gc__main__mini_bento__eyebrow">meble ogrodowe</span><h3 class="gc__main__mini_bento__title">Urządź strefę relaksu</h3><p class="gc__main__mini_bento__desc">Stoły, krzesła, zestawy i dodatki do wygodnego wypoczynku na zewnątrz.</p><span class="gc__main__mini_bento__cta">Zobacz meble</span></a></div>
<div class="gc__main__mini_bento__box gc__main__mini_bento__box--2 gc__main__mini_bento__box--media"><picture class="gc__main__mini_bento__picture"><source media="(max-width: 768px)" srcset="/userdata/public/assets/grill-mobile-640x600.webp"><img class="gc__main__mini_bento__media" src="/userdata/public/assets/grill-desktop-1200x420.webp" alt="" width="1200" height="420" loading="lazy" decoding="async"></picture><a href="/pl/promotions"><span class="gc__main__mini_bento__eyebrow">okazje</span><h3 class="gc__main__mini_bento__title">Aktualne promocje</h3><p class="gc__main__mini_bento__desc">Sprawdź produkty dostępne teraz w specjalnych cenach.</p><span class="gc__main__mini_bento__cta--light">Zobacz promocje</span></a></div>
<div class="gc__main__mini_bento__box gc__main__mini_bento__box--3"><picture class="gc__main__mini_bento__picture"><source media="(max-width: 768px)" srcset="/userdata/public/assets/bento-format-640x600-v2.webp"><img class="gc__main__mini_bento__media" src="/userdata/public/assets/mini-bento.jpg" alt="Sugerowane formaty: 1200 × 420 px i 640 × 600 px" width="2120" height="742" loading="lazy" decoding="async"></picture></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 pełną grafikę bez ciemnej warstwy tekstowej.
- Pole „Klasa CSS” zawiera dokładnie
gc__main__mini_bento__1. - Obrazy wypełniają swoje kafle i nie mają dopisanych ręcznie wymiarów z edytora.
Nadal coś się nie zgadza?
Nie poprawiaj kolejnych fragmentów w ciemno.
Wyślij screen modułu i adres strony do wsparcia. Wskażemy, czy problem dotyczy HTML, klasy CSS czy plików graficznych.