Jak zaprojektować wyskakujący pasek przycisków śledzenia w mediach społecznościowych na szablonie strony w Divi

Przyciski „Śledź w mediach społecznościowych” nadal są popularnym dodatkiem do każdej witryny. Firmy i osoby prywatne używają tych linków do przekierowywania użytkowników na swoje strony w mediach społecznościowych w nadziei, że odwiedzający będą je obserwować lub subskrybować ich kanał. Zwykle widzisz te przyciski na stronie kontaktowej, pasku bocznym lub w stopce witryny.

W tym samouczku pokażemy, jak zaprojektować wyskakujący pasek przycisków śledzenia mediów społecznościowych do szablonu strony w Divi. Dzięki temu przyciski śledzące w mediach społecznościowych będą bardziej widoczne w Twojej witrynie bez rozpraszania uwagi. Dodatkowo, dzięki Divi's Theme Builder, z łatwością utworzysz szablon strony, który zawiera te przyciski dla dowolnych (lub wszystkich) stron w Twojej witrynie.

Wskoczmy i zacznijmy!

zapowiedź

Oto krótkie spojrzenie na przyciski śledzenia mediów społecznościowych utworzone w tym samouczku.

Pobierz szablon strony Pop Out Social Media Follow Buttons Bar ZA DARMO

Aby położyć swoje ręce na szablonie paska przycisków śledzenia mediów społecznościowych z tego samouczka, najpierw musisz go pobrać 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 już jesteś 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!

Aby zaimportować układ do swojej strony, po prostu rozpakuj plik zip i dodaj jeden z plików json do Divi Theme Builder za pomocą opcji Theme Builder Portability.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz zainstalować i aktywować motyw Divi. Upewnij się, że masz najnowszą wersję Divi.

Będziesz także potrzebować co najmniej jednej strony utworzonej za pomocą Divi Builder do celów testowych, aby przypisać nowy szablon do tej strony, aby wyświetlić wynik.

Po tym jesteś gotowy do pracy.

Tworzenie wyskakującego paska przycisków śledzenia w mediach społecznościowych dla szablonu strony w Divi

Tworzenie nowego szablonu

Z pulpitu nawigacyjnego WordPress przejdź do Divi> Kreator motywów. Następnie kliknij pole „Dodaj nowy szablon”, aby utworzyć nowy szablon.

Przypisz szablon do stron, na których ma być wyświetlany pasek promocyjny.

W nowym szablonie kliknij obszar „Dodaj niestandardową treść”, a następnie wybierz „Zbuduj niestandardową treść”.

Następnie wybierz opcję „Buduj od podstaw”.

Tworzenie paska przycisków śledzenia w mediach społecznościowych

Utwórz nowy wiersz

Na początek dodajmy do szablonu wiersz z jedną kolumną.

Dodaj moduł przycisków śledzenia mediów społecznościowych

W jednokolumnowym rzędzie dodaj moduł śledzący w mediach społecznościowych.

Dodaj sieci społecznościowe

W ustawieniach śledzenia mediów społecznościowych dodaj wszystkie sieci społecznościowe, które chcesz wyświetlić. Aby dodać nową sieć, kliknij szarą ikonę plusa Dodaj nową sieć społecznościową, a następnie wybierz sieć z listy.

Będziesz także musiał dodać adres URL linku do strony mediów społecznościowych, na którą chcesz przekierować odwiedzających. Aby to zrobić, kliknij ikonę ustawień w sieci społecznościowej i zaktualizuj adres URL linku do konta.

Dodaj moduł przycisku

Po zakończeniu tworzenia sieci modułów śledzących w mediach społecznościowych jesteśmy gotowi do dodania modułu przycisków. Ten przycisk będzie tym, nad którym użytkownik najedzie kursorem, aby wyświetlić pasek wyskakujący. Śmiało i dodaj moduł przycisku, a następnie przeciągnij go nad moduł śledzenia w mediach społecznościowych.

Zawartość przycisku

Następnie zaktualizuj zawartość przycisku w następujący sposób:

• Tekst przycisku: Obserwuj
• URL linku przycisku: #

Style i pozycjonowanie przycisków

Następnie zaktualizuj ustawienia projektu przycisku w następujący sposób:

• Rozmiar tekstu przycisku: 16px
• Kolor tekstu przycisku:
• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: 1px
• Czcionka przycisku: Montserrat
• Czcionka przycisku Waga: pogrubiona
• Ikona przycisku: strzałka w prawo (patrz zrzut ekranu)
• Margines: pozostało 100%
• Wypełnienie: 100px dół

Następnie dodaj następujący niestandardowy kod CSS do elementu głównego:

position: absolute;

Ustawienia wiersza

Gdy przycisk jest stylizowany i gotowy do użycia, zaktualizuj ustawienia wiersza w następujący sposób:

• Kolor tła: #ffffff
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 64px
• Padding: 24px góra, 16px dół, 16px lewo

Cień pola wiersza

• Cień pudełka: patrz zrzut ekranu
• Siła rozmycia cieni w pudełku: 0px
• Siła rozmycia cieni w pudełku: 30px
• Kolor cienia (pulpit): przezroczysty
• Kolor cienia (najechanie): rgba(0,0,0,0.2)

Pozycjonowanie rzędu

Następnie dodaj następujący niestandardowy kod CSS do głównego elementu wiersza:

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

Spowoduje to umieszczenie wiersza w stałej pozycji w jednej trzeciej odległości od góry przeglądarki.

Wyskakuj po najechaniu na efekt z niestandardowymi marginesami

Teraz dodaj następujące wartości marginesów, aby dodać funkcję wyskakującego okienka po najechaniu kursorem.

• Margines (komputer): pozostało -64px
• Margines (najechanie): pozostało 0 pikseli

To zajmuje się paskiem przycisków śledzenia mediów społecznościowych. Ale nadal musimy dokończyć szablon, tworząc niezbędny moduł treści posta.

Dodawanie modułu treści posta do szablonu

W tym momencie pasek przycisków śledzenia mediów społecznościowych jest gotowy do pracy. Ale ponieważ jest to szablon, musimy upewnić się i dodać moduł treści posta, aby wyświetlać zawartość stron przy użyciu tego szablonu.

Dodaj nowy wiersz z modułem treści posta

Pod wierszem zawierającym pasek przycisków śledzenia w mediach społecznościowych dodaj nowy wiersz z jedną kolumną.

Następnie dodaj moduł treści posta do wiersza.

Obecnie moduł treści posta będzie ograniczony do domyślnej szerokości wiersza nadrzędnego. Musimy zmienić szerokość i dopełnienie wiersza tak, aby obejmował całą szerokość przeglądarki bez żadnych przerw. Jest to ważne, ponieważ moduł treści postu określa obszar, w którym musisz zbudować stronę za pomocą Divi Builder.

Zaktualizuj następujące elementy:

• Szerokość: 100%
• Maksymalna szerokość: 100%
• Padding: 0px na górze, 0px na dole

Teraz zaktualizuj ustawienia sekcji w następujący sposób:

• Padding: 0px na górze, 0px na dole

O to chodzi. Teraz upewnij się i zapisz układ przed wyjściem z edytora. Następnie zapisz zmiany również dla konstruktora motywów.

Ostateczny wynik

Aby zobaczyć ostateczne wyniki, odwiedź stronę, do której przypisany jest szablon. Oto, jak będzie wyglądał pasek przycisków śledzenia w mediach społecznościowych.

Końcowe przemyślenia

Ten pasek przycisków śledzenia mediów społecznościowych z pewnością pomoże wysunąć te ważne sieci społecznościowe na pierwszy plan. Funkcja wyskakującego okienka sprawi, że ikony nie będą rozpraszać użytkowników. Możesz dodać pasek do dowolnego szablonu strony za pomocą Kreatora motywów. Mam nadzieję, że będzie to świetny dodatek do Twojego następnego projektu!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!