Jak tworzyć niestandardowe zakładki z referencjami za pomocą Divi (DARMOWE pobieranie!)

Dla wielu firm referencje są jednym z kluczowych argumentów w pozyskiwaniu nowych klientów. Oznacza to, że poświęcenie dodatkowej uwagi referencji w witrynie nigdy się nie zmarnuje. W Divi istnieje wiele różnych sposobów udostępniania referencji, na przykład za pomocą modułu referencji Divi. Ale jeśli szukasz bardziej interaktywnego podejścia, pokochasz ten samouczek. Pokażemy Ci, jak tworzyć niestandardowe zakładki referencji w Divi. Gdy ktoś najedzie na Moduł Blurb po lewej stronie, po prawej stronie pojawi się odpowiednia opinia. Efekty przejścia w tym projekcie są również płynne, co pomaga nadać Twojej witrynie dodatkowe wrażenie dostosowania. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz niestandardowy układ zakładek z referencjami ZA DARMO

Aby położyć swoje ręce na darmowym, niestandardowym układzie zakładek z referencjami, musisz najpierw pobrać go za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Zacznijmy odtwarzać!

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i dodaj kolor tła.

• Kolor tła: #ffefdb

Rozstaw

Przejdź do karty projektu sekcji i dodaj niestandardowe wartości marginesów i dopełnienia.

• Górny margines: 5%
• Dolny margines: 5%
• Lewy margines: 5%
• Prawy margines: 5%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Granica

Uwzględnij również zaokrąglone rogi.

• Wszystkie rogi: 20px

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając pierwszy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozstaw

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj dolny margines.

• Dolny margines: 3%

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Czas dodać moduły, zaczynając od modułu tekstowego zawierającego trochę treści H2.

Ustawienia tekstu H2

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

• Czcionka nagłówka 2: Montserrat
• Grubość czcionki nagłówka 2: pół pogrubiona
• Rozmiar tekstu nagłówka 2: 31px
• Nagłówek 2 Odstępy między literami: -1px

Dodaj moduł dzielnika do kolumny

Widoczność

Tuż pod modułem tekstowym dodajemy moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Przejdź do zakładki projektowania modułu i zmień kolor linii na biały.

• Kolor linii: #ffffff

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Waga dzielnika: 10px
• Szerokość: 14%
• Wysokość: 10px

Granica

I uzupełnij ustawienia modułu, dodając zaokrąglone rogi do ustawień obramowania.

• Wszystkie rogi: 10px

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu. Użyj następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i wyrównaj wysokości kolumn w ustawieniach rozmiaru.

• Wyrównaj wysokości kolumn: Tak

Ustawienia kolumny 2

Kolor tła

Następnie otwórz ustawienia kolumny 2 i zastosuj kolor tła.

• Kolor tła: #fffbf9

Rozstaw

Przejdź do zakładki projektu kolumny i zastosuj górne i dolne dopełnienie na mniejszych ekranach.

• Górna wyściółka:
  • Pulpit: brak
  • Tablet i telefon: 300px
• Dolna wyściółka
  • Pulpit: brak
  • Tablet i telefon: 300px

Granica

Uwzględnij też zaokrąglone rogi.

• Wszystkie rogi: 10px

Dodaj Blurb Module #1 do kolumny 1

Dodaj zawartość

Czas dodać moduły, zaczynając od pierwszego modułu Blurb w kolumnie 1. Dodaj wybrane przez siebie treści.

Prześlij obraz w proporcji 1:1

Następnie prześlij obraz w proporcji 1:1.

Kolor tła

Następnie zastosuj następujący kolor tła:

• Kolor tła: #d5d6ea

Ustawienia obrazu

Wprowadź zmiany w ustawieniach obrazu.

• Umieszczenie obrazu/ikony: po lewej
• Zaokrąglone rogi obrazu: 100px

Ustawienia tekstu tytułu

Następnie zmodyfikuj odpowiednio ustawienia tekstu tytułu:

• Czcionka tytułu: Montserrat
• Grubość czcionki tytułu: pół pogrubiona
• Odstępy między literami tytułu: -1px

Ustawienia tekstu podstawowego

Zmieniamy również ustawienia tekstu podstawowego.

• Czcionka ciała: Lato
• Rozmiar tekstu ciała: 13px

Rozstaw

Następnie dodamy trochę miejsca wokół zawartości naszego modułu, stosując następujące wartości wypełnienia:

• Górna wyściółka: 5%
• Dolna wyściółka: 5%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Granica

Dodaj też zaokrąglone rogi.

• Wszystkie rogi: 10px

Animacja

Domyślnie do obrazu modułu Blurb zastosowano efekt animacji. Usuwamy tę animację w ustawieniach animacji.

• Animacja obrazu/ikony: brak animacji

Identyfikator CSS

Aby stworzyć projekt karty referencji, będziemy musieli dodać trochę kodu na końcu tego samouczka. Aby się na to przygotować, dodamy identyfikator CSS do zakładki zaawansowanej modułu Blurb.

• Identyfikator CSS: referencja-osoba-1

Blurb Obraz i tytuł CSS

Używamy również dwóch wierszy kodu CSS w zakładce Zaawansowane. Jeden na obrazek, a drugi na tytuł notki.

width: 25% !important;

margin-top: 25px;

Trzykrotne klonowanie modułu Blurb

Po ukończeniu pierwszego modułu Blurb możesz go sklonować trzy razy.

Zmień treść i obrazy

Upewnij się, że zmieniłeś treść i obrazy dla każdego zduplikowanego modułu Blurb.

Zmień kolory tła

Wraz z kolorami tła.

• Duplikat 1: #fffed6
• Duplikat 2: #d7ecd9
• Duplikat 3: #f5d5cb

Zmień identyfikatory CSS

I oczywiście identyfikatory CSS. Użyj kolejnej numeracji.

• Duplikat 1: referencja-osoba-2
• Duplikat 2: referencja-osoba-3
• Duplikat 3: referencja-osoba-4

Dodaj moduł tekstu cytatu do kolumny 2

Dodaj ofertę do pola zawartości

Do drugiej kolumny. Tam pierwszym potrzebnym modułem jest moduł tekstowy ze znakiem cudzysłowu.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: wyświetlacz Playfair
• Kolor tekstu: #ffefdb
• Rozmiar tekstu: 200px
• Wysokość linii tekstu: 1em

Pozycja

Zmień również położenie modułu.

• Pozycja: bezwzględna
• Lokalizacja: górny lewy
• Przesunięcie w poziomie: 5%

Dodaj moduł tekstu referencji do kolumny 2

Dodaj treść referencji

Przejdź do następnego modułu tekstowego. Ten będzie poświęcony naszemu pierwszemu świadectwu. Opinia, którą umieścisz w polu treści, musi pasować do pierwszego modułu Blurb w kolumnie 1.

Ustawienia tekstu

Zmień odpowiednio ustawienia tekstowe modułu:

• Czcionka tekstu: Lato
• Kolor tekstu: #000000
• Rozmiar tekstu: 20px
• Wysokość linii tekstu: 2,1 em
• Wyrównanie tekstu: do środka

Rozmiary

Upewnij się, że szerokość jest również ustawiona na „100%”.

• Szerokość: 100%

Rozstaw

Następnie dodaj niestandardowe wartości marginesów i dopełnienia do ustawień odstępów.

• Górny margines: 30%
• Lewa wyściółka: 10%
• Prawa wyściółka: 10%

Identyfikator CSS

I dodaj identyfikator CSS do zakładki Zaawansowane. Numer na końcu tego identyfikatora CSS musi być taki sam, jak numer na końcu odpowiedniego identyfikatora CSS modułu Blurb.

• Identyfikator CSS: referencja-kopia-1

Trzykrotne klonowanie modułu tekstowego

Po ukończeniu pierwszego modułu tekstowego referencji możesz go sklonować trzy razy.

Zmień treść referencji

Upewnij się, że zmieniłeś treść referencji w zduplikowanych modułach.

Zmień identyfikatory CSS

Wraz z identyfikatorami CSS. Upewnij się, że postępujesz zgodnie z kolejnością.

• Duplikat 1: referencja-kopia-2
• Duplikat 2: referencja-kopia-3
• Duplikat 3: referencja-kopia-4

Dodaj klasę CSS do pierwszego modułu tekstowego referencji

I musimy dodać klasę CSS do referencji, którą chcemy włączyć na początku. W tym przypadku to pierwszy.

• Klasa CSS: pokaż referencje

Dodaj moduł kodu poniżej modułu rozdzielacza (wiersz nr 1)

Teraz, gdy mamy już wszystkie elementy na swoim miejscu, nadszedł czas, aby magia się wydarzyła. Dodaj nowy moduł kodu tuż pod modułem dzielnika w pierwszym wierszu sekcji.

Dodaj kod CSS

Wstaw następujące wiersze kodu CSS między tagami stylu, jak widać na poniższym zrzucie ekranu.

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

Dodaj kod JQuery

Następnie umieść następujące wiersze kodu JQuery między tagami skryptu, jak widać na poniższym zrzucie ekranu i gotowe!

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć interaktywny projekt referencji dla każdego rodzaju witryny, którą zbudujesz. Mówiąc dokładniej, pokazaliśmy, jak tworzyć niestandardowe zakładki referencji, które są uruchamiane, gdy ktoś najedzie na jeden z modułów Blurb po lewej stronie. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.