Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62.

Kiedy tworzysz niestandardowy nagłówek dla swojego Witryna internetowa, używając kreatora motywów z Divi, będziesz szukał idealnego sposobu na dodanie AAL (wezwania do działania). Jednym ze sposobów, aby to zrobić, jest dodanie rozwijanego formularza kontaktowego. Pomoże to zachować ogólny wygląd nagłówka, zapewniając jednocześnie możliwość skontaktowania się z Tobą bez konieczności przewijania w dół. W tym samouczku pokażemy, jak utworzyć rozwijany formularz kontaktowy za pomocą Divi oraz kod JQuery i CSS. Będziesz także mógł pobrać plik JSON za darmo!

Chodźmy.

badanie

Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.

Rozwijane menu Divi

1. Przejdź do Divi Theme Builder i rozpocznij tworzenie globalnego nagłówka

Idź do Divi Theme Builder

Zacznij od przejścia do Konstruktora motywów Divi w zapleczu witryny WordPress.

Globalny nagłówek divi

Utwórz globalny nagłówek

Kliknij „Dodaj globalny nagłówek” i wybierz „Utwórz globalny nagłówek”, aby rozpocząć tworzenie niestandardowego globalnego nagłówka.

Zbuduj globalny nagłówek divi

2. Zbuduj projekt nagłówka

Ustawienia sekcji

Kolor tła

Po wejściu do ogólnego szablonu nagłówka zauważysz sekcję. Otwórz tę sekcję i użyj białego koloru tła.

  • Kolor tła: #FFFFFF
Regulacja tła

rozstaw

Następnie usuń domyślne górne i dolne wypełnienie z sekcji.

  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px
Konfiguracja wypełnienia

Pole cienia

Zastosuj również subtelny odcień pudełka.

  • Pole Shadow Blur Strength: 50px
  • Kolor cienia: rgba (0,0,0,0,15)
Konfiguracja cienia Divi

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:

Wybierz układ

zaklejania

Bez dodawania kolejnych modułów otwórz parametry linii i zmodyfikuj parametry rozmiaru w następujący sposób:

  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Wyrównaj wysokości kolumn: Tak
  • Szerokość: 95%
  • Maksymalna szerokość: 100%
Skonfiguruj wymiar linii Divi

rozstaw

Następnie dodaj niestandardowe górne i dolne wypełnienie.

  • Górna wyściółka: 1vw
  • Wyściółka u dołu: 1vw
Konfiguracja rozstawu sekcji

Główny element

I wyrównaj całą zawartość kolumn, dodając pojedynczą linię kodu CSS do głównego elementu wiersza.

align-items: center;

Niestandardowe CSS

Kolumna 2 Indeks Z

Dbamy również o to, aby druga kolumna miała wyższą wartość indeksu z do celów reaktywnych.

  • Indeks Z: 12
Parametr kolumny

Dodaj moduł obrazu do kolumny 1

Pobierz logo

Czas zacząć dodawać moduły! Zacznij od modułu obrazu w kolumnie 1. Prześlij logo.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala tworzyć Łatwo i za darmo dowolny projekt strony internetowej lub bloga o profesjonalnym wyglądzie. Przestań płacić dużo za stronę internetową, którą możesz zrobić sam.

Moduł obrazu divi

wyrównanie

Następnie zmień wyrównanie modułu.

  • Wyrównanie obrazu: środek
Moduł obrazu wyrównania

zaklejania

Zmień także szerokość.

  • Szerokość: 3vw (komputer stacjonarny), 5vw (tablet), 7vw (telefon)
rozwijany formularz kontaktowy

Dodaj moduł menu do kolumny 2

Wybierz menu

W drugiej kolumnie dodamy moduł menu.

Personalizacja modułu menu Divi

Usposobienie

Przejdź do zakładki projektowania modułu i zmień styl układu.

  • Styl: wyśrodkowany
Styl modułu menu

Ustawienia tekstu menu

Następnie zmień ustawienia tekstu w menu modułu.

  • Czcionka menu: Otwórz bez
  • Waga czcionki menu: częściowo pogrubiona
  • Kolor tekstu menu: # 000000
  • Rozmiar tekstu menu: 0.8vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
  • Odstępy między literami w menu: 1px
Tekst menu Divi

Ustawienia tekstu menu rozwijanego

Następnie zmień kolor linii w menu rozwijanym.

  • Kolor linii menu rozwijanego: # 007dff
Rozwijane menu Divi

ikony

Z kolorem ikony menu hamburger.

  • Kolor ikony menu hamburgera: # 007dff
Ikony menu divi

Dodaj moduł tekstowy 1 do kolumny 3

Dodaj kopię

Przejdźmy do trzeciego modułu! Dodaj moduł tekstowy z wybraną przez siebie kopią.

Skontaktuj się z nami moduł Divi

Kolor tła

Następnie dodaj kolor tła.

  • Kolor tła: # 007dff
Tło Divi

Ustawienia tekstu

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu:

  • Czcionka tekstu: Otwórz Sans
  • Waga czcionki tekstu: pogrubiona
  • Kolor tekstu: #ffffff
  • Rozmiar tekstu: 0.8vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
  • Wyrównanie tekstu: środek
Kolor czcionki Divi

zaklejania

Następnie zmodyfikuj parametry wymiarowania modułu.

  • Szerokość: 33%
  • Wyrównanie modułu: centrum
Zmiana rozmiaru tekstu sekcji divi

rozstaw

Chcesz sprzedawać swoje produkty w Internecie?

Pobierz bezpłatnie WooCommerce, najlepsze wtyczki e-commerce, aby sprzedawać swoje fizyczne i cyfrowe produkty na WordPress i łatwo tworzyć swój sklep internetowy. Idealny dla początkujących.

Następnie dodaj niestandardowe górne i dolne wypełnienie.

  • Górna wyściółka: 0.8vw (komputer stacjonarny), 2vw (tablet i telefon)
  • Wyściółka u dołu: 0.8vw (biurko), 2vw (tablet i telefon)
Konfiguracja odstępów między modułami tekstowymi

granica

I uzupełnij parametry modułu, dodając promień krawędzi.

  • Wszystkie rogi: 100 pikseli
Konfiguracja obramowania modułu tekstowego

Dodaj moduł tekstowy 2 do kolumny 3

Dodaj symbol do obszaru zawartości

Przejdźmy do następnego modułu, czyli kolejnego modułu tekstowego. Dodaj następującą strzałkę w obszarze zawartości: „▼”.

Moduł tekstowy Divi fleche

Ustawienia tekstu

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu:

  • Czcionka tekstu: Otwórz Sans
  • Kolor tekstu: # 007fff
  • Rozmiar tekstu: 3vw
  • Wysokość linii tekstu: 0em
  • Wyrównanie tekstu: środek
Moduł tekstowy Font Divi

Indeks Z

Zwiększamy także indeks z modułu.

  • Indeks Z: 11
Pozycja modułu tekstowego Divi

Dodaj moduł formularza kontaktowego do kolumny 3

Możesz teraz dodać formularz kontaktowy na dole modułu tekstowego zawierającego strzałkę. Ten moduł jest dość prosty w użyciu, więc będziesz musiał dostosować pola, które chcesz, aby były widoczne.

Moduł formularza kontaktowego

3. Dostosuj elementy, aby utworzyć formularz kontaktowy jednym kliknięciem

Dodaj wysokość kolumny 3

Gdy wszystkie mody są już na miejscu, czas na stworzenie efektu. Pierwszym krokiem do osiągnięcia pożądanego rezultatu jest otwarcie ustawień w kolumnie 3 i dodanie elastycznej niestandardowej wysokości w zakładce Zaawansowane.

Biuro:

height: 3vw;

tabletka:

height: 5vw;

komórkowy:

height: 6vw;

Przykładowy formularz kontaktowy ulotki

Dodaj klasę CSS do przycisku i strzałki

Następnie dodamy tę samą klasę CSS do pierwszych dwóch modułów tekstowych w kolumnie 3.

  • Klasa CSS: kontakt kontaktowy
Dodaj sekcję kontaktu pokazu

Dodaj klasę CSS do formularza kontaktowego

Będziemy również potrzebować niestandardowej klasy CSS dla modułu Formularz kontaktowy.

  • Klasa CSS: moduł formularza kontaktowego
Dodaj klasę do formularza divi

Ukryj moduł Formularz kontaktowy

Kontynuuj, dodając dodatkową linię kodu CSS do głównego elementu modułu Formularz kontaktowy. Pozwoli nam to ukryć moduł przed kliknięciem.

display: none;

Stylowy moduł CSS Divi

Dodaj moduł kodu do kolumny 3 za pomocą kodu JQuery i CSS

Aby utworzyć funkcję kliknięcia, będziemy potrzebować trochę kodu JQuery. Użyjemy również niestandardowego kodu CSS. Dodaj nowy moduł kodu do kolumny 2 z kodem. Upewnij się, że kod JQuery jest umieszczony między tagami skryptów, a kod CSS między tagami stylów.

jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});

.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}

Dodaj kod javascript

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Biuro

Przykładowy projekt

Co należy pamiętać

W tym artykule pokazaliśmy, jak dodać rozwijany formularz kontaktowy do niestandardowego nagłówka. To świetny sposób na wczesne wywołanie akcji. 

%d blogerzy lubią tę stronę: