Wielopoziomowy układ strony w Shoper Visual Editor

Data publikacji: 14 stycznia 2025 Ostatnia aktualizacja artykułu: 29 stycznia 2025

Shoper Visual Editor w technologii Storefront umożliwia tworzenie własnych gridów, inaczej mówiąc siatek, na których układasz elementy strony swojego sklepu internetowego jak klocki. W momencie tworzenia prostych układów proces ten zajmuje kilka minut.

Dotychczas podstawowa struktura siatki wyglądała mniej więcej tak: Sekcja > Wiersz > Kolumna > Moduł. Mieliśmy zatem do czynienia z 3-poziomowym zagnieżdżaniem, co w przypadku bardziej skomplikowanych układów utrudniało budowanie siatki i zajmowało sporo czasu. Należało dokładnie rozplanować siatkę przed umieszczeniem w niej modułów.

W tym momencie praca przy tworzeniu bardziej zaawansowanych układów będzie jeszcze prostsza, a to wszystko po to, aby przyspieszyć pracę w edytorze. W ramach ostatniej aktualizacji dodaliśmy możliwość tworzenia zagnieżdżeń w siatce za pomocą jednego kliknięcia. Teraz struktura siatki może wyglądać następujący sposób: Sekcja > Wiersz > Kolumna > Wiersz > Kolumna > Wiersz > Kolumna > Moduł.

Większa niezależność w projektowaniu szablonu

Pamiętając, że w ustawieniach wiersza możesz decydować o rozmieszczeniu (do lewej, do środka, do prawej) wszystkich jego elementów (kolumn), dzięki opisywanej nowości, część elementów możesz wyrównać do lewej, a część do prawej strony nadal w obrębie jednej sekcji.

Elementy wiersza wyrównane do lewej oraz do prawej jednocześnie
Rys 1. Elementy wiersza wyrównane do lewej oraz do prawej jednocześnie
Elementy wiersza wyrównane do lewej oraz do prawej jednocześnie
Rys 1. Elementy wiersza wyrównane do lewej oraz do prawej jednocześnie

Kreatywna edycja szablonu

Załóżmy, że na stronie głównej mamy sekcję, dodaliśmy w niej wiersz i dwie kolumny. Po lewej mamy grafikę, po prawej tekst. Do kolumny z tekstem chcemy dodać jeszcze dwa przyciski. Zagnieżdżamy więc nowy wiersz w kolumnie po prawej i wybieramy jedną z predefiniowanych siatek. Następnie dodajemy moduły Button (przycisk) do powstałych kolumn.

Dzielenie wiersza na dwie kolumny
Rys 2. Dzielenie wiersza na dwie kolumny
Dzielenie wiersza na dwie kolumny
Rys 2. Dzielenie wiersza na dwie kolumny

Efekt końcowy wygląda następująco.

Dwa przyciski obok siebie w edytowanej karcie produktu
Rys 3. Dwa przyciski obok siebie w edytowanej karcie produktu
Dwa przyciski obok siebie w edytowanej karcie produktu
Rys 3. Dwa przyciski obok siebie w edytowanej karcie produktu

Swobodne tworzenie szablonu sklepu

Dzięki nowej funkcji zyskujesz pełną dowolność w ustawianiu elementów szablonu, tak jak chcesz. Elementy, które dotychczas były wyświetlane jeden pod drugim, możesz teraz umieścić obok siebie. Twórz unikatowe rozwiązania i poczuj niezależność w projektowaniu szablonu twojego sklepu!

Trzy elementy karty produktu ułożone jeden pod drugim
Rys 4. Trzy elementy karty produktu ułożone jeden pod drugim
Trzy elementy karty produktu ułożone jeden pod drugim
Rys 4. Trzy elementy karty produktu ułożone jeden pod drugim
Trzy elementy karty produktu ułożone obok siebie
Rys 5. Trzy elementy karty produktu ułożone obok siebie
Trzy elementy karty produktu ułożone obok siebie
Rys 5. Trzy elementy karty produktu ułożone obok siebie

Skorzystaj z instrukcji tworzenia wielopoziomowych układów: Jak zagnieździć wiersz w kolumnie?

Warto zapamiętać!
W powyższym artykule zostało wyjaśnione:
  • Czym jest Wielopoziomowy układ strony?
  • Jakie możliwości daje stosowanie wielopoziomowego układu strony?
Czy ten artykuł był pomocny?
Tak
Nie
Dziękujemy za odpowiedź!
Udostępnij artykuł:

Przetestuj sklep internetowy
przez 14 dni za darmo

Korzystaj ze wszystkich funkcji oprogramowania za darmo i bez zobowiązań.

Testuj wszystkie funkcje przez 14 dni bez zobowiązań. Zakładając sklep poprzez podanie
adresu e-mail akceptujesz nasz Regulamin i Politykę Prywatności