Jak utworzyć (stały) lepki blok w Gutenbergu bez kodu

Szukasz sposobów na utworzenie lepkiego bloku w Gutenbergu? 🤔

Niezależnie od tego, czy chcesz utworzyć oświadczenie o partnerstwie, zaoferować rabaty, czy też zwrócić uwagę odwiedzających na ważne cechy swojego produktu – przyklejony blok może pomóc Ci w osiągnięciu tych celów.

Bloki przyklejone, zwane również blokami stałymi, pozostają widoczne na ekranie nawet wtedy, gdy użytkownik przewija stronę w dół, dzięki czemu treść, którą chcesz wyróżnić, jest zawsze widoczna.

👉 Oto przykład tego, o czym mówimy – możesz zobaczyć, jak ikony społecznościowe „utkną” w swoim miejscu nawet podczas przewijania użytkownika:

Dodanie lepkiego bloku w Gutenbergu zapewnia bezproblemową i wciągającą obsługę użytkownika, pozwalając skutecznie przekazać wiadomość i wzbudzić zainteresowanie odbiorców.

Gutenberg nie oferuje gotowego bloku od razu po wyjęciu z pudełka. Istnieją jednak narzędzia innych firm, za pomocą których możesz dodawać bloki samoprzylepne do swoich postów i stron.

W tym samouczku pokażemy, jak używać popularnej wtyczki Gutenberga o nazwie Otter Blocks, aby dodać lepki blok do swojej witryny WordPress.

Zanurzmy się w to. 🤿

Jak dodać lepki blok w edytorze Gutenberga

Aby dodać lepki blok w Edytorze Gutenberga, wykonaj następujące kroki:

• Krok 1: Zainstaluj i aktywuj wtyczkę Otter Blocks
• Krok 2: Włącz narzędzie Przekształć w przyklejony dla swojego bloku
• Krok 3: Zmień pozycję bloku lepkiego
• Krok 4: Skonfiguruj przesunięcie
• Krok 5: Włącz blokadę lepką na telefonie komórkowym
• Krok opcjonalny: wypróbuj tryb pływający
• Krok opcjonalny: Określ zachowanie bloku

Krok 1: Zainstaluj i aktywuj wtyczkę Otter Blocks 🔌

Otter Blocks to wtyczka WordPress, która rozszerza funkcjonalność Edytora Gutenberga.

Oferuje zbiór elementów składowych stron, funkcji edytora i szablonów, które pomagają ulepszyć projekt i funkcjonalność Twojej witryny.

Do najpopularniejszych bloków oferowanych przez Otter należą między innymi tabele cen, referencje, ikony społecznościowe, mapy, paski postępu, animacje, odliczanie i recenzje produktów. Oto pełna lista bloków Wydra.

Otter Blocks ma wersję bezpłatną i premium (zwaną Otter Pro).

Możesz użyć darmowej wersji, aby utworzyć podstawowy blok lepki w Gutenbergu, dzięki czemu możesz bezpłatnie skorzystać z tego samouczka.

Jednakże, aby wykonać niektóre kroki, które omówiliśmy, takie jak dodanie odległości między blokiem a ekranem, usunięcie lepkiego bloku na interfejsie, wyświetlenie lepkich bloków na telefonie komórkowym itp., potrzebujesz wersji premium wtyczki.

Otter Pro jest dostępny za roczną opłatą w wysokości 49 USD za pojedynczą witrynę internetową. Możesz go kupić tutaj. A jeśli chcesz wypróbować wtyczkę przed jej użyciem, wypróbuj tę wersję demonstracyjną.

➡️ Aby kontynuować, zainstaluj bezpłatną lub premium wersję Otter. W poniższym samouczku postaramy się zauważyć, kiedy dana funkcja wymaga opcji premium.

Krok 2: Włącz narzędzie Przekształć w element przyklejony dla swojego bloku 🚧

Otwórz stronę lub post, do którego chcesz dodać blok samoprzylepny w Edytorze Gutenberga.

Wybierz blok , który chcesz przykleić i przejdź do panelu znajdującego się po prawej stronie edytora.

Na panelu przejdź do Blokuj i przejdź do opcji Narzędzia blokowania . Rozwiń Narzędzia bloków, wybierając znak plus .

Następnie wybierz opcję Przekształć w przyklejony z menu rozwijanego.

Nowa opcja o nazwie Przyklejony pojawi się tuż pod Narzędziami blokowania. Rozwiń to i przejdź do Sticky To .

W opcji Sticky To możesz ustawić element, do którego chcesz przykleić klocek. Istnieją cztery opcje:

1. Blok na najwyższym poziomie
2. Sekcja
3. Blok rodzicielski
4. Ekran

Aby zrozumieć te opcje i wybrać tę, która pasuje do Twojego przyklejonego posta, otwórz Przegląd dokumentu w Edytorze Gutenberga i spójrz na bloki otaczające Twój przyklejony post.

Blok znajdujący się najwyżej to blok najwyższego poziomu. Wybierając blok najwyższego poziomu , sprawisz, że Twój lepki blok zostanie przymocowany do bloku znajdującego się najwyżej . W naszym przypadku jest to blok Group na obrazku poniżej.

Następnie wybranie opcji Sekcja sprawi, że blok przyklejony zostanie przymocowany do bloku sekcji, a wybranie bloku nadrzędnego sprawi, że blok przyklejony zostanie przymocowany do bloku tuż nad blokiem przyklejonym .

W naszym przypadku blokiem nadrzędnym jest blok kolumnowy sekcji. Zobacz obrazek poniżej.

Na koniec wybranie opcji Ekran poinformuje edytora, aby zignorował wszystkie bloki i po prostu przykleił post na górze ekranu użytkownika .

Pozycja lepkiego bloku jest domyślnie ustawiona na górę. Aby dowiedzieć się jak zmienić jego położenie przejdź do kolejnego kroku.

Krok 3: Zmień pozycję bloku lepkiego 🚩

Aby zmienić pozycję bloku przyklejonego, wróć do prawego panelu i poszukaj opcji Pozycja tuż pod opcją Przyklej do.

Możesz umieścić przyklejony blok na górze lub na dole ekranu. Dolna pozycja jest dostępna tylko dla użytkowników Otter Pro .

Oto jak blok wygląda na jednej z naszych stron demonstracyjnych:

Krok 4: Skonfiguruj przesunięcie ⚙️

Po ustawieniu położenia bloku przyklejanego spróbuj wyświetlić jego podgląd. Jeśli blok wydaje się zbyt daleko lub blisko ekranu, użyj opcji Przesunięcie , aby zwiększyć lub zmniejszyć odległość między lepkim blokiem a ekranem.

Krok 5: Włącz blokadę lepką na telefonie komórkowym 📱

Domyślnie blok przyklejony pojawia się tylko na komputerach stacjonarnych. Jeśli chcesz włączyć tę funkcję na urządzeniu mobilnym, po prostu włącz opcję Włącz na urządzeniu mobilnym .

Nawiasem mówiąc, dostęp do opcji mobilnej mają tylko użytkownicy Otter Pro .

Krok opcjonalny: wypróbuj tryb pływający 🏄

Blok przyklejany można ustawić tak, aby unosił się wzdłuż ekranu, gdy użytkownicy będą przewijać stronę. To świetny sposób na przyciągnięcie uwagi użytkownika i skierowanie go na przyklejony blok.

Tylko użytkownicy Otter Pro mogą korzystać z trybu float i można go zastosować tylko do bloku najwyższego poziomu , którym w naszym przypadku jest blok grupowy.

Gdy tylko przełączysz tryb pływający, zostaniesz poproszony o zdefiniowanie szerokości bloku, boku i przesunięcia bocznego .

Szerokość odnosi się oczywiście do szerokości bloku, a bok pomaga określić położenie bloku (lewy lub prawy) na ekranie. Przesunięcie odnosi się do odległości pomiędzy przyklejonym blokiem a wybraną stroną .

Zalecamy obejrzenie podglądu strony po skonfigurowaniu trybu pływającego i dokonaniu niezbędnych korekt.

Krok opcjonalny: Określ zachowanie bloku 👨🏽‍💼

Korzystając z wtyczki Otter Block, możesz utworzyć wiele lepkich bloków na tej samej stronie. Czasami te bloki mogą się ze sobą zderzać. Możesz określić, jak blok przyklejany będzie reagował podczas kolizji, korzystając z opcji Zachowanie .

Możesz ustawić zachowanie na zwijanie , zanikanie lub układanie w stosy .

Wybranie zwinięcia sprawi, że lepkie bloki będą się zwijać jeden w drugi podczas zderzenia, w następujący sposób:

Wybranie zanikania spowoduje zanikanie lub znikanie jednego bloku w drugim .

Na koniec wybranie opcji stos spowoduje ułożenie bloku na innych lepkich blokach, z którymi się zderza, jak pokazano na poniższym gifie.

Zarówno zanikanie, jak i układanie są dostępne tylko dla użytkowników Otter Pro .

Otóż ​​to. Dodałeś teraz lepki blok w Gutenbergu. 🤩

Stwórz swój pierwszy lepki blok w Gutenbergu 🧱

Dodanie stałego lub lepkiego bloku w Gutenbergu to świetny sposób na zwrócenie uwagi odwiedzających na ważne części Twojej witryny WordPress.

Ponieważ Gutenberg nie oferuje domyślnego bloku trwałego, musisz użyć wtyczki innej firmy, aby dodać tę funkcjonalność do swojej witryny.

Chociaż istnieje kilka wtyczek blokujących, Otter Blocks jest najłatwiejszą i najbardziej przyjazną dla użytkownika wtyczką blokującą.

Ma wersję bezpłatną i premium. W wersji darmowej można utworzyć lepki blok, ale niektóre zaawansowane ustawienia, takie jak zamocowanie bloku na dole ekranu lub włączenie blokady na urządzeniu mobilnym, można uzyskać za pomocą wersji premium wtyczki.

👉 Aby uruchomić lepki blok na swojej stronie za pomocą wtyczki Otter Blocks, wykonaj poniższe czynności:

Jeśli masz jakieś pytania dotyczące tworzenia lepkiego bloku w Gutenbergu, daj nam znać w sekcji komentarzy poniżej .