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:
- FAQ
- BLOG-BY-ID - wpisy z bloga po ID
- BLOG-BY-CAT - wpisy z bloga z wybranych kategorii
- S-PRODUKTY-BY-ID - produkty ze sklepu po ID
- S-PRODUKTY-BY-CAT - produkty ze sklepu w kategorii
- S-PRODUKTY-CAROUSEL - produkty ze sklepu z wybranych kategorii
- S-PRODUKTY-BY-CAT-CAROUSEL - produkty ze sklepu z wybranych kategorii
- S-KAT-BY-ID - kategorie ze sklepu po ID
- S-KAT-BY-ID-CAROUSEL - kategorie ze sklepu po ID
- GALLERY-BY-ID - zdjęcia z galerii o ID
- GALLERY-BY-ID-CAROUSEL - zdjęcia z galerii o ID, przewijane
- PAGES-BY-ID - treści z zakładek, wg kolejności wpisanych ID
- PAGES-BY-GLOWNA - treści z zakładek podrzędnych do ID, wg numeracji
- 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;
- 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:
- FAQ, wartość: id zakładki nadrzędnej
- BLOG-BY-ID, wartość: nev (dla najnowszych)
- S-PRODUKTY-BY-ID, wartość: nev (dla najnowszych)
- 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)
- S-KAT-BY-ID, wartość: id lub EMPTY dla wszystkich
- S-KAT-BY-ID-CAROUSEL, wartość: id lub EMPTY dla wszystkich
- GALLERY-BY-ID, wartość: nev (najnowsze zdjęcia dodane do wszystkich galerii)
- 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
- BLOG-BY-ID, orientacja wpisu: w (poziomy) lub h (pionowy, kwadracik)
- 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
- 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ń)
- S-KAT-BY-ID, sortowanie: idDesc, idAsc, numberDesc
- S-KAT-BY-ID-CAROUSEL, sortowanie: idDesc, idAsc, numberDesc
- 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ń)
- COUNT-TO-DATE, np.: 2024-05-05 12:30:00;Czas minął: 0 dni 0 godzin 0 minut 0 sekund
Przykłady:
- [ ADDON_FAQ_226_1_1_EMPTY ] - FAQ
- [ ADDON_BLOG-BY-CAT_237_4_4_h ] - Blog
- [ 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
- [ ADDON_GALLERY-BY-ID_4_16_4_EMPTY ] - Zdjęcia z galerii o ID 4, zwróci 16 zdjęć po 4 w rzędzie
- [ ADDON_PAGES-BY-ID_1-2_1_1_EMPTY ] - Zakładka o ID 1 i 2, zwróci po 1 zakładce
- [ ADDON_PAGES-BY-GLOWNA_1_1_1_EMPTY ] - Zakładki, których główna to ID
- [ ADDON_NUMBERS-ANIMATION_1_4_4_EMPTY ] - id zakładki nadrzędnej, pobieram 4 rekordy
- [ ADDON_S-PRODUKTY-BY-CAT-CAROUSEL_26_8_4_EMPTY ] - produkty z danej kategorii, 26 - id kategorii, 8 produktów, 4 widoczne
Ikonka
przejechanych każdego miesiąca
Ikonka
przewozimy każdego miesiąca
Ikonka
emitowane na przejechany kilometr za każdą tonę
Ikonka
emitowanych na przejechany kilometr za każdą tonę
Standardowa tabelaGłówna tabela, po 50% szerokości komórek. Użyj klasy class="table_div" |
Tabela z ramką po lewejDodaj klasę border-first. Aby odwrócić kolejność na telefonie, dodaj klasę rev-mobile |
Tabela z ramkąDodaj klasę border-last. |
Lewa węższa, prawa szerszaTabela 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. |
Animowana tabelaDodaj do < td (lub table) data-aos="fade-up" > aby dodać animację. Użyj też zamiast fade-up:
|
Tabela na sam tekstDodaj 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). |
|
|
|
|
|
Tabela z 3 komórkami lub więcej
Dodaj klasę x3 lub x4 lub x5
Przykład nagłówka 5Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. | Przykład nagłówka 5Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. | Przykład nagłówka 5Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. |
Nagłówek 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. | Nagłówek 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. | Nagłówek 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. | Nagłówek 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. |
Nagłówek 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. | Nagłówek 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. | Nagłówek 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. | Nagłówek 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab. | Nagłówek 6Lorem 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
Cena: 14900 zł | Pakiet bieda
Cena: 14900 zł | Pakiet bieda
Cena: 14900 zł |
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.
Ważne!Zwróć uwagę, że na responsywności zostaje tylko jedno zdjęcie! | Example H1W tekście możesz korzystać z następujących styli CSS dodając je do akapitów, nałowków, divów i innych:
Czytaj więcejCzytaj 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 H3Lorem 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 H4Lorem 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 H5Lorem 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 H6Lorem 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 linkaTutaj film, który otwiera się w popupie po kliknięciu w link w tekście (lub obrazek) tak jak tutaj. Film zamiast obrazkaFilm na YouTube, otwierany po kliknięicu zdjęcia (szybsze ładowanie stron niż normalnie wklejony YT) Film bezpośrednio na stronie (na samej górze, widoczny od razu) |