10 pomocnych wskazówek i wskazówek dla redaktora WordPress Gutenberg

Redaktor Gutenberg zmienił sposób, w jaki ludzie używają WordPress. Jest bardziej wizualny, oparty na blokach i elastyczny niż stary klasyczny edytor. Ale jeśli jesteś w tym nowy, a nawet jeśli używasz go przez jakiś czas, niektóre rzeczy mogą wydawać się nieco trudne.

Dobra wiadomość? Istnieje mnóstwo pomocnych wskazówek i sztuczek, które mogą sprawić, że wszystko jest szybsze, łatwiejsze i bardziej zabawne.

W tym poście dzielimy 10 praktycznych wskazówek Gutenberga. Pomogą one tworzyć lepsze treści i zrobić więcej bez zwykłej frustracji.

Ewolucja redaktora WordPress Gutenberg

Gutenberg został po raz pierwszy wprowadzony w WordPress 5.0 w grudniu 2018 r. Zastąpił klasyczny redaktor, który istnieje od lat. Główną ideą Gutenberga było zapewnienie użytkownikom większej kontroli nad treściami za pomocą systemu opartego na blokach.

Początkowo wielu użytkowników nie było pewnych co do zmiany. Interfejs wydawał się inaczej. Trzeba było się przyzwyczaić. Ale z czasem Gutenberg bardzo się poprawił. Stało się szybsze, bardziej stabilne i bardziej elastyczne.

Z każdą aktualizacją WordPress Gutenberg zdobył nowe funkcje. Możesz teraz zbudować całe układy strony z blokami. Możesz ponownie wykorzystać niestandardowe bloki. Możesz nawet projektować nagłówki, stopki i szablony za pomocą edytora witryny (dla motywów blokowych).

Dzisiaj Gutenberg nie jest tylko edytorem treści. Staje się narzędziem do edycji na pełnym miejscu . I z każdym wydaniem jest coraz lepsze.

10 pomocnych wskazówek i wskazówek dla redaktora WordPress Gutenberg

Gutenberg oferuje znacznie więcej niż podstawowe bloki treści. Po nauce kilku inteligentnych wskazówek możesz pracować szybciej i tworzyć lepiej wyglądające strony bez dotykania żadnego kodu.

Oto szybka lista pomocnych sztuczek, które mogą wyrównać Twoje doświadczenie Gutenberga:

1. Użyj poleceń Slash, aby szybko wstawić bloki
2. Zmień dowolny blok w blok wielokrotnego użytku
3. Przeciągnij i upuść bloki, aby zmienić zmianę zawartości
4. Użyj widoku listy, aby ułatwić nawigację blokową
5. Bloki grupowe, aby je poruszyć lub stylizować razem
6. Blokuje bloki, aby zapobiec przypadkowym zmianom
7. Użyj skrótów klawiatury, aby zaoszczędzić czas
8. Użyj wzorów do gotowych układów
9. Kopiuj i wklej bloki między stronami
10. Dodaj niestandardowe CSS do określonych bloków

Teraz przejdźmy do szczegółów!

01. Użyj poleceń Slash, aby szybko wstawić bloki

Załóżmy, że piszesz post na blogu i chcesz dodać obraz zaraz po akapicie. Przesuwasz kursor w dół, naciśnij klawisz Enter, a następnie… Sięgasz po mysz, kliknij ikonę Little Plus, przewiń opcje bloków, a na koniec wybierz blok obrazu. Brzmi znajomo?

Teraz uczyńmy to mądrzejsze.

Zamiast całego kliknięcia, po prostu wpisz cięcie do przodu ( /) zaraz po trafieniu. W momencie, gdy to zrobisz, pojawia się lista bloków. Wpisz /image i naciśnij ponownie Enter. Zrobione. Właśnie wstawiłeś blok obrazu, nawet nie dotykając myszy.

Ta sztuczka nie dotyczy tylko zdjęć. Spróbuj /heading , /quote , /table , a nawet /columns . Gdy się do tego przyzwyczaisz, poczujesz się, jakbyś wpisywał polecenia w narzędziu do pisania doładowania.

Jest szybki, gładki i utrzymuje przepływ pisania przy życiu. Nigdy więcej zerwania. Po prostu wpisz i zbuduj, jak idziesz.

02. Zamień dowolny blok w blok wielokrotnego użytku

Czy pisasz kiedyś wezwanie do działania lub rejestrację biuletynu, które chcesz ponownie użyć w wielu postach? Kopiowanie go za każdym razem nie jest idealne. Poprawisz jeden, zapomnij zaktualizować inny, a boom - Twoja strona kończy się pięcioma różnymi wersjami tego samego.

Oto, gdzie przydają się bloki wielokrotnego użytku.

Załóżmy, że zaprojektowałeś idealną sekcję CTA. Może to nagłówek, krótkie zdanie i przycisk. Wybierz wszystkie te bloki, kliknij menu trzy kropki (⋮) i wybierz „Dodaj do bloków wielokrotnego użytku”. Podaj mu nazwę „Post Fokeer CTA” i zapisz.

Teraz, za każdym razem, gdy piszesz nowy post, po prostu wyszukaj ten blok wielokrotnego użytku. Włóż go jednym kliknięciem. A oto najlepsza część - jeśli kiedykolwiek aktualizujesz ten blok, zmienia się wszędzie, gdzie go użyłeś.

Nigdy więcej niespójności. Nigdy więcej zmarnowanego czasu.

To tak, jakby mieć własny niestandardowy szablon, gotowy, kiedy tylko go potrzebujesz.

03. Przeciągnij i upuść bloki, aby zmienić zmianę zawartości

Czasami twoja treść po prostu nie przepływa tak, jak myślałeś.

Może ten obraz wygląda lepiej powyżej tekstu. Może cytat wydaje się mocniejszy pod koniec. Przegrupowanie zawartości w Gutenbergu jest tak proste, jak przeciąganie i upuszczanie bloków.

Oto jak to działa.

Unosić się na dowolnym bloku. Po lewej stronie zobaczysz sześci kropki. Chwyć go i przeciągnij blok gdziekolwiek chcesz. Chcesz przenieść pełną sekcję wykonaną z wielu bloków? Grupuj je najpierw, a następnie przeciągnij całą grupę jednym gładkim ruchem.

Daje to pełną kontrolę nad układem - bez cięcia, wklejania lub radzenia sobie z dowolnym niechlujnym kodem.

Wydaje się, że praca z blokami składowymi. Poruszaj rzeczy, aż wszystko pasuje dobrze.

Prosty. Wizualny. Natychmiastowy.

04. Użyj widoku listy, aby ułatwić nawigację blokową

Czy kiedykolwiek budowałeś długi post na blogu z mnóstwem obrazów, tekstu, przycisków i może kilku kolumn? W pewnym momencie przewijanie w górę i w dół, aby znaleźć określony blok, zamienia się w ból głowy.

W tym miejscu widok listy zapisuje dzień.

Kliknij małą ikonę z trzema stosami w lewym górnym rogu edytora. To otwiera panel pokazujący każdy blok w twoim poście w kolejności. Zobaczysz czysty, strukturalny kontur - podobnie jak spis treści dla bloków treści.

Możesz kliknąć dowolny blok z listy, aby przejść do niego. Możesz także przeciągnąć i upuszczać bloki bezpośrednio z widoku listy. Chcesz wybrać blok, który znajduje się w grupie lub kolumnie? Widok listy pozwala go natychmiast znaleźć, nie ma więcej polowania.

Jest to szczególnie przydatne podczas pracy ze złożonymi układami lub zagnieżdżonymi blokami.

05. Bloki grupowe, aby je poruszyć lub stylizować razem

Wyobraź sobie, że zbudowałeś sekcję z nagłówkiem, akapitem, przyciskiem i może kolorem tła. Wygląda świetnie. Ale teraz chcesz przenieść wszystko na inne miejsce na stronie. Jeden blok na raz? Nie. O wiele za wolne.

Po prostu grupuj je.

Wybierz wszystkie bloki, które chcesz zachować razem. Następnie kliknij menu trzy kropki i wybierz „Grupa”. Teraz te bloki są owinięte w jednym pojemniku.

Możesz je przesunąć jako jednostkę. Dodaj tło do grupy. Dostosuj wyściółkę. Zmień wyrównanie. Nawet zduplikuj całą sekcję jednym kliknięciem.

Grupy sprawiają, że złożone układy są proste. Utrzymują także zorganizowane rzeczy, zwłaszcza gdy pracujesz nad stronami docelowymi lub niestandardowymi sekcjami.

06. Bloki blokady, aby zapobiec przypadkowym zmianom

Masz swój projekt tak, jak chcesz. Wszystko jest idealnie ustawione. Ale potem, podczas edycji, przypadkowo usuwasz blok lub przesuwasz coś nie na miejscu. Irytujące, prawda?

Oto poprawka: Zamknij swoje bloki .

Kliknij dowolny blok, otwórz ustawienia (menu trzy kropki) i wybierz „Zamknij”. Możesz zapobiec ruchowi, zapobiegania usuwaniu lub obu. W ten sposób nikt, w tym ty, nie może go zepsuć bez odblokowania go najpierw.

Jest to bardzo przydatne, gdy pracujesz z układami wielokrotnego użytku i wspólnymi stronami lub po prostu chcesz chronić własną ciężką pracę.

07. Użyj skrótów klawiatury, aby zaoszczędzić czas

Kliknięcie wokół działa, ale skróty klawiatury? To wydajność następnego poziomu.

Zamiast poruszać myszą co kilka sekund, naucz się kilku szybkich kombinacji, a będziesz latał przez treść. Na przykład:

• Ctrl + Shift + D (CMD na Mac): Duplikuj blok
• Ctrl + alt + t: wstaw blok powyżej
• Ctrl + alt + y: wstaw blok poniżej
• Shift + Alt + Z: Usuń blok
• / (Slash do przodu): Natychmiast otwórz wsterter blokowy

Jest ich więcej, ale nawet kilka może zaoszczędzić minuty, zwłaszcza jeśli regularnie budujesz długie posty lub strony.

To jak znajomość tajnych kodów. A kiedy twoje palce je pamiętają, zastanawiasz się, jak kiedykolwiek pracowałeś bez nich.

08. Użyj wzorów do gotowych układów

Projektowanie strony od zera może wydawać się przytłaczające. Wiesz, czego chcesz, ale dotarcie tam blokiem Block wymaga czasu. W tym miejscu pojawiają się wzorce .

Wzory to wstępnie zaprojektowane układy bloków. WordPress domyślnie zawiera grupę - jak sekcje bohaterów, referencje, CTA i wiele innych. Po prostu wybierzesz jeden i upuścisz go na swoją stronę. Zrobione.

Kliknij ikonę Plus, aby dodać nowy blok. Następnie przełącz na kartę Wzory . Znajdziesz kategorie takie jak tekst, obrazy, kolumny, nagłówki - nazywasz to. Wybierz jeden, a cały układ pojawia się natychmiast.

Możesz edytować tekst, wymienić obrazy i styl dostosowywania. Ale struktura już tam jest.

To tak, jakby mieć projektantkę z zestawem startowym. Świetnie wyglądające sekcje. Bez stresu. Brak pustego lęku strony.

09. Kopiuj i wklej bloki między stronami

Zbudował coś fajnego na jednej stronie i chcesz tego samego na innej? Nie zaczynaj od zera. Po prostu skopiuj i wklej bloki.

To jest łatwiejsze niż myślisz.

Kliknij blok (lub grupę bloków), a następnie naciśnij Ctrl + C (lub CMD + C na Mac). Przejdź na drugą stronę lub post. Kliknij, gdzie chcesz, i naciśnij Ctrl + V. BOOM - pojawia się wszystko.

Wszystkie formatowanie, style, guziki, obrazy - nadchodzi wszystko.

I tak, działa nawet na zakładkach przeglądarki. Możesz więc otworzyć dwa posty obok siebie i przesuwać zawartość między nimi w kilka sekund.

10. Dodaj niestandardowe CSS do określonych bloków

Czasami wbudowane style po prostu go nie przecinają. Chcesz czegoś bardziej wyjątkowego. W tym miejscu wchodzi niestandardowe CSS .

Gutenberg pozwala zastosować niestandardowe CSS do poszczególnych bloków, abyś mógł wyróżniać określone części treści bez wpływu na całą stronę.

Oto jak to zrobić:

• Wybierz blok, który chcesz dostosować.
• W ustawieniach blokowych po prawej stronie znajdź sekcję zaawansowaną .
• W dodatkowej klasie CSS (ES) dodaj niestandardową nazwę klasy (np. my-custom-style ).
• Następnie przejdź do WordPress Customizer lub niestandardowej sekcji CSS w motywie i dodaj style za pomocą tej klasy (np .my-custom-style { color: red; }

W ten sposób nie bawicie się globalnymi stylami, ale raczej dostosowujesz go tylko do tego bloku.

Jest idealny, gdy chcesz, aby określony przycisk, nagłówek lub sekcja miała inny wygląd bez wpływu na resztę treści.

Wniosek

Dzięki tym wskazówkom i sztuczkom jesteś na dobrej drodze do opanowania edytora WordPress Gutenberg. Od przyspieszenia przepływu pracy za pomocą poleceń Slash po łatwe dodawanie niestandardowych stylów, Gutenberg oferuje mnóstwo elastyczności dla twórców treści.

Pamiętaj, że kluczem jest eksperymentowanie i znalezienie narzędzi, które najlepiej działają dla Twojego stylu. Niezależnie od tego, czy tworzysz proste posty, czy złożone układy, te funkcje pomogą Ci zaoszczędzić czas, pozostać zorganizowanym i dodać osobisty akcent do Twojej witryny.

Jeśli chcesz porównać Gutenberga z Elementor, możesz sprawdzić nasz post na blogu na temat Elementor vs Gutenberg, aby wiedzieć, kto prowadzi.

Chcesz udostępnić swoją opinię związaną z tym postem na blogu? Zrób to za pomocą poniższego pola komentarza. Chcielibyśmy poznać twoją opinię. Dbać o siebie!