Jak tworzyć gradientowe nakładki tła z ustawieniami tła Divi

Opublikowany: 2017-06-13

W dzisiejszym samouczku zamierzamy zbadać nowe i eleganckie możliwości, jakie nowe funkcje projektowania tła Divi wnoszą do Twoich stron internetowych, a dokładniej; za pomocą gradientowych nakładek tła.

Dzięki tej nowej aktualizacji w tle do kreatora Divi dodano wiele nowych opcji, które pomogą Ci spełnić Twoje potrzeby podczas projektowania własnej witryny internetowej lub dla klienta. Te nowe opcje pozwalają bawić się wyglądem i działaniem Twojej witryny.

Przed wydaniem tej aktualizacji większość zmian, które można teraz wprowadzić w kreatorze Divi, musiała zostać dokonana za pomocą niestandardowego kodu CSS. Wprowadzanie zmian projektowych w tle stało się teraz łatwiejsze niż kiedykolwiek. Za pomocą kilku prostych kliknięć możesz stworzyć piękne tła dla wszystkich różnych sekcji swojej witryny.

Przykłady gradientowych nakładek tła

Stworzyliśmy trzy sekcje z obrazami przed i po, które pokażą Ci, jak nowe opcje mogą poprawić wrażenie, jakie odzwierciedla Twoja witryna, i nadać jej pewien czynnik „je ne sais quoi”.

Sekcja bohaterów

Oto jak wygląda sekcja bohatera przy dodawaniu samego obrazu tła:

I tak będzie wyglądał nasz wynik końcowy, gdy dodamy gradientową nakładkę tła do tego samego obrazu tła, który jest używany na powyższym obrazku:

Sekcja Blurb

Tak wygląda sekcja notki przy użyciu jednokolorowego tła:

A tak wygląda efekt końcowy, gdy dodamy gradientową nakładkę tła do tła deseniowego:

Sekcja cenowa

Tak wygląda sekcja cenowa, gdy użyjemy jednego koloru (w jaśniejszej i ciemniejszej tonacji):

A tak będzie wyglądał efekt końcowy po zastosowaniu gradientowej nakładki tła:

Każdy z nich ma inne ustawienia, a my pokażemy Ci dokładnie – krok po kroku – jak stworzyć taki wygląd, abyś mógł go używać na własnych stronach internetowych.

Krok po kroku: sekcja bohaterów

W pierwszej sekcji tego posta odtwarzamy sekcję bohatera. Ten przykład pokaże, w jaki sposób funkcja projektowania tła może zmienić kolory używane w obrazie. I chociaż użyliśmy gradientowej nakładki tła, wprowadzone przez nas zmiany są bardzo subtelne. Dodaliśmy wrażenie ciemniejszego odcienia do obrazu w połączeniu z innym kolorem nieba.

Rozpocznij tworzenie

Zacznijmy od utworzenia nowej strony w Twojej witrynie WordPress. Teraz dodaj do tej strony standardową sekcję z wierszem o pełnej szerokości. Następnie umieść różne moduły w swoim rzędzie. Użyliśmy dwóch modułów tekstowych i jednego modułu przycisków.

Ustawienia pierwszego modułu tekstowego

W pierwszym module tekstowym pojawi się tytuł sekcji bohatera. Wpisz tekst, który ma się pojawić w polu treści w podkategorii Tekst karty Treść i przejdź do karty Projekt.

Na karcie Projekt wprowadź następujące modyfikacje w podkategorii Tekst:

  • Orientacja tekstu: Środek
  • Rozmiar czcionki tekstu: 30
  • Kolor czcionki tekstu: #FFFFFF

Ustawienia drugiego modułu tekstowego

Teraz otwórz następny moduł tekstowy i wprowadź tekst również w polu treści. Następnie przejdź do zakładki Projekt i dokonaj następujących modyfikacji w podkategorii Tekst:

  • Orientacja tekstu: Środek
  • Rozmiar czcionki tekstu: 16
  • Kolor czcionki tekstu: #FFFFFF

Przewiń w dół tę samą kartę i dodaj „500px” do maksymalnej szerokości w podkategorii Rozmiar i „2%” do dolnego marginesu w podkategorii Odstępy.

Ustawienia przycisków

Na koniec otwórz ustawienia modułu przycisków. Wpisz CTA, które chcesz połączyć z przyciskiem w podkategorii Tekst na karcie Treść i przejdź do karty Projekt.

Na karcie Projekt dokonaj następujących zmian w podkategorii Przycisk:

  • Użyj niestandardowych stylów dla przycisku: Tak
  • Rozmiar tekstu przycisku: 20
  • Kolor tekstu przycisku: #FFFFFF
  • Kolor tła przycisku: rgba (0,0,0,0)
  • Szerokość obramowania przycisku: 2
  • Kolor obramowania przycisku: #FFFFFF
  • Promień obramowania przycisku: 7

Teraz otwórz sekcje wierszy i dokonaj następujących zmian w podkategorii odstępów modułu Design:

Górny margines: 15%
Dolny margines: 10%

Ustawienia nakładki gradientu tła

Teraz przechodzimy do części zabawnej; dodanie gradientowej nakładki tła do obrazu tła. Śmiało i otwórz ustawienie sekcji. Następnie przejdź do podkategorii Tło i zacznij od dodania tła gradientowego.

W wykonanym przez nas przykładzie użyliśmy następujących ustawień:

  • Pierwszy kolor: #3730ff
  • Drugi kolor: #e02b20
  • Typ gradientu: liniowy
  • Kierunek gradientu: 272 stopni
  • Pozycja startowa: 40%
  • Pozycja końcowa: 100%

Teraz przejdź do zakładki obrazu tła i dodaj wybrany obraz. Celowo wybraliśmy zdjęcie zawierające niebo, aby wzmocnić efekt, który staramy się stworzyć.

Teraz przewiń w dół tę samą kartę. Wyśrodkuj obraz tła i aktywuj opcję Pomnóż w menu rozwijanym Mieszanie obrazu tła. Masz również wiele innych opcji, które mogą pomóc Ci osiągnąć dokładnie pożądany wynik.

I oto końcowy wynik:

Krok po kroku: sekcja Blurb

Drugim przykładem, który pokażemy, jak tworzyć, jest sekcja notki. Chcemy skupić się na treści notki, dlatego nie zdecydowaliśmy się na tło ruchliwe, ale tło z deseniem.

Wzór tła użyty w tym przykładzie pochodzi z Toptal. Możesz pobrać wzory, które lubisz używać do różnych celów, w tym komercyjnych. Tylko nie zapomnij podać ich w źródle swojej witryny, jak podano w ich FAQ.

Uczyniliśmy również ikony notatek nieco przezroczystymi, aby kolory gradientu były widoczne. Chociaż każda z notatek ma te same ustawienia, kolor wyświetlany przez ikony jest nieco inny i zgodny z użytymi przez nas kolorami gradientu.

Rozpocznij tworzenie

Zacznij od dodania standardowej sekcji do nowej lub istniejącej strony. W tej sekcji potrzebujemy wiersza z trzema kolumnami.

Kontynuuj, dodając moduł Blurb w pierwszej kolumnie wiersza. W każdej kolumnie użyjemy tych samych ustawień modułu notatek. Dlatego musimy tylko raz stworzyć moduł notki i sklonować go dla dwóch pozostałych kolumn.

Ustawienia rozmycia

Otwórz ustawienia modułu Blurb i wpisz tytuł i treść w podkategorii Tekst na karcie treści. Przejdź do karty Projekt i dokonaj następujących zmian w podkategorii Obraz i ikona:

  • Kolor ikony: rgba (255,255,255,0.36)
  • Ikona koła: Tak
  • Kolor koła: rgba (255,255,255,0)
  • Pokaż obramowanie koła: Tak
  • Kolor obramowania koła: rgba (255,255,255,0.36)
  • Umieszczenie obrazu/ikony: góra
  • Użyj rozmiaru czcionki ikony: Tak
  • Rozmiar czcionki ikony: 96px

Przewiń w dół tę samą kartę i umieść Orientację tekstu na „Środek” w podkategorii Tekst.

Kontynuuj przewijanie i otwórz podkategorię Tekst nagłówka. Śmiało i użyj następujących ustawień:

  • Rozmiar czcionki nagłówka: 18
  • Kolor tekstu nagłówka: #FFFFFF
  • Wysokość linii nagłówka: 1em

Teraz jedyną rzeczą do zmiany jest podkategoria Body Text. Upewnij się, że obowiązują następujące ustawienia:

  • Rozmiar czcionki ciała: 14
  • Kolor tekstu: #FFFFFF
  • Wysokość linii ciała: 1,5 em

Nie zapomnij dwukrotnie sklonować modułu Blurb, umieścić je w pozostałych dwóch pozostałych kolumnach i odpowiednio zmienić zawartość.

Ustawienia wiersza

Otwórz ustawienia wiersza i przejdź do podkategorii Odstępy w zakładce Projekt. Jedyne, co musisz zrobić, to zmienić górny i dolny margines na „5%”.

Ustawienia nakładki gradientu tła

Na koniec dodamy obraz tła z nakładką gradientową. Otwórz ustawienia swojej sekcji i przejdź do podkategorii Tło w zakładce Treść.

Następnie wprowadź następujące zmiany w opcji gradientu:

  • Pierwszy kolor: #52009b
  • Drugi kolor: #0edeed
  • Typ gradientu: Promieniowy
  • Kierunek promieniowy: w prawo
  • Pozycja startowa: 28%
  • Pozycja końcowa: 100%

Przejdź do opcji tła, prześlij wybrany wzór i wprowadź następujące zmiany:

  • Pozycja obrazu tła: środek
  • Powtórzenie obrazu tła: powtórz (w zależności od wzoru)
  • Mieszanie obrazu tła: mnożenie

Otóż ​​to! Powinieneś teraz uzyskać następujący oszałamiający wynik:

Krok po kroku: sekcja cenowa

Ostatnim przykładem tego posta jest sekcja z cenami. W tej sekcji chcieliśmy pokazać, że możesz wszędzie używać gradientowego tła. Jest przeznaczony nie tylko do użytku w sekcjach, ale także w kolumnach. Użyjemy tylko gradientowego tła dla dwóch kolumn i zrobimy gradientową nakładkę tła dla drugiej kolumny.

Powodem, dla którego to robimy, jest podkreślenie przedstawionego pakietu cenowego. Używamy intensywniejszych kolorów niż w pozostałych dwóch kolumnach i dodajemy również tło z deseniem. Te dwie rzeczy w połączeniu zwiększają szanse na przyciągnięcie ludzi do polecanego pakietu cenowego, który chcesz najbardziej promować.

Rozpocznij tworzenie

Zacznij od dodania nowej sekcji standardowej do nowej lub istniejącej strony w Twojej witrynie. Sekcja wymaga wiersza z trzema kolumnami. Moduły, których będziemy używać, są takie same dla każdej kolumny i zawierają te same ustawienia. Dlatego zrobimy je dla pierwszej kolumny, a następnie sklonujemy do pozostałych dwóch kolumn.

Ustawienia pierwszego modułu tekstowego

Dodaj nowy Moduł tekstowy do pierwszej kolumny, dodaj typ pakietu cenowego do pola treści w podkategorii Tekst zakładki treść i przejdź do zakładki Projekt.

Zastosuj następujące zmiany w podkategorii Tekst na karcie Projekt:

  • Orientacja tekstu: Środek
  • Rozmiar czcionki tekstu: 24
  • Kolor czcionki tekstu: #FFFFFF
  • Wysokość linii tekstu: 1,5 em

Przewiń w dół tę samą kartę i wprowadź następujące modyfikacje w podkategorii Odstępy:

  • Górny margines: 50px
  • Margines dolny: 20px

Ustawienia drugiego modułu tekstowego

Dodaj kolejny moduł tekstowy do tej samej kolumny. Zapisz cenę pakietu w polu treści w podkategorii Tekst na karcie Treść i przejdź do karty Projekt.

Na karcie Projekt dokonaj następujących zmian:

  • Orientacja tekstu: Środek
  • Rozmiar czcionki tekstu: 82px
  • Kolor czcionki tekstu: #FFFFFF
  • Wysokość linii tekstu: 1,1 em

Przewiń w dół tę samą kartę i dodaj „10px” do dolnego marginesu.

Ustawienia trzeciego modułu tekstowego

W naszym ostatnim module tekstowym dodaj tekst do pola treści w podkategorii Tekst na karcie Treść. Następnie przejdź do zakładki Projekt i dokonaj następujących zmian w podkategorii Tekst:

  • Orientacja tekstu: Środek
  • Rozmiar czcionki tekstu: 16
  • Kolor czcionki tekstu: #FFFFFF
  • Wysokość linii tekstu: 1,1 em

Przewiń w dół tę samą kartę i dodaj „33px” do dolnego marginesu w podkategorii Odstępy.

Ustawienia przycisków

Następnym modułem, który dodamy do tej kolumny, jest moduł przycisku. Wpisz wezwanie, które ma się pojawić w polu treści w podkategorii Tekst na karcie Treść i przejdź do karty Projekt.

Na karcie Projekt ustaw opcję Wyrównanie przycisku w podkategorii Wyrównanie na „Środek” i wprowadź następujące zmiany w podkategorii Przycisk:

  • Użyj niestandardowych stylów dla przycisku: Tak
  • Rozmiar tekstu przycisku: 13
  • Kolor tekstu przycisku: #FFFFFF
  • Kolor tła przycisku: rgba (255,255,255,0.11)
  • Szerokość obramowania przycisku: 2
  • Kolor obramowania przycisku: #FFFFFF
  • Promień obramowania przycisku: 4
  • Odstępy między przyciskami: 1

Ustawienia dzielnika

Na koniec dodamy przegrodę do kolumny, aby stworzyć przestrzeń. Wybierz 'Nie pokazuj dzielnika' w zakładce Treść i przejdź do zakładki projektu, gdzie w polu wysokości wstawiasz '25px'.


Teraz, gdy dodaliśmy wszystkie moduły, upewnij się, że je sklonowałeś i umieściłeś również w innych kolumnach.

Ustawienia nakładki gradientu tła

W tym przykładzie użyjemy dwóch różnych ustawień tła dla różnych kolumn. Pierwsza i ostatnia kolumna będą takie same, a druga będzie trochę inna.

Przejdź do ustawień wiersza i zastosuj następujące zmiany do opcji gradientu pierwszej i trzeciej kolumny w podkategorii Tło na karcie Treść:

  • Pierwszy kolor: rgba (10,122,178,0,57)
  • Drugi kolor: rgba(142,0,142,0.47)
  • Kolumna 1 Typ gradientu: Promieniowy
  • Kolumna 1 Kierunek promieniowy: góra lewa
  • Pozycja początkowa kolumny 1: 0
  • Pozycja końcowa kolumny 1: 100%

Następnie przejdź do kolumny 2 i wprowadź następujące zmiany w opcji gradientu:

  • Pierwszy kolor: #0a7ab2
  • Drugi kolor: #8e008e
  • Kolumna 2 Typ gradientu: Liniowy
  • Kolumna 2 Kierunek gradientu: 180 stopni
  • Pozycja początkowa kolumny 2: 0
  • Kolumna 2 Pozycja końcowa: 100

Przejdź do opcji obrazu tła, prześlij obraz tła i zmień ustawienia:

  • Pozycja obrazu tła w kolumnie 2: u góry po lewej
  • Kolumna 2 Powtórz obraz tła: Powtórz
  • Mieszanie obrazu tła w kolumnie 2: Pomnóż

Końcowe przemyślenia

Przykłady, które pokazaliśmy w tym poście na blogu, to tylko ułamek wyników, jakie można uzyskać, korzystając z nowych funkcji projektowania tła. W nadchodzących postach z pewnością zajmiemy się również innymi przykładami, które pomogą Ci stworzyć świetne projekty dla tworzonych przez Ciebie stron internetowych. Jeśli masz jakieś pytania, uwagi lub sugestie; zostaw 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!