Czy chcesz, aby Twoje ikony mediów społecznościowych były lepkie dzięki Divi?
Dzięki wbudowanym „przyklejonym” opcjom Divi możesz łatwo zaprojektować lepki moduł „Śledź w mediach społecznościowych”, który utrzyma te ikony mediów społecznościowych z przodu i na środku, gdy użytkownik przewinie stronę w dół.
Dodatkowo, dodając niestandardową stylizację do modułu w stanie Sticky, możemy tworzyć unikalne przejścia projektowe podczas przełączania do stanu Sticky podczas przewijania.
Jeśli więc szukasz pełnej kontroli nad projektem przycisku w mediach społecznościowych, ten samouczek jest dla Ciebie!
badanie
Oto krótki przegląd wyniku, który uzyskamy w tym samouczku.
Utwórz nową stronę za pomocą "Divi Builder"
Z pulpitu WordPress przejdź do „Strony > Dodaj nowy”
Nadaj mu tytuł, który ma dla Ciebie sens, a następnie kliknij „Użyj DiviBuilder”
W tym samouczku użyjemy predefiniowanego układu. Aby to zrobić, kliknij „Przeglądaj układy”
Znajdź i wybierz układ "Projektant mody"
Wybierz układ "Lądowanie" następnie kliknij „Użyj tego układu”
Projekt modułu „Social Media Follow” w Divi
Utworzenie sekcji
Dodaj nową zwykłą sekcję do układu.
Następnie przenieś nową sekcję na górę strony (lub gdziekolwiek chcesz dodać linki do mediów społecznościowych).
Otwórz ustawienia sekcji i zaktualizuj kolor tła, aby pasował do układu w następujący sposób:
- Kolor tła: #fff9f2
Pod zakładką Wnętrze, rozwiń opcję Odstępy i zmodyfikuj następujące parametry:
- Dopełnienie (góra i dół): 10px
Utworzenie linii
Wewnątrz sekcji dodaj wiersz do kolumny.
Otwórz ustawienia linii, rozwiń opcję Odstępy i zmień ustawienia w następujący sposób:
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
Kontynuuj, przewijając w dół opcję Rozstaw
- Dopełnienie (góra i dół): 0px
Stworzenie lepkiego modułu „Śledź w mediach społecznościowych”
Po umieszczeniu sekcji i linii dodaj nowy moduł „Śledź media społecznościowe” na linii.
Aktualizacja ustawień modułu
Otwórz ustawienia modułu „Śledź w mediach społecznościowych”.
Pierwszą rzeczą, którą musimy zrobić, to dodać lepką pozycję do modułu.
Pod zakładką Zaawansowane, rozwiń opcję Przewiń efekty i zaktualizuj następujące elementy:
- Lepka pozycja: trzymaj się u góry
Gdy pozycja jest w stanie przyklejenia, będziesz mógł wybrać styl modułu w stanie przyklejenia (podobnie jak w stanie najechania). Można to zrobić, najeżdżając kursorem na opcję i klikając ikonę pinezki.
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Moduł wyrównania: Środek
- Kolor ikony: #000000 (komputer), #ffffff (najechanie), #ffffff (przyklejony)
- Szerokość: 100%
- Maksymalna szerokość: 100%
- Padding: 20px (góra), 12px (dół), 10px (lewy i prawy)
Ustawienia mediów społecznościowych
Gdy ustawienia modułu są gotowe, możemy teraz skupić się na stylizacji poszczególnych ikon mediów społecznościowych.
Aby to zrobić, najpierw dostosujemy ikonę sieci społecznościowej. Następnie zduplikujemy sieć społecznościową, aby stworzyć pozostałe.
Pod zakładką powinieneś mieć już dwie sieci społecznościowe treść domyślnie. Usuń jeden i kliknij, aby edytować pozostały.
W ustawieniach sieci społecznościowej wybierz sieć społecznościową i zaktualizuj kolory tła dla stanów pulpitu, najechania i przyklejenia.
- Sieć społeczna : TikTok (lub cokolwiek chcesz)
- Tło: przezroczyste (Desktop), #fe2c55 (Hover), #000000 (Sticky)
SZTUCZKA: Kolor tła zmieni się automatycznie, aby pasował do marki mediów społecznościowych. Możesz skopiować ten kolor i dodać go jako kolor tła stanu najechania ikony. Spowoduje to wyświetlenie domyślnego koloru tła sieci społecznościowej po najechaniu na ikonę.
Możesz teraz przełączać się między kartami, aby zobaczyć kolor tła dla wszystkich trzech stanów (pulpit, najechanie i przyklejenie).
Następnie nadajmy ikonie ładny owalny kształt i obramowanie, aby lepiej pasowały do układu. Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Zaokrąglone rogi: 50%
- Szerokość obramowania: 1px
- Kolor obramowania: #000000 (pulpit), przezroczysty (najechanie)
Obecnie ikona ma kształt koła. Aby uzyskać bardziej owalny kształt, zmienimy ustawienia odstępów w następujący sposób:
- Margines (lewy i prawy): 15px (komputer), 0px (przyklejony), 0px (telefon)
- Dopełnienie (lewy i prawy): 16px (komputer), 14px (tablet), 0px (telefon)
Zduplikowana sieć społecznościowa
Teraz, gdy zakończyliśmy projektowanie pierwszej sieci społecznościowej, możemy powielić ikonę, aby tworzyć kolejne.
Aby to zrobić, otwórz ustawienia modułu Media społecznościoweObserwuj i kliknij ikonę duplikatu. W tym przykładzie utwórzmy jeszcze 4.
Teraz wszystko, co musimy zrobić, to zaktualizować każdą z nowych sieci społecznościowych. Ponieważ zmieni to kolor tła, będziesz musiał również zaktualizować kolor tła dla każdego.
Aby to zrobić, otwórz ustawienia drugiej sieci społecznościowej i zaktualizuj następujące elementy:
- Sieć społecznościowa: Facebook
- Tło: przezroczyste (Desktop), #3b5998 (Hover)
Kontynuuj ten sam proces, aby zaktualizować pozostałe sieci społecznościowe.
Ostateczny wynik
Zobaczmy teraz wynik uzyskany na różnych rozmiarach ekranu.
Pobierz DIVI teraz !!!
Pobierz DIVI teraz !!!
Wnioski
Przyciski mediów społecznościowych są prawie zawsze kluczową funkcją na Witryna internetowa. Są jednym z głównych sposobów łączenia kanałów mediów społecznościowych z: Witryna internetowa. Dlatego moduł „Śledź w mediach społecznościowych” of Divi zawiera wszystkie ikony sieciowe i opcje projektowe, których potrzebujesz, aby stworzyć idealne rozwiązanie dla swojej witryny.
Mamy nadzieję, że ten samouczek będzie przydatny w kolejnych projektach Divi. Jeśli chcesz dowiedzieć się więcej o Divi, nie wahaj się zajrzeć do naszego katalogu Samouczki Divi. Możesz również skonsultować Jak stworzyć stronę Blog z modułem Divi Blog
Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale tymczasem, udostępnij ten artykuł w różnych sieciach społecznościowych.
...
