Konfiguracja nietypowych sekcji

Szablon Inovax pozwala na tworzenie niestandardowych sekcji i układów, które wykraczają poza standardowe możliwości.

Sekcje na stronie głównej

Dodawanie własnych sekcji

Przejdź do Wygląd i treści → Strona główna
Kliknij Dodaj sekcję
Wybierz typ sekcji
Skonfiguruj zawartość

Dostępne typy sekcji

Typ sekcji	Opis
Baner pełnej szerokości	Grafika na całą szerokość strony
Produkty z kategorii	Karuzel produktów z wybranej kategorii
Kafelki kategorii	Siatka z linkami do kategorii
Tekst + obraz	Sekcja z tekstem i grafiką obok
Video	Osadzenie filmu YouTube/Vimeo
HTML	Własny kod HTML
Newsletter	Formularz zapisu
Instagram	Feed z Instagrama
Blog	Najnowsze wpisy z bloga

Układ sekcji

Każda sekcja może mieć konfigurowalny układ:

Szerokość - Pełna / Z marginesami
Tło - Kolor / Grafika / Gradient
Odstępy - Marginesy górny i dolny
Kolejność - Pozycja na stronie (drag & drop)

Sekcje na podstronach

Strony CMS

Możesz tworzyć własne podstrony z niestandardowym układem:

Przejdź do Wygląd i treści → Strony informacyjne
Utwórz nową stronę
W edytorze użyj trybu HTML
Dodaj własne sekcje używając klas CSS szablonu

Przykładowy układ dwukolumnowy

<div class="custom-section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2>Nagłówek</h2>
        <p>Treść lewej kolumny...</p>
      </div>
      <div class="col-md-6">
        <img src="obrazek.jpg" alt="Opis">
      </div>
    </div>
  </div>
</div>

Sekcja z tłem

<div class="custom-section" style="background-color: #f5f5f5; padding: 60px 0;">
  <div class="container text-center">
    <h2>Dlaczego my?</h2>
    <div class="row">
      <div class="col-md-4">
        <div class="feature-box">
          <span class="icon">🚚</span>
          <h3>Szybka dostawa</h3>
          <p>Wysyłka w 24h</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="feature-box">
          <span class="icon">💳</span>
          <h3>Bezpieczne płatności</h3>
          <p>Szybkie przelewy</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="feature-box">
          <span class="icon">📞</span>
          <h3>Wsparcie 24/7</h3>
          <p>Zawsze pomocni</p>
        </div>
      </div>
    </div>
  </div>
</div>

Klasy CSS pomocnicze

Szablon udostępnia klasy CSS, które ułatwiają stylowanie:

Klasa	Działanie
`.text-center`	Wyśrodkowanie tekstu
`.text-left`	Tekst do lewej
`.text-right`	Tekst do prawej
`.mt-X`	Margines górny (X = 1-5)
`.mb-X`	Margines dolny (X = 1-5)
`.py-X`	Padding pionowy
`.px-X`	Padding poziomy
`.d-none`	Ukryj element
`.d-md-block`	Pokaż na desktop