Dziś wracam do Ciebie z kolejnym wpisem o DIVI. Chcę Ci pokazać, że nie jest on taki straszny jak się z nim zapozna. A po okresie zapoznawczym zobaczysz, żę stanie się twoim ulubionym edytorem stron na wordpressie.

Znam nawet ludzi, który nie zdają sobie sprawy, że używają właśnie DIVI i DIVI Buildera.

Chciałabym Ci zatem pokazać 3 najważniejsze elementy budowy strony przy pomocy tego motywu, czyli:  

  • wiersz,
  • sekcja
  • moduł.

Po kolei wyjaśnię Ci co jest co i jak te elementy oddziałowują na siebie.

 

Struktura strony zbudowanej na Divi

Niezależnie od wybranej formy edycji, gdyż musisz wiedzieć, że DIVI umożliwia Ci budowę strony:

  • w podglądzie siatkowym/szkieletowym, gdzie dokładnie widać jej strukturę, wiersze i kolumny,
  • w podglądzie graficznym/wizualnym, gdzie dokładnie widzisz jak całość od razu wygląda

to struktura stron budowanych na Divi jest zawsze identyczna. 

Elementy każdej strony mają swoja chierarchię. W pierwszej kolejności są to sekcje. W sekcjach są wiersze. Dopiero w nich zamieszczane są moduły.  Za chwileczkę opiszę Ci każdy z tych trzech elementów.

Stwórz samodzielnie ze mną stronę w DIVI

Jeśli:
🍀 nie radzisz sobie z motywem DIVI, 
🍀 potrzebujesz, by ktoś pokazał Ci gdzie, co i jak się ustawia
🍀 potrzebujesz pomocy teraz, bo inaczej eksplodujesz
🍀 chciałabyś przejść cały proces krok po kroku ze mną za rękę

Umów się na darmową 30 minutową konsultacje. To nic nie kosztuje, a dowiesz się w jaki sposób mogę Ci pomóc.

Sekcje

Są najbardziej podstawowymi i największymi „cegiełkami” stosowanymi do projektowania układów w Divi. Każda sekcja może pomieścić wiele wierszy i modułów. Jest ona również pierwszym elementem jaki dodaje się do nowej strrony. Bez niej dodanie tekstu czy obrazu, czy wstawienie formularza kontaktowego byłoby po prostu niemożliwe.

Generalnie sekcje służą do tworzenia dużych grup treści, np. całego modułu z zapisem na newsletter, czy całej części z formularzem kontaktowym. Rodzaj sekcji, którą wybieramy najczęściej zależy od jej szerokości na stronie internetowej.

Dodatkowo, by ułatwić edycję, szczególnie w podglądzie graficznym wprowadzono oznaczenia kolorystyczne. I tak:

  • sekcje standardowe oznaczone są kolorem niebieskim
  • sekcje pełnej szerokości (np. najczęściej spotykane banery na górze strony, które są od brzegu do przegu przeglądarki wypełnione grafiką) oznaczone kolorem fioletowym
  • oraz sekcje specjalne, oznaczone kolorem pomarańczowym.

Jakie są rodzaje sekcji?

  1. Podstawowa sekcja to sekcja standardowa, czyli ta oznaczana kolorem niebieskim.
  2. Sekcja pełnej szerokości z założenia ma zajmować pełną szerokość ekranu. Dostosowuje się ona do szerokości okna przeglądarki i zawsze wyświetla moduły w niej zawarte na pełną szerokość ekranu. Poza tym jest wyjątkowa z dwóch powodów:
    • Nie zawiera wierszy – w takiej sekcji od razu zamieszczamy moduły pełnej szerokości jeden pod drugim, bez podziału na wiersze. Polecam to rozwiązanie gdy chcesz mieć slider z dużym zdjęciem na całą szerokość strony.
    • Można w niej zamieścić tylko odpowiednie moduły pełnej szerokości. Nie zamieścimy tu typowych modułów jak w innych sekcjach i wierszach tylko specjalne moduły do tego dostosowane.
  3. Sekcja specjalna. Jest to dość „dziwna” sekcja która daje większe możliwości podziału strony. Głównie chodzi o zaawansowany układ paska bocznego. Jeśli Twoja strona ma zawierać pasek boczny i wiele modułów na tej samej wysokości to właśnie tej sekcji powinnas użyć.

Wiersze

Umieszcza się je wewnątrz sekcji. Każda sekcja może pomieścić dowolną liczbę wierszy, zawsze jeden pod drugim, a nie obok siebie. Jeśli chcemy umieścić dane obok siebie wybieramy odpowiedni podział wiersza, który dzieli się na kolumny. Jak zauważysz na powyższym zdjęciu istnieje wiele typów kolumn, bo aż 20 rodzajów, które wybierasz w zależności od swoich potrzeb.

Najczęściej szerokość wiersza określa się procentowo względem ekranu (gdyż nigdy nie wiemy na jakim urządzeniu użytkownik będzie korzystał z naszej strrony). Np. dzielimy wiersz na dwie równe kolumny, z których każda zajmuje 50% szerokości ekranu.

Po zdefiniowaniu struktury kolumn dla danego wiersza możesz umieścić moduły w odpowiedniej kolumnie.

Moduły

Moduły to konkretne elementy treści, które tworzą Twoją stronę. To one są widoczne dla internauty przeglądającego Twoją witrynę. Każdy moduł zmieści się i dostosuje do kolumny dowolnej szerokości.

I tak mamy dostepnych 47 róznego rodzajów modułów, które można dowolnie zamieszczać wewnątrz wierszy . Mamy dostępny więc moduły, nie wymieniam tu wszsytkich, tylko te, których używam najczęściej, takie jak: tekst, obraz, formularz kontaktowy, harmonijka, slajder, newsletter, mapa, notka, osoba, video, galeria.

Przeczytaj także:

2 miesiące SKILLSHARE PREMIUM za darmo

Szablon DIVI – prosty sposób na postawienie STRONY INTERNETOWEJ

Divi WordPress Theme

Moje POSTY możesz przeczytać także NA

zBLOGowani.pl