Element z klasą header

Działa tylko z table_div

Jak to działa?

Głowna tabela ma klasę class="table_main".
Kliknij w tabelę poniżej, aby wyświetlić jej kod HTML
Jeśli chcesz dodać kolejne efekty, wystarczy, że do w.w. klasy dodasz kolejną klasę z listy poniżej. Klasy można łączyć.

  • table_main - stanadrdowa tabela
  • border-first i border-last - obramowania
  • tr0 - usuwa margines góra dół na wierszami w tabeli
  • rev - odwraca kolejność kolumn
  • rev-mobile - odwraca kolejność kolumn na telefonie
  • w30-70 - pierwsza kolumna ma 30%, druga 70%
  • data-aos="fade-up" - animacje
  • x1 small - wąska tabela, bez zdjęcia
  • center - wyśrodkowuje elementy w tabeli względem osi Y
  • center-x - wyśrodkowuje elementy w tabeli względem osi X
  • shadow - dodaje cień do komórek w tabeli (tylko table_main)
  • image-text - tekst na zdjęciu
  • menu - tekst plus menu
  • tabela w tabeli - możesz je łaczyć. Zobacz kilka przykładów
  • cennik - różne wersje cennika
  • w100p i inne - zmienia szerokość tabel
  • Tabela może też mieć kilka zdjęć, jeśli jest wysoka. Dodaj zdjęcia nie używając entera.
  • W tekście możesz umieszczać inne pliki używając [INCLUDE_nazwa-pliku.php]. Plik musi być w katalogu: $theme/include/

Kontentery

  • Aby "wypośrodkować" tekst na stronie, umieść go w div
  • Aby pod tekstem było tło na całą szerokość strony, umieść tabelę w section
    W section jest też klasa bg-image oraz dodatki: fixed cover contain
    w section dodaj też: style="background-image: url(photo/1980x10200007spurce-on-the-edge-during-the-sunrise-kwyersz.jpg);"
    W tabeli i w section możesz użyć tła:
    bg-grey bg-grey-light bg-grey-lighter bg-grey-dark bg-grey-darker bg-mark bg-mark-dark bg-mark2 bg-mark2-dark
    Dodając tło pamiętaj o paddingach:
    bg-05rem bg-1rem bg-1.5rem bg-2rem
  • Jeśli chcesz umieścić na całą szerokość strony znaczniki [CODE] umieść je w aside
  • Aby dodać link jako button umieść link w znaczniku nav i p, czyli nav > p > a lub dodaj do a klasę button
  • Film z YouTube umieść w div class="yt-movie". Więcej przykładów jak dodawać filmy z YouTube tutaj

Dodatkowe informacje:

  • Jeśli chcesz umieścić na całą szerokość strony znaczniki [CODE] umieść je w aside
  • Zdjęcia do tabelki - min 800px
  • Na stronie ustawiaj tabele tak, by na respo najpierw był tekst, później zdjęcie.
  • Jeśli chcesz, aby tabela została zamieniona na div, użyj zamiast klasy "table_main" klasy "table_div". Uwaga, nie działa wtedy zagnieżdżanie tabel w tabeli. Używaj tylko u wybrańców.
  • Dodaj do ul class = " check "
  • Dodaj do ul class = " arrow "

Znaczniki [CODE]:

  • [ PHONE_NUMBER ] - bez spacji, dodaje klikalny numer telefonu zdefiniowany w adminie -> Ustawienia -> Ustawienia strony
  • [ PAGE_EMAIL ] - bez spacji, dodaje klikalny e-mail zdefiniowany w adminie -> Ustawienia -> Ustawienia strony
  • [ ADDRESS_STREET ] - ulica i numer domu zdefiniowany w adminie -> Ustawienia -> Ustawienia strony
  • [ ADDRESS_CITY ] - kod pocztowy i miejscowość zdefiniowany w adminie -> Ustawienia -> Ustawienia strony
  • [ PAGE_FORM_CONTACT ] - Formularz kontaktowy, dodaj w div
  • [ PAGE_FORM_CTA ] - Formularz kontaktowy CTA
  • [ ADDON_typ_id_limit_limit-row_opcje ] dodaj w div

    1. typ:

    1. FAQ
    2. BLOG-BY-ID - wpisy z bloga po ID
    3. BLOG-BY-CAT - wpisy z bloga z wybranych kategorii
    4. S-PRODUKTY-BY-ID - produkty ze sklepu po ID
    5. S-PRODUKTY-BY-CAT - produkty ze sklepu w kategorii
    6. S-PRODUKTY-CAROUSEL - produkty ze sklepu z wybranych kategorii
    7. S-PRODUKTY-BY-CAT-CAROUSEL - produkty ze sklepu z wybranych kategorii
    8. S-KAT-BY-ID - kategorie ze sklepu po ID
    9. S-KAT-BY-ID-CAROUSEL - kategorie ze sklepu po ID
    10. GALLERY-BY-ID - zdjęcia z galerii o ID
    11. GALLERY-BY-ID-CAROUSEL - zdjęcia z galerii o ID, przewijane
    12. PAGES-BY-ID - treści z zakładek, wg kolejności wpisanych ID
    13. PAGES-BY-GLOWNA - treści z zakładek podrzędnych do ID, wg numeracji
    14. NUMBERS-ANIMATION - ID zakładki, która ma podzakładki. W podzakładkach: `Nazwa wyświetlana w stopce` - opcjonalny tekst wyświetlany przed animowaną cyfrą; 'Tytuł strony' - animowana cyfra; 'Treść na stronie' - opcjonalny tekst po animowanej cyfrze; `Dodatkowa treść` - opis pod cyfrą; `Zdjęcie` lub `Treść na stronie (na dole)` - ikonka;
    15. COUNT-TO-DATE - odlicza czas do określonej daty, datę w formacie Y-m-d H:i:s wpisz opcje, po średniku wpisz tekst do wyświetlenia kiedy data upłynie;

    2. id: id, jeśli kilka, wpisz rozdziel - (np. 7-14). Możesz ustawić też inną wartość niektórych wyników:

    1. FAQ, wartość: id zakładki nadrzędnej
    2. BLOG-BY-ID, wartość: nev (dla najnowszych)
    3. S-PRODUKTY-BY-ID, wartość: nev (dla najnowszych)
    4. S-PRODUKTY-CAROUSEL, wartość: NEV (najnowsze, ustaw też opcje na idDesc), PROMOWANY, NOWOSC, PROMOCJA (niższa cena lub zaznaczony checbox Promocja), BESTSELLER, OSTATNIOOGLADANEBYUSER (ostatnio oglądane przez tego użytkownika)
    5. S-KAT-BY-ID, wartość: id lub EMPTY dla wszystkich
    6. S-KAT-BY-ID-CAROUSEL, wartość: id lub EMPTY dla wszystkich
    7. GALLERY-BY-ID, wartość: nev (najnowsze zdjęcia dodane do wszystkich galerii)
    8. GALLERY-BY-ID-CAROUSEL, wartość: nev (najnowsze zdjęcia dodane do wszystkich galerii)

    3. limit - ile danych pobrać?

    4. limit-row - ile danych w rzędzie?

    5. opcje - dodatkowe parametry. Jeśli brak lub domyślne, ustaw EMPTY

    1. BLOG-BY-ID, orientacja wpisu: w (poziomy) lub h (pionowy, kwadracik)
    2. BLOG-BY-CAT, orientacja wpisu: w (poziomy) lub h (pionowy, kwadracik). Wyświetlam najnowsze wpisy, a jeśli umieszczono w artykule to połowę nowszych, połowę starszych
    3. S-PRODUKTY-CAROUSEL, sortowanie: idDesc, idAsc, priceDesc, priceAsc, EMPTY (brak), NAJCZESCIEJOGLADANE (najczęściej oglądane), OSTATNIOOGLADANE (ostatnio oglądane - ogólnie), NAJCZESCIEJKUPOWANE (najczęsciej kupowane wg zamówień)
    4. S-KAT-BY-ID, sortowanie: idDesc, idAsc, numberDesc
    5. S-KAT-BY-ID-CAROUSEL, sortowanie: idDesc, idAsc, numberDesc
    6. S-PRODUKTY-BY-CAT-CAROUSEL, sortowanie: PROMOWANY, PROMOCJA (ptaszek Promocja), BESTSELLER, idDesc, idAsc, priceDesc, priceAsc, EMPTY (brak), NAJCZESCIEJOGLADANE (najczęściej oglądane), OSTATNIOOGLADANE (ostatnio oglądane - ogólnie), NAJCZESCIEJKUPOWANE (najczęsciej kupowane wg zamówień)
    7. COUNT-TO-DATE, np.: 2024-05-05 12:30:00;Czas minął:
      0 dni 0 godzin 0 minut 0 sekund

    Przykłady:

    1. [ ADDON_FAQ_226_1_1_EMPTY ] - FAQ
    2. [ ADDON_BLOG-BY-CAT_237_4_4_h ] - Blog
    3. [ ADDON_GALLERY-BY-ID_NEV_4_4_w ] - najnowsze zdjęcia z galerii, zwróci tyle rekordów w tylu rzędach, ile ustawiono domyślnie
    4. [ ADDON_GALLERY-BY-ID_4_16_4_EMPTY ] - Zdjęcia z galerii o ID 4, zwróci 16 zdjęć po 4 w rzędzie
    5. [ ADDON_PAGES-BY-ID_1-2_1_1_EMPTY ] - Zakładka o ID 1 i 2, zwróci po 1 zakładce
    6. [ ADDON_PAGES-BY-GLOWNA_1_1_1_EMPTY ] - Zakładki, których główna to ID
    7. [ ADDON_NUMBERS-ANIMATION_1_4_4_EMPTY ] - id zakładki nadrzędnej, pobieram 4 rekordy
    8. [ ADDON_S-PRODUKTY-BY-CAT-CAROUSEL_26_8_4_EMPTY ] - produkty z danej kategorii, 26 - id kategorii, 8 produktów, 4 widoczne

Ikonka

około 50 tyś km

przejechanych każdego miesiąca

Ikonka

około 110 tyś ton

przewozimy każdego miesiąca

Ikonka

tylko 24 gramy CO2

emitowane na przejechany kilometr za każdą tonę

Ikonka

tylko 137 gram CO2

emitowanych na przejechany kilometr za każdą tonę

Standardowa tabela

Główna tabela, po 50% szerokości komórek. Użyj klasy class="table_div"

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Tabela z ramką po lewej

Dodaj klasę border-first. Aby odwrócić kolejność na telefonie, dodaj klasę rev-mobile

Tabela z ramką

Dodaj klasę border-last.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Lewa węższa, prawa szersza

Tabela z dodatkową klasą w30-70

Pierwsza komórka ma 30%, druga 70% szerokości. Przydaje się, gdy zdjęcie jest małe, a tekstu więcej.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Animowana tabela

Dodaj do < td (lub table) data-aos="fade-up" > aby dodać animację. Użyj też zamiast fade-up:

Tabela na sam tekst

Dodaj klasę x1. Aby tabela była wąska (około 650px) dodaj klasę small.

Pamiętaj, że klasy możesz swobodnie łączyć. Warto też dodawać animacje data-aos="fade-up" do tabeli (table), komórek (td), zdjęć (img) czy innych elementów (np. a w ostatniej linii).

1920x600?text=Zdj%C4%99cie+o+wymiarach+1920x600

Zdjęcie z tłem

Tabela: dwa wiersze, jedna kolumna.

Wiersz z dołu z tekstem nakłada się na zdjęcie u góry. IMG w pierwszej komórce musi być w div nie p

Jeśli cała komórka ma być linkiem, umieść link w td > div > a

Możesz też użyć .center lub .center-x do wyrównania tekstu na zdjęciu.

Użyłem też mm100p aby rozciągnąć tło na całą szerokość ekranu.

300x300?text=Zdj%C4%99cie+o+wymiarach+300x300

Wklej tabelę...

... do komórki w innej tabeli. W ten sposób możesz dowolnie zagnieżdżac dowolne tabele. Ta tabela ma klasę rev i w30-70.

Ta tabela ma też data-aos="fade-right"

300x300?text=Zdj%C4%99cie+o+wymiarach+300x300

Pamiętaj!

Tabele możesz łączyć.

Dodaj kod jednej tabeli do innej tabeli i twórz własne twory. Np. tutaj dodałem tabelę z klasą w30-70.

Ta tabela ma też data-aos="fade-right"

300x300?text=Zdj%C4%99cie+o+wymiarach+300x300

A tutaj klasycznie

Tabela w tabeli, bez żadnych dodatkowych klas.

300x300?text=Zdj%C4%99cie+o+wymiarach+300x300

A tutaj klasycznie

Tabela w tabeli, bez żadnych dodatkowych klas.

Tabela z 3 komórkami lub więcej

Dodaj klasę x3 lub x4 lub x5

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Przykład nagłówka 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Przykład nagłówka 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Przykład nagłówka 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Nagłówek 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Nagłówek 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Nagłówek 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Nagłówek 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Nagłówek 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Nagłówek 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Nagłówek 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Nagłówek 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

600x300?text=Zdj%C4%99cie+o+wymiarach+600x300

Nagłówek 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

Tabelka z cennikiem

Poniższa tabela ma klasę price-list. Na potrzeby tego przykładu podpiąłem ją pod tabelę table_main x3, ale można wykorzystywać w innych konfiguracjach.

Tabelka z cennikiem nie mieści się na respo? Daj ją w div style="overflow:hidden-x;min-width:900px;" - zamiast 900px wpisz optymalną szerokość

W niej znajduje się kolejna tabela z klasą price-list-details

Pakiet bieda

Ilość projektów 3
Lorem ipsum xd
Lorem lorem 33
Lorem lorem 2

Cena: 14900
(cena brutto)

Pakiet bieda

Ilość projektów 3
Lorem ipsum xd
Lorem lorem 33
Lorem lorem 2

Cena: 14900
(cena brutto)

Pakiet bieda

Ilość projektów 3
Lorem ipsum xd
Lorem lorem 33
Lorem lorem 2

Cena: 14900
(cena brutto)

A oto kolejny przykład tabelki z cennikiem. Tym razem tabelka bez klasy table_main ale z samą klasą cennik.

Usługa (ta komórka ma klasę w50p) Opis usługi (w30p) Cena (w20p)
Sklep internetowy SZABLON dowiedz się więcej 850 zł
Sklep internetowy SZABLON PREMIUM 82 zł/m2
Sklep internetowy INDYWIDUALNY PROJEKT 68 zł/m2
Usuwanie graffiti z zabezpieczonej ściany i ponowne zabezpieczenie 60 zł/m2

A oto kolejny przykład tabelki z cennikiem. Tym razem tabelka bez klasy table_main ale z samą klasą cennik2.

Usługa (klasa w30p) Opis(klasa w40p border-left border-right) Cena (w20p) w10p
Sklep internetowy SZABLON Tutaj klasa border-left border-right 850 zł
Sklep internetowy SZABLON PREMIUM Tutaj klasa border-left border-right 82 zł/m2 Przykładowy link
Sklep internetowy INDYWIDUALNY PROJEKT Tutaj klasa border-left border-right 68 zł/m2
Usuwanie graffiti z zabezpieczonej ściany i ponowne zabezpieczenie Tutaj klasa border-left border-right 60 zł/m2 Przykładowy link

Możesz dowolnie edytować szerokość tabeli, dodając komórce td lub tabeli klasę jak niżej:

w10px = 10px w10p = 10 procent w20px = 20px w20p = 20 procent w30px = 30px w30p = 30 procent w40px = 40px w40p = 40 procent w50px = 50px w50p = 50 procent
w60px = 60px w60p = 60% w70px = 70px w70p = 70% w80px = 80px w80p = 80% w90px = 90px w90p = 90% w100px = 100px w100p = 100%
w150px = 150px w200px = 250px w250px = 250px w300px = 350px w350px = 350px w400px = 450px w450px = 450px w500px = 550px w550px = 550px
w600px = 650px w650px = 650px w700px = 750px w750px = 750px w800px = 850px w850px = 850px w900px = 950px w950px = 950px w1000px = 1000px

Możesz też użyć klasy mw100p dla 100% szerokości tabeli lub mw1000px, mw900px, mw800px, mw700px, mw600px dla okreśłonej szerokości w pikselach.

600x600?text=Zdj%C4%99cie+600x600px 600x800?text=Zdj%C4%99cie+600x800px

Ważne!

Zwróć uwagę, że na responsywności zostaje tylko jedno zdjęcie!
Zdjęcia powinny być w jednym kontenerze (np. < p >) nie oddzielone twardym enterem

Example H1

W tekście możesz korzystać z następujących styli CSS dodając je do akapitów, nałowków, divów i innych:

  • h1, .h1
  • h2, .h2
  • h3, .h3
  • h4, .h4
  • h5, .h5
  • h6, .h6
  • .subtitle1
  • .subtitle2
  • .body1
  • .body2
  • .button
  • .caption
  • .overline

Czytaj więcej

Czytaj więcej...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

Czytaj więcej...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

Example H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

Example H4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

Example H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

Example H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.

YouTube z linka

Tutaj film, który otwiera się w popupie po kliknięciu w link w tekście (lub obrazek) tak jak tutaj.
W tym celu dodaj w elemencie, który ma otwierać popup: class="yt_popup_on" data-video="https://www.youtube.com/embed/ZmOZUosziT8"

Film zamiast obrazka

Film na YouTube, otwierany po kliknięicu zdjęcia (szybsze ładowanie stron niż normalnie wklejony YT)

300x300?text=Zdj%C4%99cie+o+wymiarach+300x300

Film bezpośrednio na stronie (na samej górze, widoczny od razu)

Zamów rozmowę
Skontaktuj się z nami

Nasze biuro jest teraz zamknięte. Zostaw niżej swój numer telefonu, a oddzwonimy tak szybko jak to możliwe.

Jesteś 1 osobą, która uzupełniła dziś ten formularz.
Wyrażam zgodę na przetwarzanie moich danych osobowych w celu obsługi zapytania wysłanego przez formularz kontaktowy zgodnie z polityką prywatności.