Storefront: Zmiana pozycji treści w obrębie sekcji

Data publikacji: 17 maja 2024 Ostatnia aktualizacja: 9 lipca 2024

Treści tj. tekst, grafika, inne moduły, dodawane do nowo tworzonych sekcji, wierszy i kolumn, mają ustawione domyślne wyrównanie. W poziomie: do lewej natomiast w pionie: do środka. Z tej instrukcji dowiesz się jak zmieniać domyślne położenie treści oraz jak ustawiać odległości (marginesy) między nimi.

Domyślne ustawienia treści w obrębie sekcji

Dla przypomnienia. Struktura elementów pozwalających na budowanie siatek tzw. gridów wygląda następująco:

  • Sekcja [S]
  • Wiersze [W] (zawierające się w sekcjach)
  • Kolumny [K] (zawierające się w wierszach)
Przykład struktury strony, którą możesz edytować w Shoper Storefront
Rys 1. Budowa struktury siatki strony w Shoper Storefront
Przykład struktury strony, którą możesz edytować w Shoper Storefront
Rys 1. Budowa struktury siatki strony w Shoper Storefront
W ustawieniach Sekcji znajdziesz parametry, które odpowiadają za położenie jej treści na stronie. Ustawienia te znajdziesz w bloku MARGINESY.

  • Marginesy zewnętrzne (atrybut margin w css) (A), czyli odległości między innymi Sekcjami na edytowanej stronie oraz odległości od lewej i prawej krawędzi strony. Domyślna wartość marginesów zewnętrznych wynosi 0 rem.
  • Marginesy wewnętrzne (B) (atrybut padding w css), czyli odległości między wewnętrznymi krawędziami Sekcji, a Wierszami zawierającymi się w Sekcji. Domyślna wartość marginesów wewnętrznych wynosi 0 rem.
  • Marginesy na różnych urządzeniach (C) – przesuwając suwak w prawo możesz wprowadzać różne wartości marginesów dla różnych urządzeń
Shoper Visual Editor > Różne wartości ustawień dla różnych urządzeń
Rys 3. Możesz wprowadzić różne wartości marginesów ze względu na szerokość ekranu
Shoper Visual Editor > Różne wartości ustawień dla różnych urządzeń
Rys 3. Możesz wprowadzić różne wartości marginesów ze względu na szerokość ekranu
Shoper Visual Editor > Edycja sekcji > Marginesy
Rys 2. Możesz ustawiać wartości marginesów zewnętrznych i wewnętrznych, dla każdego rodzaju urządzenia z osobna
Shoper Visual Editor > Edycja sekcji > Marginesy
Rys 2. Możesz ustawiać wartości marginesów zewnętrznych i wewnętrznych, dla każdego rodzaju urządzenia z osobna
W ustawieniach Wiersza możesz zmieniać:

Wyrównanie kolumn, czyli decydować o sposobie wyświetlania treści, które będą znajdować się w kolumnach, w których z kolei będziesz umieszczać moduły. W obrębie ustawień: WYRÓWNANIE KOLUMN masz do dyspozycji:

  • Poziome wyrównanie (A) – możesz wyrównać: do lewej (ustawienie domyślne), do prawej, do środka, a także wykorzystać predefiniowane ustawienia znane ze styli CSS, czyli: wyrównaj skrajne kolumny do krawędzi strony (odpowiada justify-content: space-between w css), oddal skrajne kolumny od krawędzi strony (odpowiada justify content: space-around w css), ustaw równe odstępy pomiędzy kolumnami i od krawędzi strony (odpowiada justify content: space-evenly w css).
  • Pionowe wyrównanie (B) – możesz wyrównać: do góry , do dołu, do środka (ustawienie domyślne), a także skorzystać z predefiniowanych wartości, wykorzystywanych w stylach CSS, czyli: wyrównaj wysokość kolumn do najwyższej kolumny w wierszu (odpowiada align-items: stretch w css), ustaw tak by zawartość kolumn była na tej samej wysokości (odpowiada align-items: baseline w css).
  • Wyrównanie na różnych urządzeniach (C) – przesuwając suwak w prawo możesz wprowadzać różne parametry wyrównania kolumn dla różnych urządzeń
Shoper Visual Editor > Różne wartości ustawień dla różnych urządzeń
Rys 5. Na różnych urządzeniach możesz wprowadzić różne sposoby wyrównania treści
Shoper Visual Editor > Różne wartości ustawień dla różnych urządzeń
Rys 5. Na różnych urządzeniach możesz wprowadzić różne sposoby wyrównania treści
Shoper Visual Editor > Ustawienia wiersza > Wyrównwanie kolumn
Rys 4. Możesz zmienić domyślne wyrównanie treści
Shoper Visual Editor > Ustawienia wiersza > Wyrównwanie kolumn
Rys 4. Możesz zmienić domyślne wyrównanie treści

W ustawieniach Wiersza możesz także ustawić marginesy, czyli odległości między krawędzią Wiersza a wewnętrzną krawędzią sekcji.

Ustawienia marginesów Wiesza nie są tożsame z ustawieniami marginesów wewnętrznych Sekcji i funkcjonują niezależnie od siebie. Jeśli wprowadzisz wartość 1rem dla wewnętrznego marginesu Sekcji, oraz wartość 1rem dla marginesu Wiersza, to odległość między Sekcją a Wierszem wyniesie wartość 2rem.

Możesz także ustawić różne wartości marginesów dla różnych urządzeń

Shoper Visual Editor > Ustawienia wiersza > Marginesy
Rys 6. Możesz wprowadzić marginesy dla całego wiersza względem sekcji
Shoper Visual Editor > Ustawienia wiersza > Marginesy
Rys 6. Możesz wprowadzić marginesy dla całego wiersza względem sekcji
W ustawieniach Kolumny możesz zmieniać ustawienia, które będą miały wpływ na położenie treści, czyli dodanego modułu do kolumny.

W bloku SZEROKOŚĆ określasz, jaką szerokość mają mieć kolumny umieszczone w danym wierszu. Do dyspozycji masz trzy ustawienia:

  • Automatyczna (dostosuje się do szerokości pozostałych kolumn jednocześnie, wypełniając cały wiersz) (ustawienie domyślne),
  • Zależna od treści (dostosuje się do szerokości modułu umieszczonego w kolumnie),
  • Stała (możesz na sztywno określić szerokość kolumny, ustawiając wielokrotność 1/12 szerokości kolumny).
Shoper Visual Editor > Ustawienia kolumny > Szerokość kolumny
Rys 7. Możesz decydować o szerokości kolumny każdej z osobna
Shoper Visual Editor > Ustawienia kolumny > Szerokość kolumny
Rys 7. Możesz decydować o szerokości kolumny każdej z osobna

W bloku MARGINESY WEWNĘTRZNE (PADDING) możesz decydować o odległościach od wewnętrznej krawędzi kolumny, do krawędzi danego modułu.

Podobnie jak w przypadku ustawień Sekcji oraz Wiersza, możesz wprowadzić różne wartości marginesów ze względu na różne szerokości ekranu poszczególnych typów urządzeń.

Shoper Visual Editor > Ustawienia kolumny > Marginesy wewnętrzne
Rys 8. Możesz ustawiać wewnętrzne marginesy kolumny, względem modułów do niej dodanych
Shoper Visual Editor > Ustawienia kolumny > Marginesy wewnętrzne
Rys 8. Możesz ustawiać wewnętrzne marginesy kolumny, względem modułów do niej dodanych

Jak w sekcji wyśrodkować moduł umieszczony w jednej kolumnie?

Przejdź do zakładki Wygląd i treści (A) > Wygląd sklepu (B) > Obecny szablon graficzny (C) > Szczegóły szablonu (D) i uruchom edytor, klikając: EDYTUJ UKŁAD I STYL SZABLONU (E).
Panel administracyjny sklepu > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Edytuj układ i styl szablonu
Rys 1. Uruchom edytor Shoper Visual Editor w technologii Storefront
Panel administracyjny sklepu > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Edytuj układ i styl szablonu
Rys 1. Uruchom edytor Shoper Visual Editor w technologii Storefront

Jeśli szablon Storefront nie jest ustawiony jako aktywny w sklepie, to przejdź do jego edycji w zakładce: Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne.

W Shoper Visual Editor przejdź do edycji danej kolumny w Sekcji, dla której chcesz wyśrodkować treść.
W ustawieniach kolumny, w bloku SZEROKOŚĆ wybierz opcję: Zależna od treści lub Stała i określ jej stałą szerokość. Na końcu kliknij: ZAPISZ, aby potwierdzić zmiany w ustawieniach kolumny.
Następnie przejdź do ustawień wiersza. W bloku: WYRÓWNANIE KOLUMN, w rozwijanej liście podpisanej Poziome wyrównanie, wybierz opcję: Do środka. Później kliknij: ZAPISZ, aby potwierdzić zmiany w ustawieniach wiersza.

Następnie kliknij: ZAPISZ I OPUBLIKUJ ZMIANY W UKŁADZIE, w prawym górnym rogu edytora, aby kupujący zobaczyli zmiany na stronie twojego sklepu
Warto zapamiętać!
W powyższym artykule zostało wyjaśnione:
  • jakie są domyślne ustawienia położenia treści w sekcji,
  • w jaki sposób wyśrodkować położenie treści w sekcji.
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