Chcesz dodać przyciski udostępniania społecznościowego w dowolnym miejscu swojej witryny WordPress? GutenKit Social Share Block pozwala dodawać atrakcyjne i interaktywne przyciski, aby połączyć wszystkie witryny społecznościowe za pomocą domyślnego edytora bloków. Dzięki temu uzyskasz sporą liczbę nowych odwiedzających z popularnych witryn.
W tej dokumentacji pokażemy Ci, jak używać wtyczki GutenKit Social Share na Twojej witrynie Gutenberg.
Krok 1: Dodaj blok udostępniania społecznościowego GutenKit #
Pierwszy krok naszej podróży obejmuje zainstalowanie wtyczki GutenKit. Następnie wykonaj następujące czynności:
- Przejdź do nowej strony lub istniejącej.
- Włącz edytor bloków i znajdź „+” ikonę u góry ekranu edytora.
- Kliknięcie spowoduje otwarcie biblioteki bloków.
- Wyszukaj GutenKit Social Share.
- Po wyświetleniu bloku kliknij go lub przeciągnij i upuść na ekranie edytora.
Krok 2: Dodaj ikonę mediów społecznościowych i tekst #
Aby dodać ikonę i tekst mediów społecznościowych, musisz zacząć od zakładki Zawartość.
W sekcji Media społecznościowe: #

- Odstęp między elementami: Użyj suwaka, aby określić odstęp między elementami społecznościowymi.
- Wyrównanie: Ustaw lokalizację ikon udostępniania w mediach społecznościowych. (Początek, Koniec, Środek, Odstęp pomiędzy)

- Dodaj media społecznościowe: Domyślnie blok GutenKit Social Share pokazuje trzy elementy mediów społecznościowych, którymi są Facebook, Twitter i Linkedin. Możesz również dodać dodatkowe elementy, klikając „+Dodaj przedmiot”. Możesz również usunąć jeden, klikając przycisk „X" przycisk.
Ponadto możesz zmienić etykietę, ikonę i styl dowolnego elementu. Kliknij dowolny element, aby wyświetlić jego ustawienia.

- Wybierz ikonę: Dodaj ikonę z biblioteki lub prześlij ją ze swojego urządzenia, aby symbolizowała Twoją witrynę w mediach społecznościowych.
- Media społecznościowe: Wybierz swój serwis społecznościowy z listy rozwijanej.
- Etykieta: Wpisz nazwę swojego serwisu społecznościowego w tym polu.
- Styl normalny:Poniższe opcje ustawień dotyczą stylu normalnego.
- Normalny kolor: Użyj selektora kolorów, aby dodać ikonę mediów społecznościowych i kolor tekstu.
- Normalny kolor tła:Nadaj kolor tła ikonie mediów społecznościowych i tekstowi.
- Kolor ramki:Dodaj kolor do obramowania mediów społecznościowych.

- Styl najechania:Wprowadzenie zmian w następujących opcjach wpłynie na stan najechania kursorem.
- Kolor najechania:Dodaj kolor do ikony i tekstu mediów społecznościowych.
- Kolor tła po najechaniu kursorem: Wybierz kolor tła dla witryny społecznościowej.
- Kolor obramowania po najechaniu kursorem: Wybierz kolor obramowania po najechaniu kursorem.

- Wybierz Styl: Wybierz spośród trzech różnych gotowych stylów. Masz możliwość pokazania tylko ikon mediów społecznościowych lub tekstu i możesz wyświetlić oba.
Krok 3: Stylizacja mediów społecznościowych #
Teraz, wykonując poniższe opcje, możesz zmienić wygląd mediów społecznościowych.
W sekcji Media społecznościowe: #

- Wyświetlacz:Jeśli chcesz zaprezentować swoje media społecznościowe, masz dwie możliwości.
- Wbudowany:Prowadź swoje media społecznościowe pojedynczo w poziomie.
- Blok:Wybranie tej opcji spowoduje wyświetlenie ikon mediów społecznościowych w pionie, jedna po drugiej.
- Typografia: Użyj tych opcji ustawień, aby zmienić typografię, taką jak rodzina czcionek, rozmiar, grubość, wysokość linii itp.
- Użyj opcji Wysokość Szerokość: Ta opcja jest domyślnie włączona. Wyłączenie jej spowoduje ukrycie następnego ustawienia „Wysokość linii”.

- Wysokość linii: Użyj suwaka, aby dostosować wysokość linii ikon społecznościowych.
- Obramowanie elementu: W tym obszarze ustawień możesz sterować grubością, kolorem i stylem obramowania.
- Promień obramowania elementu: Wprowadź wartość, aby określić stopień zaokrąglenia obramowania elementu.
- Wypełnienie elementu: Dodaj spacje poza ikonami mediów społecznościowych i tekstem.
Następne dwie opcje działają w ten sam sposób, zarówno w stanie normalnym, jak i po najechaniu kursorem.
- Pudełko Cień: Użyj tych ustawień, aby dostosować efekt animacji cienia pola wokół obszaru obramowania.
- Cień tekstu: Dodaj i kontroluj tekst cienia dla swoich mediów społecznościowych. Należy pamiętać, że ta opcja będzie wyświetlana tylko wtedy, gdy wybierzesz wyświetlanie tekstu dla swoich mediów społecznościowych z zakładki treści.
Krok 4: Ustaw zakładkę Zaawansowane #
Na karcie Ustawienia zaawansowane możesz skonfigurować układ bloku Udostępnianie społecznościowe, tło i style obramowania, a także kontrolować jego widoczność.
Układ: #

- Margines: Określ przestrzeń wokół układu blokowego. Pomaga ustawić odstęp między innym blokiem.
- Wyściółka: Wprowadź wartość, aby ustawić przestrzeń wokół bloku w jego układzie.
- Szerokość: Oprócz zachowania domyślnej szerokości układu.
- Pełna szerokość: wybranie tej opcji spowoduje, że układ będzie obejmował całą szerokość ekranu.
- W linii (automatycznie): Po zastosowaniu będzie miał taką samą szerokość jak element blokowy.
- Zwyczaj: Wybranie tej opcji spowoduje wyświetlenie suwaka umożliwiającego zdefiniowanie poziomej przestrzeni układu bloku.
- Indeks Z: Użyj suwaka, aby określić kolejność stosu bloku z innymi blokami.
Pozycja: #

W menu rozwijanym zobaczysz trzy opcje: Domyślny, Absolutny, I Naprawił.
- Absolutny: Wybranie tej opcji zapewni Ci absolutną pozycję bloku, co oznacza, że elementy będą pasować do ich pojemnika.
- Naprawił: Opcja Stała pozycja pozwoli elementowi zmieścić się w całej rzutni lub ekranie.
Obie opcje, Absolutna i Stała, mają podobne ustawienia, jak poniżej:
- Orientacja pozioma: Wybierz kierunek pozycjonowania pomiędzy lewą i prawą stroną.
- Zrównoważyć: Użyj suwaka lub wprowadź wartość ręcznie, aby dostosować poziome położenie bloku.
- Orientacja pionowa: Wybierz kierunek pozycjonowania w górę lub w dół.
- Zrównoważyć: Użyj suwaka lub wprowadź wartość ręcznie, aby dostosować pionowe położenie bloku.
Tło: #

- Tło: wybierz opcję tła pomiędzy jednolitym kolorem, gradientem lub obrazem.
W opcji Najedź:
- Obraz: Jeśli wybierzesz opcję obrazu, pojawią się następujące opcje:
- Obraz: wybierz obraz z biblioteki multimediów lub prześlij własny.
- Rozmiar obrazue: Wybierz rozmiar obrazu pomiędzy Miniaturą, Średnim, Dużym lub Pełnym.

- Pozycja: Wybierz położenie 10 różnych opcji.
- Załącznik: Określ relację stałego lub przewijanego obrazu tła z resztą ekranu przeglądarki.
- Powtarzać: wybierz opcję, aby ustawić sposób powtarzania obrazów tła.
- Rozmiar wyświetlacza: Wybierz rozmiar wyświetlacza spośród czterech różnych opcji.
- Czas trwania przejścia: Użyj suwaka, aby dostosować przejście tła ze stanu normalnego do stanu najechania.
Granica: #

- Granica: w ramach tej opcji ustawień dostępne są opcje ustawień obramowania, takie jak szerokość, styl i kolor.
- Promień granicy: Ustaw okrągłość obramowania, wprowadzając wartość.
- Pudełko Cień: Uzyskaj wszystkie ustawienia, takie jak kolor, poziomo/pionowo, rozmycie, rozproszenie i inne, aby nadać obramowaniu efekty cienia.
W opcji najechania:
- Czas trwania przejścia: Możesz dodać wartość ręcznie lub użyć suwaka, aby ustawić czas zmiany projektu obramowania w stanie najechania.
Widoczność: #

Moduł widoczności pozwala kontrolować wyświetlanie projektów bloków w zależności od typu urządzenia. Dostępne będą trzy opcje urządzeń (komputer stacjonarny, tablet, telefon komórkowy) z przyciskiem przełączania. Włącz przycisk przełączania, aby ukryć projekt blokowy tego urządzenia.
Jednak nadal możesz to zobaczyć w widoku edytora.
Zaawansowany: #

- Nazwa bloku: Nadaj nazwę, która będzie jednoznacznie identyfikowała ten blok podczas łączenia lub tworzenia skryptów stylizujących blok.
- Kotwica HTML: Dodaj adres URL, aby połączyć stronę internetową.
- Dodatkowe klasy CSS: Przypisz dodatkowe klasy CSS do bloku, co pozwoli Ci stylizować blok według własnego uznania za pomocą niestandardowego CSS.
Uwaga: Możesz dodać wiele klas oddzielnie ze spacjami.