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.
💡Szybka odpowiedź: Dodaj lub usuń puste miejsce między blokami
Możesz łatwo kontrolować odstępy między blokami WordPress, korzystając z jednej z czterech metod. Oto krótkie podsumowanie, którą wybrać:
- Użyj edytora bloków: Aby uzyskać najszybsze i najprostsze korekty, użyj wbudowanego bloku Wypełnienie (Spacer), aby dodać przestrzeń. Możesz również dostosować ustawienia marginesu i dopełnienia w panelu bocznym bloku, co jest najskuteczniejsze w nowoczesnych motywach blokowych.
- Użyj niestandardowego CSS: Aby uzyskać precyzyjne i wielokrotnego użytku zmiany, zastosuj niestandardową klasę CSS do bloku. Jest to najlepsza opcja, gdy chcesz zastosować te same zasady odstępów do wielu bloków na swojej stronie.
- Użyj wtyczki CSS: Aby uzyskać moc CSS bez pisania kodu, użyj wtyczki takiej jak CSS Hero. Zapewnia ona wizualny interfejs typu „wskaż i kliknij” do zmiany odstępów.
- Użyj konstruktora stron: Podczas tworzenia całkowicie niestandardowego układu strony, konstruktor stron taki jak SeedProd jest najlepszym wyborem. Zawiera własne kontrolki odstępów dla każdego elementu na stronie.
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 Twoimi blokami to prosty sposób na poprawę projektu Twojej witryny i doświadczenia użytkownika.
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
- Method 2: Adding or Removing Blank Space Between WordPress Blocks by Adding Custom CSS
- Metoda 3: Dodawanie lub usuwanie pustego miejsca między blokami WordPress za pomocą CSS Hero
- Metoda 4: Dodawanie lub usuwanie pustego miejsca między blokami WordPress za pomocą SeedProd
- Najczęściej zadawane pytania dotyczące odstępów między blokami
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 Strony, aby dostosować odstępy między blokami w szablonach motywu.
Sprawdź nasz przewodnik dla początkujących po edycji całych witryn WordPress, aby uzyskać więcej informacji.
Oprócz wstawiania bloków odstępów, możesz również zwiększyć margines swoich bloków, aby umieścić więcej miejsca między nimi a innymi blokami. Możesz przeglądać te opcje 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 wypełnienia (padding) a marginesu (margin) 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 zrobiłeś, zapoznaj się z naszym przewodnikiem na temat jak łatwo dodać niestandardowy CSS do swojej 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 zapoznać się z naszym przewodnikiem na temat naprawiania brakującego dostosowywacza motywu w WordPress, aby dowiedzieć się, gdzie dodać kod CSS.
Zapisywanie niestandardowego kodu CSS za pomocą wtyczki
Dodając niestandardowy kod CSS do dostosowywacza motywu WordPress, zostanie on zapisany tylko dla motywu, którego aktualnie używasz. 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 fragmentów kodu, która pozwala dodawać PHP, CSS i inne elementy do Twojej witryny WordPress bez jej psucia.
Sami korzystamy z WPCode 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. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę 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.
Aby uzyskać więcej informacji, możesz zapoznać się z naszym przewodnikiem jak łatwo dodać niestandardowy CSS do swojej witryny WordPress.
Alternatywnie możesz użyć wtyczki Simple Custom CSS. Po aktywacji 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 pustego miejsca między blokami WordPress jest użycie wtyczki WordPress do niestandardowego CSS. Pozwala to na wprowadzanie wizualnych zmian w Twoim blogu WordPress bez edycji kodu CSS.
Zalecamy użycie wtyczki CSS Hero. Pozwala ona edytować prawie każdy styl CSS na Twojej stronie WordPress bez pisania ani jednej linijki kodu.
Świetna oferta: Czytelnicy WPBeginner mogą uzyskać 40% zniżki, korzystając z naszego kodu kuponu CSS Hero.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki. Więcej szczegółów znajdziesz w naszym przewodniku dla początkujących na temat 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 administracyjnych 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.
Sami korzystaliśmy z 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 rekomendacjami najlepszych pluginów bloków Gutenberg.
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.
Kircho Svircho
Szukam sposobu na masowe zarządzanie całą domyślną przestrzenią między blokami w WordPress. Domyślna przestrzeń między akapitami jest za mała i chcę wiedzieć, jak „korzeniowo” zmienić ustawienia i uczynić ją szerszą. W moim motywie nie pojawiają się żadne ustawienia marginesów ani wymiarów.
Chciałbym zapytać, jak zrobić odstęp między akapitami taki jak u Ciebie, bez wstawiania separatorów między każdym blokiem, za każdym razem. Zajmuje mi to 10 minut na stronę i jest to irytujące.
Wsparcie WPBeginner
To have the effect across the entire site, you would want to use CSS and target the paragraphs or use the plugins to simplify the process
Admin
Jennifer Gould
Próbowałem użyć tego CSS, aby usunąć odstęp między blokami akapitów, jednak nic nie działa. Skopiowałem i wkleiłem nawet CSS bezpośrednio ze strony, a nadal nie działa. Czy ta metoda działa również w przypadku bloków akapitów, a nie bloków obrazów?
Wsparcie WPBeginner
Powinno to nadal działać z innymi blokami; jeśli nasze zalecenia nie pomagają, Twoje konkretne motyw może mieć style, które nadpisują inne style. Jeśli skontaktujesz się ze wsparciem swojego konkretnego motywu, powinni być w stanie pomóc!
Admin