Moduł Divi Header jest gotowy do użycia w celu tworzenia unikalnych projektów nagłówków za pomocą zaledwie kilku poprawek. To sprawia, że jest to niezwykle popularny moduł przy projektowaniu nagłówków dla Twojej firmy Witryna internetowa z Divim. Przy odrobinie zastanowienia możesz tworzyć naprawdę unikalne projekty, korzystając z wbudowanych ustawień (nie niestandardowego CSS). Tak więc dla tych, którzy chcą poznać nowe projekty nagłówków, pokażę 3 style modułów nagłówków Divi, które mogą Cię zainspirować.
Przegląd 3 stylów modułów nagłówkowych Divi
Styl nr 1: abstrakcyjny gradient
Styl nr 2: Potrójne zagrożenie
Styl nr 3: Zaokrąglona rama
To, czego potrzebujesz, aby zacząć
Aby rozpocząć, będziesz potrzebować Motyw Divi. Użyję Divi Builder do stworzenia rysunków na frontendzie (obszar publiczny). Będziesz także potrzebować kilku obrazów, aby ukończyć samouczek. Nie zapominaj, że nadal możesz importować obrazy ze wstępnie zdefiniowanego układu. W rzeczywistości w tym samouczku użyję obrazów z Pakietu prezentacji firmy sprzątającej, Pakietu prezentacji trenera biznesowego i Pakietu prezentacji internetowej Freelancer.
Styl nr 1: abstrakcyjny gadżet
Ten pierwszy projekt modułu nagłówka Divi to prosty i wszechstronny projekt, który kreatywnie wykorzystuje gradientowe tła.
Aby rozpocząć, dodaj nową sekcję o pełnej szerokości z modułem nagłówka o pełnej szerokości.
Zaktualizuj zawartość ustawień nagłówka, dodając nowy tytuł i obraz nagłówka.
Następnie zaktualizuj parametry projektu w następujący sposób:
Czcionka tytułu: Lato
Rozmiar tekstu tytułu: 6vw
Kolor tła jednego przycisku: #0c71c3
Szerokość obramowania jednego przycisku: 0 pikseli
Niestandardowe wypełnienie: góra 8vw, dół 8vw
Przed dodaniem tła sekcji musimy najpierw uczynić tło modułu nagłówka przezroczystym i nadać mu niestandardowy gradient, aby utworzyć nasz kształt koła w prawym dolnym rogu. Wróć do karty Zawartość i zaktualizuj tło w następujący sposób:
Kolor tła: rgba (255,255,255,0)
Kolor lewego gradientu tła: #0096eb
Gradient prawego tła Kolor: rgba (255,255,255,0)
Typ gradientu:
Promieniowy Kierunek promieniowy: prawy dolny róg
Pozycja początkowa: 25%
Końcowa pozycja: 0%
Zapisz ustawienia
Następnie musimy dodać nasze projekty tła do sekcji, która będzie za naszym modułem nagłówka. Aby to zrobić, otwórz ustawienia sekcji i zaktualizuj następujące elementy:
Kolor lewego gradientu tła: #0096eb
Prawy gradient tła: #007ea1
Typ gradientu: promieniowy
Kierunek promieniowy: lewy górny róg
Pozycja początkowa: 43%
Pozycja końcowa: 0%
Wskazówka dotycząca projektowania: jeśli szukasz kolorów do wypróbowania dla własnych gradientów nagłówka, sugeruję usunięcie kolorów użytych w obrazie/grafice nagłówka, której możesz używać.
Aby dodać kolejny subtelny element projektu do naszego abstrakcyjnego tła, możemy dodać górną i dolną przegrodę. W tym celu przejdź do zakładki Projekt i dodaj następujące separatory:
Styl górnego podziału: patrz zrzut ekranu
Kolor górnego rozdzielacza: rgba(150,210,210,0.2)
Wysokość separatora
Góra: 8vw Separator poziomy Górne powtórzenie: 0,7x
Separator Top Flip: Pionowo
Styl dolnego podziału: patrz zrzut ekranu
Kolor dolnego rozdzielacza: rgba(150,210,210,0.2)
Wysokość separatora
niższy: 10vw Dolny dzielnik powtórzony poziomo: 0,5x Powrót z dolnego dzielnika
: pionowo
To wszystko! Sprawdź ostateczny projekt.
Styl nr 2: Potrójne zagrożenie
Ten styl modułu nagłówka divi zawiera trzy wezwania do działania, w tym dwa przyciski i ikonę przewijania w dół. Odwzorowanie ikon przycisków na ikonę przewijania poprawia symetryczny wygląd rysunku. A separatory sekcji tworzą ładny trójkątny abstrakcyjny wzór, który prowadzi użytkowników w dół strony.
Utwórz nową sekcję o pełnej szerokości z nagłówkiem o pełnej szerokości.
Następnie zaktualizuj tekst tytułu, tekst łącza przycisku nr 1 i tekst łącza przycisku nr 2.
Następnie zaktualizuj resztę projektu w następujący sposób:
Kolor tła: #1a1844
Orientacja tekstu i logo: środek
Ikona: patrz zrzut ekranu
Przewiń w dół Rozmiar ikony: 20px
Czcionka tytułu: Lato
Grubość czcionki tytułu: Gruba
Rozmiar tekstu tytułu: 5vw (komputer), 40px (tablet), 30px (smartfon)
Wiersz tytułowy Wysokość dolna: 1.3 em
Kolor tła przycisku 2: #fe4943
Szerokość przycisku 2: 0 pikseli
Ikona przycisku 2: strzałka w prawo (patrz zrzut ekranu)
Kolor tła przycisku 1: #fe4943
Szerokość obramowania przycisku 1: 0 pikseli
Przycisk 1: strzałka w lewo (patrz zrzut ekranu)
Lokalizacja przycisku 1: Lewa
Niestandardowe wypełnienie: 10 vw u góry, 10 vw po lewej stronie
Teraz musimy tylko dodać nasze dzielniki sekcji, aby utworzyć trójkątny wzór tła. Otwórz ustawienia przekroju i zaktualizuj następujące ustawienia projektu:
Styl
separator
góra: zobacz zrzut ekranu Kolor górnego rozdzielacza: rgba (255,255,255,0.3) Wysokość górnego rozdzielacza: 45vw
Styl
separator
góra: zobacz zrzut ekranu Kolor górnego rozdzielacza: rgba (255,255,255,0.1) Wysokość górnego rozdzielacza: 45vw
Zobaczmy teraz ostateczny projekt:
Styl nr 3: Zaokrąglona rama
Ten zaokrąglony projekt modułu nagłówka divi to świetny sposób na oprawienie obrazu tła i treści nagłówka, aby zwrócić większą uwagę na wezwanie do działania. Wystarczy kilka poprawek w promieniu obramowania nagłówka, polu cienia i niestandardowych odstępach.
Aby rozpocząć, utwórz nową sekcję o pełnej szerokości z nagłówkiem o pełnej szerokości.
Zacznijmy od zaktualizowania elementów treści nagłówka, dodając tytuł, tekst linku przycisku nr 1 i obraz logo.
Następnie dodaj obraz tła wystarczająco duży, aby obejmował wysokość i szerokość nagłówka. Ponieważ jest to zaokrąglony nagłówek, spróbuj użyć obrazu o tej samej wysokości i szerokości (np. 1000 na 1000 pikseli).
Następnie zaktualizuj pozostałe ustawienia projektu w następujący sposób:
Zapisz ustawienia.
Następnie otwórz ustawienia sekcji, aby dodać kolor tła i odstępy w następujący sposób:
Kolor tła: #000000
Niestandardowe wypełnienie: góra 5vw, dół 5vw
Teraz sprawdź ostateczny projekt.
To wszystko w tym samouczku na temat projektowania 3 unikalnych nagłówków za pomocą Divi. Jeśli masz jakieś pytania, możesz je zadać w sekcji komentarzy.
