[Ad_1]
Chodźmy.
badanie
Zanim przejdziemy do samouczka, rzućmy okiem na wynik na różnych rozmiarach ekranu.
Biuro
Aplikacje mobilne
Pobierz układ ZA DARMO
Aby otrzymać darmowy układ, musisz go najpierw pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobierania, musisz zapisać się na naszą listę mailingową Divi Daily za pomocą forma poniżej. 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, wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybowany” ani otrzymywać dodatkowych e-maili.
1. Utwórz strukturę elementu
Dodaj nową sekcję
Kolor tła
Zaczniemy ten samouczek od zbudowania struktury elementów na stronie Divi. Dodaj nową sekcję i użyj dla niej białego koloru tła.
- Kolor tła: #ffffff
rozstaw
Przejdź do zakładki Projekt przekroju i zmień ustawienia odstępów w następujący sposób:
- Górna wyściółka: 80px
- Dolne wypełnienie: 0px
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, korzystając z następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień maksymalną szerokość w ustawieniach rozmiaru.
rozstaw
Następnie usuń wszystkie domyślne wyściółki górne i dolne.
- Górna wyściółka: 0px
- Dolne wypełnienie: 0px
Dodaj moduł obrazu do kolumny 1
Pobierz obraz
Moduły Let's, zaczynając od modułu obrazu w kolumnie 1. Prześlij wybrany obraz.
Dodaj link
Następnie dodaj link do modułu obrazu.
Skala estakady
Następnie przejdź do zakładki Projekt i zmień ustawienia skali aktywowanej modułu.
Klasa CSS
Uzupełnij parametry modułu, stosując następującą klasę CSS w zakładce Zaawansowane:
Dodaj moduł tekstowy # 1 do kolumny 1
Dodaj zawartość H3
Przejdźmy do kolejnego modułu, jakim jest moduł tekstowy zawierający treść H3 według własnego wyboru.
Ustawienia tekstu H3
Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu H3:
- Tytuł 3 Policja: aktor
- Kolor tekstu tytułu 3: # 000000
- Rozmiar tekstu nagłówka 3:
- Komputer stacjonarny: 35 piksele
- Tablet: 28px
- Telefon: 22px
- Tytuł 3 Line Height: 1,4em
rozstaw
Następnie dodaj dolny margines.
Dodaj moduł tekstowy # 2 do kolumny 1
Dodaj treść
Następnie dodaj kolejny moduł tekstowy tuż pod poprzednim za pomocą a treść wybrany przez Ciebie opis.
Ustawienia tekstu
Zmień ustawienia tekstowe modułu w następujący sposób:
- Czcionka tekstu: aktor
- Kolor tekstu: # 75baff
- Rozmiar tekstu:
- Komputer stacjonarny: 22 piksele
- Tablet: 18px
- Telefon: 15px
- Odstępy między literami w tekście: 0.5 piks
- Wysokość linii literowej: 2
Dodaj moduł przycisku do kolumny 1
Dodaj kopię
Kolejnym i ostatnim modułem, którego potrzebujemy w tej kolumnie, jest moduł przycisków. Dodaj wybraną kopię.
Ustawienia przycisków
Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia przycisków:
- Użyj niestandardowych stylów przycisku: Tak
- Kolor tekstu przycisku: # 000000
- Szerokość obramowania przycisku: 0px
- Promień granicy przycisku: 1px
- Czcionka przycisku: aktor
- Pokaż ikonę przycisku: Tak
- Lokalizacja ikony przycisku: po lewej stronie
- Pokaż tylko ikonę po najechaniu na przycisk: Nie
rozstaw
Dodaj także niestandardowe wartości odstępów.
- Dolny margines: 80px
- Dolne wypełnienie: 20px
- Prawa wyściółka: 30 pikseli
Pole cienia
Uzupełnij ustawienia modułu, stosując następujące ustawienia cienia ramki:
- Poziome położenie cienia ramki: 0 pikseli
- Pozycja pionowego cienia ramki: 2 piksele
- Kolor cienia: # 000000
Usuń kolumnę 2
Po wypełnieniu pierwszej kolumny i wszystkich znajdujących się w niej modułów usuń drugą pustą kolumnę z wiersza.
Klonuj kolumnę 1
I ponownie użyj pierwszej kolumny, klonując ją raz.
Sklonuj cały wiersz
Kontynuuj, klonując jeden raz cały wiersz.
Edytuj wszystkie zduplikowane treści, obrazy i linki
Następnie pamiętaj o edycji wszystkich plików treść, obrazy i linki w każdej ze zduplikowanych kolumn.
2. Dodaj kursor
Dodaj nową linię do sekcji
Struktura kolumny
Teraz, gdy mamy już strukturę elementów, pora na stworzenie projektu suwaka. Aby to zrobić, dodamy nowy wiersz do naszej sekcji, używając następującej struktury kolumn:
rozstaw
Otwórz ustawienia wiersza i usuń wszystkie domyślne górne i dolne dopełnienie.
- Górna wyściółka: 0px
- Dolne wypełnienie: 0px
Dodaj moduł tekstu kursora do nowej kolumny wiersza
Dodaj treść
Następnie dodaj moduł tekstowy do nowej linii. Ten moduł tekstowy będzie poświęcony tworzeniu projektu przycisku kursora. Dodaj wybraną kopię w obszarze zawartości.
Kolor tła
Następnie dodaj kolor tła.
- Kolor tła: # 47669b
Ustawienia tekstu
Przejdź do karty Projekt i odpowiednio dostosuj tekst:
- Czcionka tekstu: aktor
- Grubość czcionki tekstu: pogrubiona
- Styl czcionki tekstu: wielkie litery
- Kolor tekstu: #ffffff
- Odstępy między literami w tekście: 2 piksele
- Wyrównanie tekstu: środek
zaklejania
Następnie dodaj wartość szerokości i wysokości do parametrów rozmiaru.
- Szerokość: 150px
- Wysokość: 150px
granica
Zamieniamy ten moduł w okrąg, zmieniając ustawienia obramowania.
Pole cienia
Dodamy również subtelny cień pudełka.
- Siła rozmycia cienia w polu: 0 pikseli
- Siła propagacji cienia w pudełku: 20px
- Kolor cienia: rgba (7,213,255,0.14)
Klasa CSS
Następnie nadamy naszemu modułowi klasę CSS.
Główny element CSS
Dodajemy również linie kodu CSS do głównego elementu modułu.
transition: all .1s linear; pointer-events: none; display: flex; justify-content: center; align-items: center;
Pozycja
A parametry modułu uzupełnimy zmieniając pozycję w zakładce zaawansowane:
- Pozycja: stała
- Lokalizacja: w lewym górnym rogu
- Indeks Z: 2
Dodaj moduł kodu pod modułem tekstowym
Teraz, gdy zaprojektowaliśmy nasz suwak, nadszedł czas, aby ta funkcja działała. Aby to zrobić, dodamy nowy moduł kodu tuż pod modułem tekstu kursora.
Dodaj tagi stylu i skryptu
Dodaj tagi stylu i skryptu do modułu kodu.
Dodaj kod CSS
Wstaw następujące wiersze kodu CSS między tagi stylu:
.hide-cursor {
cursor: none;
}
.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
visibility: hidden;
opacity: 0;
}
.show-cursor {
visibility: visible !important;
opacity: 1;
}
Dodaj kod JQuery
I użyj następujących wierszy kodu JQuery między tagami script:
jQuery(document).ready(function($){
var cursor = $('.cursor');
$('.image-cursor').mousemove(function(e){
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
});
$('.image-cursor').mouseleave(function() {
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
});
});
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Biuro
Aplikacje mobilne
końcowe przemyślenia
W tym samouczku pokazaliśmy, jak dodać więcej interakcji do klikalnych elementów na swojej stronie. W szczególności pokazaliśmy, jak aktywować przycisk kursora, gdy ktoś najedzie na wybrany element. To dodaje dodatkowej interakcji do projektu strony i może pomóc zwiększyć współczynniki klikalności! Udało Ci się również bezpłatnie pobrać plik JSON. 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 uzyskać więcej prezentów Divi, upewnij się Zapisz się do newslettera et Kanał Youtube Dzięki temu zawsze będziesz jedną z pierwszych osób, które poznają tę bezpłatną zawartość i będą się nią cieszyć.
[Ad_2]
