Jak dodać lub usunąć puste miejsce między blokami WordPress (4 sposoby)

Dobre odstępy mogą znacząco wpłynąć na wygląd i odczucia Twoich treści. Gdy odstępy między blokami WordPress są zbyt małe lub zbyt duże, może to negatywnie wpłynąć na czytelność i sprawić, że układ będzie wyglądał na niedokończony.

Widzieliśmy, jak wielu użytkowników WordPress napotyka te same problemy z odstępami raz za razem, co ma sens, ponieważ opcje odstępów między blokami nie zawsze są oczywiste na pierwszy rzut oka.

Dobra wiadomość jest taka, że WordPress oferuje kilka sposobów na dostosowanie odstępów między blokami bez dotykania kodu.

W tym przewodniku przeprowadzimy Cię przez cztery proste metody naprawy problemów z odstępami między blokami WordPress. Te wskazówki pomogą Ci tworzyć treści, które wyglądają bardziej profesjonalnie i angażują czytelników.

Dlaczego dodawać lub usuwać pustą przestrzeń między blokami w WordPress?

Chociaż edytor bloków WordPress ułatwia tworzenie treści, możesz zauważyć, że domyślne odstępy nie zawsze są idealne.

Dostosowanie białej przestrzeni między blokami to prosty sposób na poprawę projektu i doświadczenia użytkownika Twojej witryny.

Prawidłowe kontrolowanie odstępów między blokami pomaga w:

• Stwórz profesjonalny wygląd: Pełna kontrola nad układem pozwala na stworzenie bardziej dopracowanego i niestandardowego wyglądu Twojej strony internetowej.
• Kieruj uwagę odwiedzających: Użyj przestrzeni, aby wizualnie grupować powiązane treści lub oddzielać różne sekcje, dzięki czemu układ będzie bardziej intuicyjny.
• Popraw czytelność: Podzielenie długich bloków tekstu pustą przestrzenią sprawia, że Twoje treści są mniej przytłaczające i łatwiejsze do przeczytania dla odwiedzających.

Teraz przyjrzyjmy się, jak dodać lub usunąć pustą przestrzeń między blokami WordPress na Twojej stronie internetowej.

Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

Metoda 1: Dodawanie pustego miejsca między blokami WordPress za pomocą edytora bloków

Najprostszym sposobem na dodanie pustego miejsca między blokami jest użycie edytora bloków Gutenberg. Istnieje wbudowany blok odstępów, który pozwala dodać puste miejsce za pomocą kilku kliknięć.

Aby z tego skorzystać, otwórz post lub stronę, którą chcesz edytować, i kliknij przycisk dodawania bloku „Plus”.

Następnie wyszukaj „Separator” i wybierz blok.

Spowoduje to automatyczne wstawienie separatora na stronie. 

Możesz go powiększyć lub zmniejszyć, przeciągając blok w górę lub w dół.

Po zakończeniu kliknij przycisk „Aktualizuj”, aby zapisać zmiany.

Jeśli używasz motywu blokowego, możesz również użyć Edytora Pełnej Witryny, aby dostosować odstępy między blokami w szablonach motywu.

Zapoznaj się z naszym przewodnikiem dla początkujących po Edytorze Pełnej Witryny WordPress, aby uzyskać więcej informacji.

Oprócz wstawiania bloków typu „Separator”, możesz również zwiększyć margines swoich bloków, aby umieścić więcej przestrzeni między nimi a innymi blokami. Te opcje można znaleźć w panelu bocznym Ustawień bloku.

Możesz również dostosować dopełnienie (padding) bloku. Dopełnienie to przestrzeń *wewnątrz* obramowania bloku, między obramowaniem a samą treścią.

Zmniejszenie tego zmniejszy pustą przestrzeń wewnątrz bloku, co różni się od dostosowania marginesu między blokami.

Pamiętaj, że te kontrolki marginesów i dopełnienia są najczęściej dostępne w motywach blokowych korzystających z Edytora Pełnej Witryny i mogą nie być widoczne dla wszystkich bloków podczas korzystania z motywów klasycznych.

Więcej szczegółów znajdziesz w naszym przewodniku na temat paddingu a marginesu w WordPressie.

Możesz również zapoznać się z tymi przewodnikami, aby dowiedzieć się więcej sposobów na maksymalne wykorzystanie edytora bloków:

• Jak prawidłowo używać bloku More w WordPress
• Jak dodać podział wiersza w WordPress (nowe odstępy między wierszami)
• Jak wybrać i używać zagnieżdżonych bloków w WordPress
• Jak dodać treść wielokolumnową w postach WordPress (bez HTML)

Metoda 2: Dodawanie lub usuwanie pustego miejsca między blokami WordPress przez dodanie niestandardowego CSS

Innym sposobem na dodawanie i usuwanie pustego miejsca między blokami jest dodanie niestandardowego kodu CSS do motywu.

Jeśli jeszcze tego nie robiłeś, zalecamy zapoznanie się z naszym przewodnikiem na temat łatwego dodawania niestandardowego CSS do witryny WordPress przed rozpoczęciem.

Następnie otwórz stronę lub wpis, który chcesz edytować, a następnie kliknij na blok, w którym chcesz dodać lub usunąć pustą przestrzeń.

Następnie kliknij pozycję menu „Blok” w panelu opcji po prawej stronie.

Następnie przewiń w dół do listy rozwijanej 'Zaawansowane' i kliknij ją. Spowoduje to wyświetlenie dodatkowych opcji dla tego bloku.

W polu „Dodatkowe klasy CSS” wpisz następującą nazwę klasy:

.add-remove-bottom-space

Ta akcja nadaje blokowi unikalną nazwę, pozwalając na jego docelowanie za pomocą niestandardowego CSS.

Po tym kliknij przycisk „Aktualizuj”, aby zapisać zmiany.

Następnie przejdź do Wygląd » Dostosuj, aby otworzyć narzędzie do dostosowywania motywów WordPress.

Następnie przewiń w dół i kliknij opcję menu „Dodatkowy CSS”.

Spowoduje to wyświetlenie pola, w którym możesz dodać kod CSS.

Następnie wklej następniowy fragment kodu do pola:

.add-remove-bottom-space {
 margin-bottom: 0;
}

Ten fragment kodu ustawia dolny margines na zero i usunie puste miejsce z bloku.

Zwróć uwagę na kropkę (.) przed nazwą. W CSS kropka służy do targetowania dowolnego elementu, który ma tę konkretną nazwę klasy.

Jeśli chcesz dodać odstęp na dole, po prostu zmień „0” na coś w stylu „20px”.

Po wprowadzeniu zmian upewnij się, że klikniesz przycisk „Opublikuj”, aby wprowadzić zmiany na żywo. 

Jeśli używasz motywu blokowego, możesz przeczytać nasz przewodnik na temat naprawiania brakującego narzędzia do dostosowywania motywów w WordPressie, aby dowiedzieć się, gdzie dodać kod CSS.

Zapisywanie niestandardowego kodu CSS za pomocą wtyczki

Dodając niestandardowy CSS do narzędzia do dostosowywania motywów WordPress, zostanie on zapisany tylko dla aktualnie używanego motywu. Jeśli zmienisz motyw WordPress, będziesz musiał skopiować kod CSS do swojego nowego motywu.

Jeśli chcesz, aby Twój niestandardowy CSS działał niezależnie od używanego motywu, będziesz potrzebować wtyczki.

WPCode to najlepsza wtyczka do fragmentów kodu, która pozwala dodawać PHP, CSS i inne elementy do Twojej witryny WordPress bez psucia czegokolwiek.

Używamy WPCode sami i uważamy, że jest to najłatwiejszy i najbezpieczniejszy sposób dodawania niestandardowego kodu. Aby dowiedzieć się więcej, zapoznaj się z naszą szczegółową recenzją WPCode.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie bezpłatnej wtyczki WPCode. Więcej szczegółów znajdziesz w naszym przewodniku na temat instalowania wtyczki WordPress.

Po aktywacji musisz przejść do Fragmenty kodu » + Dodaj fragment z panelu administracyjnego WordPress.

Tutaj najedź kursorem na opcję 'Dodaj własny kod (nowy fragment)' w bibliotece fragmentów kodu i kliknij przycisk 'Użyj fragmentu'.

Musisz wprowadzić nazwę dla swojego fragmentu kodu, a następnie wkleić niestandardowy kod CSS do pola „Podgląd kodu”.

Upewnij się, że wybrałeś/aś „Fragment kodu CSS” z listy rozwijanej „Typ kodu”.

Następnie wystarczy kliknąć suwak u góry, aby aktywować fragment kodu, i nacisnąć „Zapisz fragment”, aby wykonać go na Twojej stronie WordPress.

Więcej szczegółów znajdziesz w naszym przewodniku na temat łatwego dodawania niestandardowego CSS do witryny WordPress.

Alternatywnie możesz użyć wtyczki Simple Custom CSS. Po aktywacji po prostu przejdź do Wygląd » Niestandardowy CSS i dodaj swój niestandardowy kod CSS.

Po zakończeniu wystarczy kliknąć przycisk „Zaktualizuj niestandardowy CSS”, aby zapisać zmiany.

Metoda 3: Dodawanie lub usuwanie pustego miejsca między blokami WordPress za pomocą CSS Hero

Innym przyjaznym dla początkujących sposobem na dodanie lub usunięcie pustej przestrzeni między blokami WordPress jest użycie wtyczki WordPress do niestandardowego CSS. Pozwala to na wizualne zmiany w Twoim blogu WordPress bez edycji kodu CSS.

Polecamy użycie wtyczki CSS Hero. Pozwala ona edytować prawie każdy styl CSS w Twojej witrynie WordPress bez pisania ani jednej linii kodu. 

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki. Więcej szczegółów znajdziesz w naszym przewodniku dla początkujących jak zainstalować wtyczkę WordPress.

Po aktywacji musisz kliknąć przycisk „Przejdź do aktywacji produktu”, aby aktywować wtyczkę. Przycisk znajdziesz bezpośrednio nad listą zainstalowanych wtyczek.

Spowoduje to przejście do ekranu, na którym musisz wprowadzić swoją nazwę użytkownika i hasło. Następnie postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, a po weryfikacji konta zostaniesz przekierowany z powrotem do swojego pulpitu.

Następnie musisz otworzyć stronę lub wpis, który chcesz edytować, a następnie kliknąć przycisk „CSS Hero” u góry paska narzędzi administratora WordPress.

Spowoduje to otwarcie tej samej strony z uruchomionym na niej edytorem CSS Hero. Wtyczka używa edytora wizualnego, dzięki czemu będziesz mógł wprowadzać zmiany w czasie rzeczywistym.

Po kliknięciu dowolnego elementu na stronie pojawi się pasek narzędzi po lewej stronie strony, umożliwiający wprowadzanie zmian.

Aby usunąć lub dodać pustą przestrzeń między blokami, po prostu kliknij opcję „Spacings” (Odstępy), a następnie przewiń w dół do sekcji „Margin-Bottom” (Dolny margines).

Tutaj możesz przesuwać suwak w górę lub w dół, aby dodać lub usunąć puste miejsce.

Wszelkie wprowadzone zmiany automatycznie pojawią się na Twojej stronie.

Po zakończeniu wprowadzania zmian musisz kliknąć przycisk „Zapisz”, aby Twoje zmiany stały się widoczne. 

Metoda 4: Dodawanie lub usuwanie pustego miejsca między blokami WordPress za pomocą SeedProd

SeedProd to najlepszy kreator stron metodą przeciągnij i upuść, używany przez ponad 1 milion stron internetowych.

W rzeczywistości sami używaliśmy SeedProd w wielu projektach, a kilka naszych marek partnerskich stworzyło całe swoje strony internetowe za pomocą tego narzędzia. Szczegółowe informacje znajdziesz w naszej kompletnej recenzji SeedProd.

Wtyczka posiada bibliotekę ponad 300 szablonów do tworzenia niestandardowych stron 404, stron sprzedażowych, stron docelowych i wielu innych.

Możesz nawet użyć go do stworzenia niestandardowego motywu WordPress bez pisania kodu.

Dzięki kreatorowi przeciągnij i upuść masz pełną kontrolę nad wyglądem swojej witryny i możesz łatwo usuwać lub dodawać odstępy do dowolnego elementu witryny.

Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat tworzenia niestandardowej strony w WordPress.

Podczas dostosowywania strony możesz dodawać odstępy w dowolnym miejscu, używając bloku odstępu.

Po prostu przeciągnij i upuść go w dowolnym miejscu na stronie, gdzie chcesz dodać więcej miejsca między blokami.

Następnie możesz użyć suwaka, aby dostosować jego wysokość.

Możesz również kontrolować odstępy między dowolnymi blokami. Aby to zrobić, po prostu kliknij na dowolny blok, z którego chcesz dodać lub usunąć odstęp.

Spowoduje to wyświetlenie panelu opcji po lewej stronie. Następnie kliknij zakładkę „Zaawansowane”.

Następnie przewiń w dół do listy rozwijanej 'Odstępy' i kliknij ją.

Spowoduje to wyświetlenie menu, w którym możesz kontrolować „Margines”. Po prostu wprowadź liczbę w polu marginesu dolnego, aby dodać przestrzeń, lub usuń liczbę, aby usunąć istniejącą pustą przestrzeń.

Po zakończeniu wprowadzania zmian kliknij przycisk „Zapisz”.

Następnie wybierz menu rozwijane „Opublikuj”, aby wprowadzić zmiany na żywo.

Samouczek wideo

Jeśli nie preferujesz pisemnych instrukcji, obejrzyj nasz samouczek wideo.

Najczęściej zadawane pytania dotyczące odstępów między blokami

Oto kilka pytań, które nasi czytelnicy często zadają na temat dodawania lub usuwania pustej przestrzeni między blokami w WordPress:

Jaka jest różnica między marginesem a dopełnieniem w WordPressie?

Pomyśl o bloku jak o ramce na obraz. Dopełnienie to przestrzeń między obrazem a samą ramką (wewnątrz obramowania). Margines to przestrzeń na ścianie między tą ramką a innymi ramkami wiszącymi obok niej (na zewnątrz obramowania).

Jak dodać poziomy odstęp między kolumnami w WordPressie?

Powyższe metody dotyczą głównie odstępów pionowych. Aby dostosować odstępy poziome, należy użyć wbudowanego bloku Kolumny WordPress.

Po dodaniu kolumn możesz wybrać główny blok Kolumny, a w ustawieniach bloku po prawej stronie znajdziesz opcję „Odstęp między blokami”, która pozwala kontrolować odstęp między kolumnami.

Czy stracę moje zmiany w CSS, jeśli zmienię motyw WordPressa?

Tak, jeśli dodasz kod CSS bezpośrednio do personalizatora motywu (w sekcji Wygląd » Dostosuj » Dodatkowy CSS), ten kod jest powiązany z motywem. Jeśli zmienisz motyw, będziesz musiał skopiować ten kod.

Aby Twoje CSS było niezależne od motywu, zalecamy użycie WPCode do dodawania fragmentów kodu.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać lub usuwać puste miejsce między blokami WordPress. Możesz również zapoznać się z naszym przewodnikiem po rewizjach wpisów WordPress oraz naszymi ekskluzywnymi wyborami najlepszych wtyczek bloków Gutenberga.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.