Obraz i tekst

Sekcja z obrazem po jednej stronie i tekstem HTML po drugiej. Responsywny design - na mobile obraz i tekst są ułożone w …

Jak wygląda

Poniżej żywy podgląd widżetu tak, jak zobaczy go odwiedzający stronę.

Obraz po lewej

Klasyczny układ: zdjęcie i tekst obok — na opis usługi lub produktu.

Obraz i tekst — panel stack

Wariant z backgroundColor (#ede9fe) do weryfikacji obrysu sekcji obok widżetów card/native w --cms-widget-main-surface-mode: panel (layout main + aside).

Przykład 2

Obraz i tekst

Sekcja z obrazem po jednej stronie i tekstem HTML po drugiej. Responsywny design - na mobile obraz i tekst są ułożone w kolumnie.

Przykład 3

Obraz i tekst

Sekcja z obrazem po jednej stronie i tekstem HTML po drugiej. Responsywny design - na mobile obraz i tekst są ułożone w kolumnie.

Obraz po prawej

Ten sam układ z obrazem po prawej — urozmaica dłuższe strony.

Obraz i tekst — obraz po prawej

Drugi wariant układu image-text.

Do czego służy

Sekcja z obrazem po jednej stronie i tekstem HTML po drugiej. Responsywny design - na mobile obraz i tekst są ułożone w kolumnie.

Co ustawisz w panelu

Te pola zobaczysz przy edycji widżetu na stronie:

  • Obraz (wymagane, grupa pól)

    Obraz z biblioteki mediów lub zewnętrzny URL

  • URL obrazu (legacy) (adres URL)

    Przestarzałe — użyj pola „Obraz”

  • Tekst alternatywny obrazu

    Tekst wyświetlany gdy obraz nie może być załadowany (opcjonalne)

  • Tekst HTML (wymagane, tekst sformatowany)

    Tekst HTML (WYSIWYG) wyświetlany obok obrazu

  • Układ

    Pozycja obrazu względem tekstu

  • Wyrównanie tekstu w pionie

    Położenie tekstu względem obrazu na desktopie (mobile bez zmian)

  • Kolor tła (kolor)

    Kolor tła sekcji

  • Padding

    Padding sekcji (np. 2rem 0)

  • Gap

    Odstęp między obrazem a tekstem

Jak dodać na stronę

  1. Otwórz stronę w panelu i przejdź do edycji układu.
  2. Dodaj ten widżet w wybranej sekcji.
  3. Uzupełnij pola z listy powyżej, zapisz szkic i opublikuj, gdy treść jest gotowa.