5 przykładów układów sekcji w stylu redakcyjnym utworzonych w Divi

Nowe opcje Divi oferują mnóstwo możliwości. Moduły, wiersze i kolumny bardziej niż kiedykolwiek wspierają się nawzajem na drodze do oszałamiającego i przyjaznego dla użytkownika projektowania stron internetowych. Jedną z rzeczy, które może zrobić, jest tworzenie niezwykłych sekcji w stylu redakcyjnym. I dokładnie to pokażemy w tym poście; 5 różnych układów sekcji w stylu redakcyjnym, których można używać w różnych witrynach internetowych. Najlepsza część? Post jest tworzony przy użyciu odpowiednich ustawień tylko dla każdego modułu, wiersza i kolumny.

Rzućmy okiem na pięć przykładów, które pokażemy, jak tworzyć.

Pierwszy przykład

Pulpit

mobilny

Drugi przykład

Pulpit

mobilny

Trzeci przykład

Pulpit

mobilny

Czwarty przykład

Pulpit

mobilny

Piąty przykład

Pulpit

mobilny

5 przykładów układów sekcji w stylu redakcyjnym utworzonych w Divi

Subskrybuj nasz kanał YouTube

Zacznij tworzyć pierwszy przykład

Zacznijmy od stworzenia naszego pierwszego układu w stylu edytora.

Dodaj nową sekcję

Dodaj nową stronę, włącz Divi Builder i przełącz się na Visual Builder. Po przejściu do programu Visual Builder dodaj sekcję standardową.

Dodaj wiersz z trzema kolumnami

W tej sekcji standardowej będziemy potrzebować wiersza z trzema kolumnami.

Tło gradientowe

Otwórz ustawienia wiersza i dodaj do niego następujące tło gradientowe:

• Pierwszy kolor: #636363
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 0%
• Pozycja końcowa: 47%

Kolor tła kolumny 2

Musimy również ustawić „#d8d8d8” jako kolor tła kolumny 2.

Rozmiary

Przejdź do karty Projekt i użyj następujących ustawień dla podkategorii Rozmiar:

• Użyj niestandardowej szerokości: Tak
• Szerokość niestandardowa: 100%
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Otwórz podkategorię Odstępy i dodaj „50px” do dopełnienia górnej, prawej, dolnej i lewej kolumny drugiej kolumny.

Moduł obrazu pierwszej kolumny

Tło gradientowe

Dodaj obraz do pierwszej kolumny wiersza i użyj dla niego następującego tła gradientowego:

• Pierwszy kolor: rgba (255,255,255,0)
• Drugi kolor: #086191
• Typ gradientu: liniowy
• Kierunek gradientu: 107 stopni
• Pozycja startowa: 60%
• Pozycja końcowa: 60%

Wyrównanie

Przejdź do zakładki Projekt, użyj lewego wyrównania obrazu i włącz opcję „Zawsze wyśrodkuj obraz na urządzeniu mobilnym”.

Rozstaw

Następnie otwórz podkategorię Odstępy i użyj następujących ustawień marginesów i dopełnienia:

• Margines górny: 100px (komputer), 0px (tablet i telefon)
• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Moduł tekstowy drugiej kolumny

Ustawienia tekstu

Następnie dodaj moduł tekstowy do drugiej kolumny wiersza. Przejdź do zakładki Projekt i użyj następujących ustawień dla podkategorii Tekst:

• Rozmiar czcionki tekstu: 12px
• Kolor tekstu: #000000
• Orientacja tekstu: Środek

Rozmiary

Otwórz podkategorię Sizing, użyj szerokości „84%” i wybierz centralne ustawienie modułu.

Rozstaw

Na koniec dodaj „50px” do górnego i dolnego marginesu.

Moduł obrazu trzeciej kolumny

Tło gradientowe

Dodaj kolejny moduł obrazu do trzeciej kolumny i użyj następującego tła gradientowego:

• Pierwszy kolor: #a36100
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: liniowy
• Kierunek gradientu: 73deg
• Pozycja startowa: 40%
• Pozycja końcowa: 40%

Wyrównanie

Przejdź do zakładki Projekt, wybierz lewe wyrównanie obrazu i włącz opcję „Zawsze wyśrodkuj obraz na urządzeniu mobilnym”.

Rozstaw

Na koniec dodaj następujący niestandardowy margines i dopełnienie:

• Margines górny: 300px (komputer), 0px (tablet i telefon)
• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Wynik

Przyjrzyjmy się jeszcze raz wynikowi na komputerze:

A na telefonie komórkowym:

Zacznij tworzyć drugi przykład

Drugi przykład wygląda tak na komputerze:

Dodaj nową sekcję

Najpierw dodaj nową sekcję standardową.

Dodaj wiersz z dwiema kolumnami

Następnie dodaj do niego dwukolumnowy wiersz.

Kolor tła kolumny 2

Otwórz ustawienia wiersza i dodaj „#ededed” jako kolor tła kolumny 2.

Rozmiary

Przejdź do karty Projekt i wprowadź następujące zmiany w podkategorii Rozmiar:

• Użyj niestandardowej szerokości: Tak
• Szerokość niestandardowa: 100%
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Moduł obrazu pierwszej kolumny

Wyrównanie

Dodaj moduł obrazu do pierwszej kolumny, użyj lewego wyrównania obrazu i włącz opcję „Zawsze wyśrodkuj obraz na urządzeniu mobilnym”.

Rozstaw

Otwórz podkategorię Odstępy i użyj następujących ustawień:

• Margines górny: 100px (komputer), 0px (tablet i telefon)
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Moduł tekstowy drugiej kolumny

Ustawienia tekstu

Następnie dodaj moduł tekstowy do drugiej kolumny i zastosuj następujące ustawienia do podkategorii Tekst:

• Czcionka tekstu: Lato
• Rozmiar czcionki tekstu: 12px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 2,2 em
• Orientacja tekstu: Środek

Rozmiary

Otwórz podkategorię Rozmiar i zastosuj szerokość '75%'.

Rozstaw

Na koniec upewnij się, że następujące ustawienia dotyczą podkategorii Odstępy:

• Margines górny: 120px (komputer stacjonarny), -80 (tablet i telefon)
• Lewy margines: -240px (komputer), 80 (tablet), 45 (telefon)
• Wypełnienie górne, prawe, dolne i lewe: 50px (komputer i tablet), 20px (telefon)

Wynik

Gdy to zrobisz, na pulpicie zobaczysz następujący projekt:

A na telefonie komórkowym:

Zacznij tworzyć trzeci przykład

Dalej mamy następujący przykład, który wygląda tak:

Dodaj nową sekcję

Jeszcze raz dodaj nową sekcję standardową.

Dodaj wiersz z dwiema kolumnami

Struktura kolumn, której będziemy potrzebować w tym wierszu, jest następująca:

Kolor tła kolumny 1

Otwórz ustawienia wiersza i użyj „#e8e8e8” jako koloru tła kolumny 1.

Kolumna 2 Tło gradientowe

Wymagane tło gradientowe dla drugiej kolumny jest następujące:

• Pierwszy kolor: #e8e8e8
• Drugi kolor: rgba (255,255,255,0)
• Kolumna 2 Typ gradientu: Liniowy
• Kolumna 2 Kierunek gradientu: 147 stopni
• Pozycja początkowa kolumny 2: 25%
• Kolumna 2 Pozycja końcowa: 9%

Rozmiary

Otwórz podkategorię Rozmiar i użyj następujących ustawień:

• Użyj niestandardowej szerokości: Tak
• Szerokość niestandardowa: 100%
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Na koniec dodaj „70px” do górnego i dolnego wypełnienia pierwszej kolumny.

Moduł obrazu pierwszej kolumny

Wyrównanie

Dodaj moduł obrazu do pierwszej kolumny, użyj lewego wyrównania obrazu i włącz opcję „Zawsze wyśrodkuj obraz na urządzeniu mobilnym”.

Rozstaw

Otwórz podkategorię Odstępy i dodaj '-300px' do lewego marginesu.

Moduł tekstowy drugiej kolumny

Kolor tła

Dodaj moduł tekstowy do drugiej kolumny i użyj „#3d3d3d” jako koloru tła.

Ustawienia tekstu

Przejdź do zakładki Projekt i użyj następujących ustawień dla podkategorii Tekst:

• Czcionka tekstu: Lato
• Rozmiar czcionki tekstu: 12px
• Kolor tekstu: #FFFFFF
• Wysokość linii tekstu: 2,2 em
• Orientacja tekstu: Środek

Rozmiary

Otwórz podkategorię Rozmiar i użyj '75%' jako Szerokość.

Rozstaw

Na koniec użyj następujących ustawień dla podkategorii Odstępy:

• Margines górny: 130px (komputer stacjonarny), -200 (tablet i telefon)
• Lewy margines: -180px (komputer), 80 (tablet), 50 (telefon)
• Wypełnienie górne, prawe, dolne i lewe: 50px (komputer i tablet), 20px (telefon)

Wynik

Po zakończeniu wynik na pulpicie będzie wyglądał tak:

I tak na komórce:

Zacznij tworzyć czwarty przykład

Czwarty przykład, który stworzymy, wygląda tak:

Dodaj nową sekcję

Zacznij od dodania standardowej sekcji do strony, nad którą pracujesz.

Dodaj wiersz z dwiema kolumnami

Następnie dodaj do niego dwukolumnowy wiersz.

Rozmiary

Otwórz podkategorię Rozmiar i wprowadź następujące zmiany:

• Użyj niestandardowej szerokości: Tak
• Szerokość niestandardowa: 60%
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Pierwsza kolumna Moduł pierwszego obrazu

Wyrównanie

Dodaj moduł obrazu do pierwszej kolumny, użyj odpowiedniego wyrównania obrazu i włącz opcję „Zawsze wyśrodkuj obraz na urządzeniu mobilnym”.

Rozmiary

Przejdź do podkategorii Rozmiar tego modułu obrazu, użyj szerokości „89%” i wybierz odpowiednie wyrównanie modułu.

Widoczność

Przejdź do zakładki Zaawansowane i wyłącz moduł obrazu na telefonie i tablecie. Zrobimy to dla 3 używanych modułów obrazu. Możesz sam zdecydować, który z nich chcesz wyświetlić na tablecie i telefonie, w naszym przypadku będzie to obraz w prawym górnym rogu.

Pierwsza kolumna Drugi moduł obrazu

Wyrównanie

Dodaj kolejny moduł obrazu, użyj odpowiedniego wyrównania obrazu i włącz opcję „Zawsze wyśrodkuj obraz na urządzeniu mobilnym”.

Granica

Przewiń w dół i skorzystaj z następującego obramowania:

• Użyj obramowania: tak
• Kolor obramowania: #FFFFFF
• Szerokość obramowania: 5px
• Styl obramowania: Solidny

Widoczność

Na koniec przejdź do zakładki Zaawansowane i wyłącz moduł obrazu na telefonie i tablecie.

Moduł pierwszego obrazu drugiej kolumny

Wyrównanie

Dodaj następny moduł obrazu do drugiej kolumny, użyj lewego wyrównania obrazu i włącz opcję „Zawsze wyśrodkuj obraz na urządzeniu mobilnym”.

Granica

Przewiń w dół, otwórz podkategorię Granica i wprowadź następujące ustawienia:

• Użyj obramowania: tak
• Kolor obramowania: #FFFFFF
• Szerokość obramowania: 4px
• Styl obramowania: Solidny

Drugi moduł obrazu drugiej kolumny

Wyrównanie

Dodaj ostatni moduł obrazu do drugiej kolumny, użyj lewego wyrównania obrazu i włącz opcję „Zawsze wyśrodkuj obraz na urządzeniu mobilnym”.

Rozmiary

Następnie otwórz podkategorię rozmiarów, użyj szerokości „89%” i wybierz lewe ustawienie modułu.

Widoczność

Wyłącz również ten moduł obrazu na telefonie i tablecie.

Dodaj wiersz jednokolumnowy

Gdy skończysz poprzedni wiersz, śmiało dodaj kolejny. Tym razem wiersz będzie potrzebował tylko jednej kolumny.

Rozmiary

Przejdź do zakładki Projekt w ustawieniach wiersza, włącz opcję „Użyj niestandardowej szerokości” i użyj „581px” jako niestandardowej szerokości.

Moduł tekstowy

Kolor tła

Dodaj moduł tekstowy do tego nowego wiersza i wybierz „rgba(255,255,255,0.92)” jako kolor tła.

Ustawienia tekstu

Przejdź do karty Projekt i wprowadź następujące ustawienia w podkategorii Tekst:

• Czcionka tekstu: Lato
• Rozmiar czcionki tekstu: 12px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 2,2 em
• Orientacja tekstu: Środek

Rozmiary

Następnie otwórz podkategorię Rozmiar, dodaj '75%' do szerokości i wybierz środkowe Wyrównanie modułu.

Rozstaw

Na koniec wprowadź następujące ustawienia dla podkategorii Odstępy:

• Górny margines: -580px (komputer stacjonarny), -200 (tablet i telefon)
• Lewy margines: – 180px (komputer stacjonarny), 80 (tablet), 50 (telefon)
• Wypełnienie górne, prawe, dolne i lewe: 50px

Wynik

Gdy to zrobisz, będziesz mógł zobaczyć następujący wynik na komputerze:

Oraz następujące na urządzeniach mobilnych:

Zacznij tworzyć piąty przykład

Ostatni przykład, który pokażemy, jak odtworzyć, jest następujący:

Dodaj sekcję o pełnej szerokości

Zacznij od dodania sekcji o pełnej szerokości do swojej strony.

Moduł obrazu o pełnej szerokości

W tej sekcji o pełnej szerokości dodaj moduł obrazu o pełnej szerokości.

Dodaj nową sekcję

Tuż pod poprzednią sekcją dodaj kolejną sekcję. Tym razem sekcja musi być standardowa zamiast pełnej szerokości.

Dodaj wiersz z trzema kolumnami

Dodaj trzykolumnowy wiersz do tej nowej sekcji standardowej.

Kolor tła kolumny 1, 2 i 3

Otwórz ustawienia wierszy i przypisz do kolumn następujące kolory tła:

• Kolumna 1: #eaeaea
• Kolumna 2: rgba(12,113,195,0,17)
• Kolumna 3: rgba (131,0,233,0,09)

Rozmiary

Przejdź do zakładki Projekt i wprowadź następujące zmiany w podkategorii Rozmiar:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Następnie otwórz podkategorię Odstępy, dodaj „-60px” do górnego marginesu i „50px” do dolnego wypełnienia każdej kolumny.

Moduł tekstowy pierwszej kolumny

Kolor tła

Kontynuuj, dodając moduł tekstowy do pierwszej kolumny i używając „rgba(255,255,255,0.89)” jako koloru tła.

Ustawienia tekstu

Przejdź do zakładki Projekt i wprowadź następujące ustawienia dla podkategorii Tekst:

• Czcionka tekstu: Lato
• Rozmiar czcionki tekstu: 12px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 2,2 em
• Orientacja tekstu: Środek

Granica

Otwórz podkategorię Border i skorzystaj z następujących ustawień:

• Użyj obramowania: tak
• Kolor obramowania: #FFFFFF
• Szerokość obramowania: 17px
• Styl obramowania: Solidny

Rozmiary

Następnie użyj szerokości '75%' i wybierz centralne ustawienie modułu w podkategorii wymiarowania.

Rozstaw

Na koniec otwórz podkategorię Odstępy i wprowadź następujące ustawienia:

• Górny margines: -300px (komputer), 0px (tablet i telefon)
• Górna, prawa, dolna, lewa wyściółka: 50px (komputer i tablet), 20px (telefon)

Klonuj moduł tekstowy dwa razy i umieść w innych dwóch kolumnach

Śmiało i dwukrotnie sklonuj moduł tekstowy. Następnie umieść każdy z klonów w dwóch pozostałych kolumnach.

Moduł tekstowy zmiany odstępów w drugiej kolumnie

Będziemy musieli zmienić górny margines modułu tekstowego umieszczonego w drugiej kolumnie na '-220px'.

Moduł tekstowy zmiany odstępów w trzeciej kolumnie

To samo liczy się dla modułu tekstowego w trzeciej kolumnie, ale zamiast tego wartość to '-140px'.

Wynik

A oto wynik na pulpicie:

A na telefonie komórkowym:

Końcowe przemyślenia

W tym poście pokazaliśmy Ci kilka pięknych i zabawnych układów sekcji w stylu redakcyjnym, których możesz używać w swojej własnej witrynie. Te przykłady pokazują, jak elastyczne są opcje Divi i jak kreatywnie możesz uzyskać. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa Julii Tim / shutterstock.com