DNT Creator - Instrukcja Obsługi

Spis treści na blogu Oparty na sekcjach – jak działa układ oparty na sekcjach i po co się go stosuje Margines wewnętrzny (padding) – odstęp od krawędzi wewnątrz bloku Margines zewnętrzny (margin) – odstęp od innych bloków na stronie Tło – jak ustawić kolor lub grafikę w tle sekcji lub kolumny Kolumny – jak ustalić liczbę kolumn i wpływać na układ treści Klasy dodatkowe – jak użyć gotowych klas CSS do formatowania wyglądu border-radius-1rem – zaokrąglenie rogów bloku border-first – ozdobna ramka przy pierwszej kolumnie border-last – ramka przy ostatniej kolumnie Maksymalna szerokość – ograniczenie szerokości kolumny (np. do 600px) color-black (i inne) – zmiana koloru tekstu (czarny, biały, markowy itd.) center-y – wyrównanie treści w pionie (środek) center-x – wyrównanie treści w poziomie (środek) nav > p > a – zamiana zwykłego linku w stylizowany przycisk unset – rozciąga sekcję na całą szerokość strony nowrap – kolumny w sekcji nie przeskakują do nowej linii, jeśli się nie mieszczą (w trakcie przygotowania dokumentacji) w30-70 – lewa kolumna węższa (30%), prawa szersza (70%) w70-30 – prawa kolumna węższa (30%), lewa szersza (70%) rev-mobile – odwraca kolejność kolumn na urządzeniach mobilnych rev – odwraca kolejność kolumn na komputerach shadow – dodaje cień wokół kolumny img-block – zmienia położenie zdjęć tdsticky – a w nim element .sticky (w trakcie przygotowania dokumentacji) Id (do kotwic) – jak utworzyć kotwicę, do której można linkować z menu lub przycisku Animacja – jak dodać efekt wjazdu treści przy przewijaniu strony Ustawienia w kolumnach – jak każdą kolumnę dostosować osobno (tło, tekst, marginesy)

Spis treści na YouTubie: 0:00 Wstęp, ble ble ble 1:22 Sekcje i kolumny 3:20 Margines wewnętrzny (padding) 8:20 Margines zewnętrzny (margin) 17:10 Margines zewnętrzny AUTO (margin) 11:50 Tło 13:57 Klasy 14:13 border-radius-1rem – zaokrąglenie rogów bloku 14:41 shadow – dodaje cień wokół kolumny 15:12 border-first i border-last – ozdobna ramka 16:40 Maksymalna szerokość – ograniczenie szerokości kolumny (np. do 600px) 18:35 color-black (i inne) – zmiana koloru tekstu (czarny, biały, markowy itd.) 19:30 center-y i center-x - wyrównanie treści w pionie/poziomie 20:30 nav p a – zamiana zwykłego linku w stylizowany przycisk 22:08 unset – rozciąga sekcję na całą szerokość strony 22:38 w30-70 – lewa kolumna węższa (30%), prawa szersza (70%) 22:38 w70-30 – prawa kolumna węższa (30%), lewa szersza (70%) 23:20 rev-mobile – odwraca kolejność kolumn na urządzeniach mobilnych 23:20 rev – odwraca kolejność kolumn na komputerach 25:03 Id (do kotwic) – jak utworzyć kotwicę, do której można linkować z menu lub przycisku 26:22 Animacja – jak dodać efekt wjazdu treści przy przewijaniu strony

Ważne!

1. DNT Creator może powodować błedy podczas używania funkcji "Wstecz" w przeglądarce. Zawsze odświeżaj stronę przed edycją.

Oparty na sekcjach

DNT CREATOR działa w oparciu o sekcje. Każda sekcja to osobny blok, który możesz samodzielnie skonfigurować: ustawić tło, liczbę kolumn, animację, marginesy, klasę CSS, ID i inne parametry.

To właśnie sekcje pozwalają Ci stworzyć przejrzysty i logiczny układ strony lub opisu produktu.

• Możesz dodać dowolną liczbę sekcji.
• Każda sekcja może mieć inną liczbę kolumn (np. 1, 2, 3, 4 itd.).
• W każdej kolumnie znajduje się osobny edytor treści.

Jeśli chcesz dodać nową sekcję – kliknij przycisk „+ kolejna sekcja”.

Po dodaniu zobaczysz nowe pole, w którym możesz ustawić wszystkie parametry opisane w kolejnych częściach instrukcji.

Margines wewnętrzny (padding)

Padding to wewnętrzny margines – czyli odległość między zawartością (np. tekstem) a krawędzią bloku. Dzięki niemu treść ma więcej „oddechu” i nie przykleja się do brzegów.

Jak ustawić padding?

1. W polu „Padding” wpisz wartość, np.:
   • 1rem
   • 2rem 1rem
   • 3rem 2rem 1rem 2rem

Jak czytać wartości?

• "rem" to jedna z jednostek odległości. Możesz używać pełnych cyfr, np.  1rem, 5rem lub ich ułamków, np.: 0.5rem lub 1.95rem.
• 1rem – taka sama wartość z każdej strony
• 2rem 1rem – góra/dół 2rem, lewo/prawo 1rem
• 3rem 2rem 1rem 2rem – kolejno: góra, prawo, dół, lewo

Dlaczego warto używać paddingu?

• tekst nie dotyka ramki ani tła
• treść jest czytelniejsza
• wygląda to po prostu lepiej

Uwaga: jeśli pole zostawisz puste, system nie doda żadnych marginesów – treść może być „przyklejona” do brzegu sekcji lub kolumny.

Margines zewnętrzny (margin)

Margin to margines zewnętrzny, czyli odstęp od innych elementów na stronie. Używa się go, żeby oddzielić sekcję lub kolumnę od tego, co znajduje się przed i po niej.

Jak ustawić margin?

1. W polu „Margin” wpisz wartość, np.
   • 1rem
   • 2rem 1rem lub  2rem auto
   • 3rem 2rem 1rem 2rem

Co oznaczają wartości?

• "rem" to jedna z jednostek odległości. Możesz używać pełnych cyfr, np.  1rem, 5rem lub ich ułamków, np.: 0.5rem lub 1.95rem.
• 1rem – ten sam margines ze wszystkich stron
• 2rem 1rem – góra/dół: 2rem, lewo/prawo: 1rem
• 2rem auto - góra/dół 2 rem, a auto wypośrodkowuje element na osi X (prawo/lewo)
• 3rem 2rem 1rem 2rem – kolejno: góra, prawo, dół, lewo

Po co to ustawiać?

• żeby między sekcjami był widoczny odstęp
• żeby kolumna nie przylegała do innej
• żeby dodać „światło” między elementami na stronie

Uwaga: jeśli nie ustawisz marginu, sekcje mogą „skleić się” ze sobą – co nie zawsze wygląda dobrze, szczególnie na ciemnym tle.

Tło

Dla każdej sekcji (i każdej kolumny w danej sekcji) możesz ustawić tło. Dzięki temu łatwo oddzielisz wizualnie różne fragmenty strony lub opisów.

Do wyboru masz gotowe kolory tła, m.in.:

• Białe – klasyczne, neutralne
• Szare – od bardzo jasnego po bardzo ciemny
• Czarny – dla mocnych akcentów
• Główny kolor – zgodny z kolorystyką Twojej marki
• Alternatywny kolor główny

Jeśli chcesz, możesz też ustawić tło niestandardowe:

• Kolor HEX – np. #FF0000 (czerwony)
• Grafika w tle – wpisz adres URL do obrazka

Po wybraniu opcji „Własny kolor” lub „Zdjęcie” pojawi się dodatkowe pole do wpisania wartości.
Jeśli wgrasz własne zdjęcie w sekcji możesz użyć dodatkowych klas do jego ułożenia: fixed, cover, containt oraz dark (przyciemnia obraz).

Uwaga: tło możesz ustawić osobno dla całej sekcji i osobno dla każdej kolumny – jeśli chcesz, by różniły się między sobą.

Kolumny

W każdej sekcji możesz ustawić, ile ma mieć kolumn. Domyślnie dodawana jest jedna, ale możesz zmienić tę wartość na dowolną od 1 do 10.

Dzięki kolumnom możesz stworzyć np.:

• układ 2-kolumnowy: tekst + zdjęcie
• układ 3-kolumnowy: 3 krótkie opisy obok siebie
• układ 1-kolumnowy: pełna szerokość, np. dla nagłówka lub dużego zdjęcia

Aby zmienić liczbę kolumn:

1. Znajdź pole „Kolumn” w ustawieniach sekcji.
2. Wpisz liczbę od 1 do 10.
3. Nowe pola do edycji treści pojawią się automatycznie.

Uwaga: po zmianie liczby kolumn dotychczasowa zawartość może zostać usunięta, dlatego najlepiej ustawiać układ na początku, zanim zaczniesz pisać treść.

Klasy dodatkowe – co znaczą i do czego służą

W polu „Klasa” możesz wpisać jedną lub kilka gotowych klas, które zmienią wygląd danej sekcji lub kolumny. Poniżej lista najczęściej używanych i ich działanie:

border-radius-1rem

Zaokrągla rogi sekcji lub kolumny. Efekt? Treść wygląda delikatniej i bardziej nowocześnie. Działa np. przy boksach z kolorem tła.

border-first

Dodaje dekoracyjną ramkę do pierwszej kolumny w sekcji – efekt „pudełka” z obramowaniem. Sprawdzi się np. przy tytułach, wyróżnionych tekstach lub cytatach.

border-last

To samo co powyżej, ale ramka pojawi się przy ostatniej kolumnie w sekcji. Dzięki temu możesz uzyskać ciekawy układ z akcentem po jednej stronie.

Maksymalna szerokość

Ustawia maksymalną szerokość sekcji lub kolumny na 600 pikseli i automatycznie wyśrodkowuje ją. Idealne do krótkich tekstów, formularzy, CTA albo węższych boksów.

Dostępne wersje:

• mw400px – szerokość do 400px
• mw500px – szerokość do 500px
• mw600px – szerokość do 600px
• mw700px – szerokość do 700px
• mw800px – szerokość do 800px
• mw900px – szerokość do 900px
• mw1000px – szerokość do 1000px
• mw1100px – szerokość do 1100px
• mw1200px – szerokość do 1200px
• mw1300px – szerokość do 1300px
• mw1400px – szerokość do 1400px

color-black (i inne)

Zmienia kolor tekstu wewnątrz danego bloku. Przykładowe klasy kolorystyczne:

• color-black – czarny
• color-white – biały (np. na ciemnym tle)
• color-grey, color-grey-light, color-grey-lighter, color-grey-dark, color-grey-darker – odcienie szarości
• color-mark – główny kolor marki
• color-mark-light – jasna wersja głównego koloru marki
• color-mark-dark – ciemna wersjagłównego koloru marki
• color-red– kolor czerwony
• color-yellow – kolory żółty

Uwaga: ta klasa działa tylko na tekst – nie zmienia tła.

center-y

Wyrównuje treść w pionie (czyli „do środka” w osi góra-dół). Przydatne np. gdy jedna kolumna ma obrazek, a druga tekst – tekst wtedy ustawi się równo do środka względem obrazka.

center-x

Wyrównuje treść w poziomie – wszystkie kolumny ustawią się na środku sekcji. Działa najlepiej przy jednej lub dwóch kolumnach o mniejszej szerokości.

nav > p > a (link jako przycisk)

Jeśli wstawisz link wewnątrz akapitu w tagu nav, ten link automatycznie przyjmie wygląd przycisku:

• kolor tła: główny kolor marki
• tekst: biały
• zaokrąglone rogi
• po najechaniu zmienia się na ciemniejszy odcień

To świetny sposób na zrobienie przycisku „Zamów teraz”, „Czytaj więcej” itd. – bez kodowania.

unset

Jeśli ustawisz sekcję z klasą unset, jej zawartość zostanie rozciągnięta na całą szerokość strony – bez ograniczenia do maksymalnej szerokości (np. 1400px).

Jeśli w sekcji dodasz klasę unset i połączyć ją z klasą np. mw1000px, to klasa mw1000px będzie odnosiła się do całej sekcji. Jesli dodasz klasę mw1400px w sekcji, to będzie dotyczyła kolumn wewnątrz sekcji.

w30-70

Ustawia szerokość pierwszej kolumny na 30%, a drugiej na 70%. Sprawdzi się np. gdy po lewej masz małe zdjęcie lub ikonę, a po prawej dłuższy tekst.

w70-30

Ustawia szerokość pierwszej kolumny na 70%, a drugiej na 30% – odwrotność w30-70. Przydatne, gdy większa część treści ma być po lewej.

rev-mobile

Odwraca kolejność kolumn tylko na telefonie. Jeśli np. chcesz, żeby na desktopie był tekst obok zdjęcia, a na mobile zdjęcie na górze – użyj tej klasy.

rev

Odwraca kolejność kolumn na desktopie. Klasyczne zastosowanie: zdjęcie po lewej, tekst po prawej – zamienione miejscami.

shadow

Dodaje do kolumny cień – bardzo delikatny, ale wyraźnie oddzielający blok od tła. Dobrze wygląda przy jasnym tle i zaokrąglonych rogach.

img-block

Zdjęcia w tym elemencie mają style="display:block;" dzięki czemu znikają naokoło niego możliwe puste i niepotrzebne odstępy.

Id (do kotwic)

Pole „Id” służy do nadawania unikalnej nazwy dla sekcji lub kolumny. Dzięki temu możesz stworzyć tzw. kotwicę – czyli miejsce, do którego da się przewinąć stronę po kliknięciu linku.

Przykład użycia:

• Wpisz w polu ID np. kontakt
• Następnie gdzieś na stronie (np. w menu) utwórz link: Kontakt
• Po kliknięciu przeglądarka automatycznie przewinie do tej sekcji

Ważne zasady:

• ID musi być unikalne – nie powtarzaj tej samej nazwy w kilku miejscach
• Nie używaj spacji ani polskich znaków
• Możesz używać myślników, np. moja-sekcja

To świetne rozwiązanie, jeśli chcesz tworzyć:

• menu typu one-page (strony z przewijaniem do sekcji)
• przyciski „czytaj więcej” lub „skocz na kontakt”

Animacja

Każdej sekcji lub kolumnie możesz przypisać efekt animacji. Dzięki temu treść nie pojawia się od razu, tylko płynnie wjeżdża, np. z boku lub od dołu – co przyciąga uwagę i urozmaica stronę.

Aby dodać animację:

1. Wybierz opcję z listy „Animacja” w ustawieniach sekcji lub kolumny
2. Po zapisaniu i odświeżeniu strony animacja zadziała automatycznie

Dostępne animacje:

• fade-left – wjazd z lewej strony
• fade-right – z prawej strony
• fade-up – z dołu do góry
• flip-left, flip-right, flip-up – efekt „przewrotki”
• zoom-in – przybliżenie (zoom)

Uwaga: animacje włączają się tylko raz – przy pierwszym przewinięciu do danego fragmentu strony.

Nie przesadzaj z ich ilością – jedna, dwie animacje na stronie wystarczą, żeby było dynamicznie, ale nie przesadnie „efekciarsko”.

Ustawienia w kolumnach

W każdej sekcji możesz mieć od 1 do 10 kolumn. Każda z nich ma własne ustawienia – bardzo podobne do tych, które znasz już z poziomu całej sekcji.

Co możesz ustawić w każdej kolumnie?

• Tło – kolor lub własne tło (np. zdjęcie)
• Klasa – dodatkowe style (np. mw600px, border-first)
• Id – kotwica, do której można linkować
• Animacja – efekt wejścia (fade, flip, zoom itd.)
• Padding – margines wewnętrzny
• Margin – margines zewnętrzny

W każdej kolumnie znajdziesz także edytor treści (TinyMCE), w którym możesz:

• pisać teksty i nagłówki
• dodawać pogrubienia, listy, linki, obrazki
• wstawiać multimedia, tabele, ikonki
• wprowadzać wersje językowe (np. PL, EN)

Uwaga: jeśli masz więcej kolumn – każda z nich może wyglądać inaczej. Możesz więc mieć np. lewą kolumnę z tłem, prawą bez tła. Jedna z animacją, druga statyczna. To daje ogromną elastyczność w budowaniu układu strony.