fbpx

Divi – jak zacząć?

Z dzisiejszego artykułu dowiesz się jak tworzyć strony w Divi – a właściwie jak korzystać z buildera. Powiemy sobie jak wygląda struktura i do czego służą różne opcje. Dzięki temu po instalacji Divi będziesz mogła praktycznie od razu ruszać do budowania stron! To co, zaczynamy?

W filmie pokazuję Ci stworzenie strony od zera. Dlatego w pierwszej kolejności musisz wejść w menu WordPressa -> Strony -> Dodaj nową. Nadajemy sobie tytuł, a następnie przechodzimy do ustawień w prawej kolumnie. W sekcji Ustawienia stron Divi możemy sobie wybrać układ graficzny naszej strony – z paskiem bocznym po prawej/po lewej, lub bez paska bocznego. Po zapisaniu świeżo stworzonej strony wybranie tych ustawień już nie będzie możliwe, dlatego warto to zrobić teraz. Następnie – również w kolumnie po prawej – moemy przejść do sekcji Atrybuty strony i z listy rozwijanej Szablon możemy wybrać szablon strony. Jeśli strona, którą właśnie tworzymy to landing – wybieramy szablon Blank Page. Dzięki temu ze strony lądowania zniknie nagłówek i stopka, a użytkownicy, którzy na nią wejdą, nie będą kuszeni wychodzeniem na zewnątrz.

Następnie możemy sobie zapisać tę stronę jako szkic lub opublikować, a potem kliknąć przycisk Użyj generatora Divi. Po kliknięciu przycisku zostajemy przekierowane do buildera.

 

Krok pierwszy – wybranie układu

Za każdym razem gdy wchodzimy do buildera w Divi – niezależnie od tego czy to edytor wizualny, czy edytor na zapleczu – a strona jest bez treści, zostajemy poproszone o wybór układu. Chyba że ustawimy domyślny wybór, ale o tym mówiłam więcej w kursie „Zrób to sama w Divi!„.

Do wyboru mamy jeden z trzech układów:

  • buduj od zera – w tym układzie zostajemy przekierowane na czystą stronę, na której możemy budować swoją stronę od zera,
  • wybierz układ – klikając na tę opcję, możesz wybrać jeden z szablonów stworzonych przez Elegant Themes (czyli twórcy Divi),
  • klon istniejąca strona – ta opcja pozwala nam na skopiowanie podstrony, która już jest na naszej stronie (i jest zrobiona w Divi!).

Dla tego przykładu wybieramy układ buduj od zera, ale jeśli czujesz taką potrzebę – możesz wybrać inną opcję 😉

 

Krok drugi – przełączenie się na edytor wizualny

Oczywiście – możemy tworzyć swoją stronę tylko z widokiem zapleczowym, ale ja zdecydowanie wolę korzystać z edytora wizualnego. Dzięki temu widzę na bieżąco zmiany, które wprowadzam. Nie muszę klikać Zapisz, a następnie włączać podglądu strony.

W edytor wizualny możemy wejść na dwa sposoby:

  • wejść na stronę od zaplecza i kliknąć Build On The Front End (tylko wtedy ponownie trzeba będzie wybrać układ),
  • wejść na stronę, którą chcemy przeedytować (normalnie, po linku) i kliknąć Włącz kreator graficzny na górnym, czarym pasku.

Jak już w końcu dostaniemy się do edytora, możemy przejść do edycji naszej strony.

Podział strony w Divi

Zanim zaczniemy prace w naszym edytorze, musimy wiedzieć jak struktura strony tworzonej w Divi wygląda. Dlatego omówimy sobie po kolei każdą z nich:

Sekcja

Sekcja, to bloczek, do którego dodajemy kolejne elementy strony. Na sekcji możesz zrobić całą stronę, ale możesz też podzielić stronę na kilka sekcji. Ja lubię sobie dzielić stronę na pojedyncze sekcje – każda odpowiada za inny zakres tematyczny (np. nagłówek, cennik itp.) lub ma inny wygląd (np. tło). W związku z tym, że sekcje można kopiować między stronami – warto na nie popatrzeć jak na elementy zawierające jakieś konkretne informacje. Sekcji są trzy rodzaje:

  • regularny – jest to sekcja z marginesami po lewej i po prawej stronie – dzięki temu treść nie rozciąga się na całą szerokość strony,
  • specjalność – ten rodzaj sekcji sprawia, że możemy podzielić fragment strony na bardziej fantazyjny układ. Nie korzystam z niej za często, ale czasem się przydaje,
  • pełna szerokość – z tego układu sekcji korzystam bardzo rzadko. Sekcja o pełnej szerokości rozciąga się na całą szerokość ekranu, ale można do niej dodać tylko jeden element. Wybór tych elementów jest bardzo ograniczony. Tak naprawdę ten rodzaj sekcji nadaje się głównie do tytułów stron czy wpisów, a także sliderów. Jeśli chcemy wrzucić na stronę element, którego nie ma w sekcji pełna szerokość, możemy wybrać sekcję regularną i w ustawieniach wiersza Design -> Wymiarowanie ustawić szerokość wiersza na pełny ekran.

 

Wiersz

Wiersz to podelement sekcji. Co oznacza, że do sekcji dodajemy wiersz, a następnie moduły (o których za chwilę). Wiersz nie ma możliwości funkcjonować jako osobny element, tak samo moduł. Dodajemy je zawsze w kolejności sekcja -> wiersz -> moduł (z wyjątkiem sekcji pełna szerokość, w której pomijamy etap wiersza).

Wiersz pomaga nam podzielić sekcję strony na kolumny – dzięki temu możemy umieścić np. dwa lub trzy elementy obok siebie na stronie. Przy dodawaniu wiersza możemy wybrać na ile kolumn chcemy go podzielić. Możemy też w każdej chwili tę ilość kolumn zmienić – klikając na odpowiednią ikonę (spis ikon również znajdziesz w dalszej części artykułu).

 

Moduł

Do każdej kolumny w każdym wierszu możemy dodać jakiś moduł. Modułów do wyboru jest dużo i każdy odpowiada za inną funkcję. Nie będę tu opisywać wszystkich modułów, ponieważ zrobiłam to w kursie „Zrób to sama w Divi!„, ale wymienię najczęściej wykorzystywane/najciekawsze:

  • tekst – w tym module mamy klasyczny edytor tekstowy, w którym możemy tworzyć treści. Nie jest to jednak edytor WordPressa, w związku z czym nie ma w nim wszystkich funkcji dodawanych przez wtyczki,
  • obraz,
  • przycisk,
  • notka – to moduł, w którym możemy dodać jednocześnie tekst i obraz/ikonę. Ikonę/obraz możemy umieścić nad tekstem lub z jego lewej strony. W Divi nie ma możliwości dodania ikony samodzielnie – tylko w tym module,
  • formularz kontaktowy,
  • formularz zapisu na newsletter – w Divi można stworzyć formularz zapisu na newsletter, zintegrowany z dowolnym dostawcą newslettera. O tym jak go skonfigurować mówiłam w tym artykule (na przykładzie MailerLite).

 

Ikony, czyli gdzie klikać?

Divi to dosyć intuicyjny system, ale część rzeczy wykonuje się przy pomocy ikon. Ikony nie zawsze są czytelne, na dodatek – jak nie wiadomo gdzie klikać, to lepiej nie klikać. Dlatego w tym wpisie powiem Ci do czego służą pojedyncze ikony w builderze – te dostępne przy sekcjach, wierszach i modułach. Lista poniżej:

P

ikona służąca do dodawania elementów

Po kliknięciu ikony możemy dodać jakiś element – sekcję, moduł lub wiersz. Kolor ikony jest uzależniony od koloru elementu – niebieski/fioletowy/pomarańczowy dla sekcji, zielony dla wiersza, szary dla modułu i jaskrawozielony dla elementu globalnego.

1

ikona służąca do przesuwania elementów

Po kliknięciu, przytrzymaniu i przeciągnięciu ikony, możemy przesunąć sekcję, wiersz lub moduł w inne miejsce.

ikona ustawień

Po kliknięciu tej ikony wchodzimy w ustawienia zawartości i wyglądu elementu – czyli sekcji, modułu lub wiersza (w zależności od tego przy którym elemencie klikniemy)

ikona duplikowania

Klikając na tę ikonę, możesz zduplikować element – dzięki czemu zostanie on skopiowany i drugi taki sam zostanie wklejony pod elementem duplikowanym.

ikona zmiany układu kolumn

Ta ikona jest dostępna tylko przy wierszach – dzięki niej możemy zmienić układ kolumn w wierszu.

ikona zapisywania w bibliotece

Dzięki tej ikonie możemy zapisać dany element w bibliotece i wykorzystać na innej podstronie.

ikona kosza

Ta ikona pozwala nam usunąć element ze strony.

M

ikona odznaczenia

Ponieważ ikony w Divi wyświetlają się po kliknięciu konkretnej sekcji – możemy tę sekcję odznaczyć, klikając na ikonę odznaczenia.

ikona dodatkowych opcji

Kliknięcie tej ikony pokazuje nam menu dodatkowych opcji elementu:

  • zapisz w bibliotece – ta opcja pozwala nam zapisać element i wykorzystać go na innej podstronie,
  • test A/B – ta opcja uruchamia testy A/B,
  • wyłączyć – ta opcja wyłącza widoczność elementu na stronie (choć wciąż jest widoczny w builderze),
  • zamek – tu blokujemy możliwość edycji elementu,
  • kopia – tu możemy skopiować element (i wkleić w innym miejscu),
  • kopia style – tu możemy skopiować style elementu (i wkleić w innym miejscu),
  • zresetuj style – tu resetujemy style elementu do wartości domyślnych,
  • wklej – tu wklejamy wcześniej skopiowany element,
  • wklej style – tu wklejamy wcześniej skopiowane style elementu,
  • zobacz zmodyfikowane style – klikając tę opcję, możemy podejrzeć jakie style zostały zmodyfikowane (od wartości domyślnych),
  • rozszerz styl – tu możemy rozszerzyć styl elementu na całą stronę/sekcję/wiersz,
  • ustaw style jako domyślne – tego nie klikaj! Kliknięcie na tę opcję ustawia styl wszystkich takich elementów na stronie na takie, jak w wybranym elemencie – ponieważ wartości danego elementu zmieniają domyślnie przypisane wartości,
  • zmodyfikuj wartości domyślne – tu możemy zmodyfikować wartości domyślne elementu.

Ustawienia elementu

Jak możesz zobaczyć wyżej, dla każdego elementu – takiego jak sekcja, wiersz czy moduł – możemy otworzyć okno opcji. Składa się ono z kilku zakładek.

Zawartość

W tej zakładce możemy ustawić zawartość pojedynczego elementu. To okno ma kilka wspólnych opcji dla każdego z nich:

  • link – tu możemy ustawić link dla całego elementu. Dzięki temu, po kliknięciu na sekcję, wiersz lub moduł, możemy przekierować użytkowników na inną stronę,
  • tło – tu możemy ustawić tło danego elementu,
  • etykieta robocza – tu możemy zmienić nazwę swojego elementu, widoczną w builderze.

 

Design

W tej zakładce możemy ustawić wygląd elementu. Tu również znajduje się kilka elementów wspólnych dla każdego z nich:

  • wymiarowanie – możemy tu zmienić wysokość i szerokość naszego elementu,
  • rozstaw – tu ustawiamy marginesy i wypełnienia. Czym one się różnią?
    • margines – to odstęp na zewnątrz naszego elementu. Jeśli odsuniemy od siebie dwa elementy marginesami, a pod nimi znajduje się tło, to tło będzie widoczne po odsunięciu,
    • wypełnienie – to odstęp wewnątrz naszego elementu. Jeśli odsuniemy od siebie elementy wypełnieniem, a w jego środku znajduje się tło, to tło będzie zajmowało więcej miejsca tam, gdzie ustawiliśmy większe wypełnienie. Mam nadzieję, że dobrze to wytłumaczyłam 😉
  • obramowanie – tu możemy ustawiać obramowania elementu,
  • box shadow – tu ustawiamy cień elementu,
  • filtr – tu możemy filtrować kolory naszego elementu,
  • przekształcać – tu możemy przekształcić nasz element, czyli np. obrócić, wyskalować czy przesunąć,
  • animacja – tu możemy ustawić animacje naszego elementu, dzięki którym nasza strona będzie bardziej dynamiczna.

 

Zaawansowane

W tej zakładce możemy ustawić opcje zaawansowane elementu:

  • identyfikator i klasy CSS – tu możemy nadać identyfikator i klasę elementu, żeby móc ustawiać jego wygląd w CSS,
  • niestandardowe CSS – tu możemy wpisać kody CSS dla konkretnego elementu,
  • widoczność – tu możemy wyłączyć widoczność elementów na konkretnych urządzeniach: tablecie, telefonie i/lub komputerze,
  • stanowisko – tu możemy ustawić pozycję elementu na absolute/relative/fixed.

 

Dodatkowo – w każdym ustawieniu, jeśli najedziemy na jego nazwę i pojawi nam się ikona telefonu, możemy zmieniać to ustawienie w zależności od urządzenia, z jakiego korzysta użytkownik. Czyli – na przykład – jeśli chcemy zmienić wielkość fontu w zależności od urządzenia, to klikamy na ikonę telefonu i wyświetli nam się możliwość ustawienia wielkości fontu dla telefonu/tableta/komputera.

 

Biblioteka szablonów

Tak jak pisałam wcześniej przy ikonach – każdy element można zapisać w bibliotece szablonów, klikając na odpowiednią ikonę. Po jej kliknięciu wyskoczy nam okno Dodaj do biblioteki. W oknie Nazwa układu możemy wpisać nazwę, po której rozpoznamy ten element. Jeśli zaznaczymy opcję Dodaj ten element jako globalny, a następnie dodamy ten element z biblioteki na innej podstronie, to każda zmiana elementu w jednym miejscu, powoduje zmianę elementu globalnego na całej stronie.

Element dodany do biblioteki możemy potem dodać na jakiejkolwiek innej podstronie. Zawsze jest to element do elementu, czyli sekcję dodajemy klikając na dodawanie sekcji, wiersz klikając na dodawanie wiersza itd. Służy do tego plusik, którego używamy normalnie do dodawania elementu, ale zamiast wybierać go z listy – przełączamy się na kartę Dodaj z biblioteki i wybieramy z listy naszych zapisanych elementów.

 

W tym wpisie to wszystko. Znasz już absolutne podstawy podstaw poruszania się w Divi. Możesz teraz ruszać do tworzenia swojej strony!

A jeśli czujesz jeszcze głód wiedzy – zapraszam Cię serdecznie do dołączenia do kursu „Zrób to sama w Divi!„. Tak kompleksowo omówiłam zasady korzystania z Divi, podzieliłam się też swoim kilkuletnim doświadczeniem z pracy nad stronami na Divi i zdradziłam kilka tricków 😉 Więcej o kursie możesz dowiedzieć się tutaj.