Jak dodać lub usuwać puste miejsca między blokami WordPress (4 sposoby)

Czy chcesz dodać lub usuwać puste miejsca między blokami WordPress?

Dodawanie lub usuwanie pustej przestrzeni między blokami WordPress daje ci większą kontrolę nad wyglądem twojej witryny WordPress.

W tym artykule pokażemy, jak krok po kroku dodawać lub usuwać puste miejsca między blokami WordPress.

Dlaczego warto dodawać lub usuwać puste miejsca między blokami WordPressa?

WordPress ułatwia tworzenie własnych stron i wpisów dzięki wbudowanemu edytorowi bloków WordPress.

Możesz jednak zauważyć, że po dodaniu niektórych bloków odstępy są zbyt duże lub zbyt małe. Dodając lub usuwając puste miejsca między twoimi blokami WordPress, możesz tworzyć własne układy stron dokładnie tak, jak chcesz.

Mając większą kontrolę nad ostatecznym wyglądem twojej witryny internetowej WordPress, możesz zaoferować odwiedzającym lepsze wrażenia użytkownika.

W związku z tym przyjrzyjmy się, jak dodawać lub usuwać puste miejsca między blokami WordPress na twojej witrynie internetowej. Skorzystaj z poniższych odnośników, aby przejść bezpośrednio do wybranej metody:

Film instruktażowy

Jeśli wolisz pisemne instrukcje, czytaj dalej.

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

Najprostszym sposobem na dodanie pustego miejsca między twoimi 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 niej skorzystać, otwórz wpis lub stronę, którą chcesz edytować i kliknij przycisk dodawania bloku „Plus”.

Następnie wyszukaj „Spacer” i wybierz blok.

Spowoduje to automatyczne wstawienie elementu dystansowego na stronę.

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ć twoje zmiany.

Jeśli korzystasz z motywu blokowego, możesz również użyć Edytora całej witryny, aby dostosować odstępy między blokami w szablonach twojego motywu.

Zapoznaj się z naszym przewodnikiem dla początkujących na temat pełnej edycji witryny WordPress, aby uzyskać więcej informacji.

Oprócz wstawienia bloków Spacer, możesz również zwiększyć margines twoich bloków, aby umieścić więcej miejsca między nimi a innymi blokami. Opcje te można znaleźć na panelu bocznym Ustawienia bloków.

Więcej szczegółów można znaleźć w naszym przewodniku na temat dopełnienia a marginesu w WordPress.

Należy pamiętać, że ta metoda pozwala jedynie na dodanie białej przestrzeni między blokami. Aby usuwać spacje, należy użyć jednej z poniższych metod.

Metoda 2: Dodawanie lub usuwanie pustych przestrzeni między blokami WordPress poprzez dodanie własnego CSS

Innym sposobem na dodawanie i usuwanie pustych przestrzeni między blokami jest dodanie własnego kodu CSS do twojego motywu.

Jeśli nie robiłeś tego wcześniej, zalecamy zapoznanie się z naszym przewodnikiem na temat tego, jak łatwo dodać własny CSS do twojej witryny WordPress, zanim zaczniesz.

Następnie otwórz stronę lub wpis, który chcesz edytować, a następnie kliknij blok, w którym chcesz dodać lub usuwać puste miejsce.

Następnie kliknij pozycję menu „Blokuj” w prawym panelu opcji.

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

Następnie w polu „Dodatkowe klasy CSS” wystarczy dodać następujący kod:

.add-remove-bottom-space

Ten fragment kodu tworzy nową klasę CSS specjalnie dla tego bloku.

Następnie kliknij przycisk „Aktualizuj”, aby zapisać twoje zmiany.

Następnie przejdź do Wygląd ” Dostosuj, aby wyświetlić konfigurator motywu WordPress.

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

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

Następnie wklej następujący fragment kodu do pola:

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

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

Jeśli chcesz dodać przestrzeń na dole, po prostu zmień „0” na coś w rodzaju „20px”.

Po wprowadzeniu twoich zmian, upewnij się, że kliknąłeś przycisk „Opublikuj”, aby zmiany zostały wprowadzone.

Zapisywanie własnego kodu CSS za pomocą wtyczki

Dodając własny CSS do konfiguratora motywu WordPress, zostanie on zapisany tylko dla aktualnie używanego motywu. Jeśli zmienisz motyw WordPress, będziesz musiał skopiować kod CSS do twojego nowego motywu.

Jeśli chcesz, aby Twój własny CSS był stosowany niezależnie od używanego motywu, musisz użyć wtyczki.

WPCode to najlepsza wtyczka do fragmentów kodu, która umożliwia dodawanie PHP, CSS i innych elementów do twojej witryny internetowej WordPress bez naruszania czegokolwiek.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć darmową wtyczkę WPCode. Więcej szczegółów można znaleźć w naszym przewodniku na temat instalacji wtyczki WordPress.

Po włączaniu, należy przejść do Code Snippets ” + Add Snippet z kokpitu administracyjnego WordPress.

Tutaj należy najechać kursorem na opcję „Add Your Custom Code (New Snippet)” w bibliotece fragmentów kodu i kliknąć przycisk „Use snippet”.

Musisz wpisz nazwę fragmentu kodu, a następnie wklej swój własny CSS w polu „Podgląd kodu”.

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

Następnie upewnij się, że kliknąłeś pokaz slajdów u góry, aby Twój fragment kodu był włączany i naciśnij „Zapisz fragment kodu”, aby wykonać go na Twojej witrynie internetowej WordPress.

Więcej szczegółów można znaleźć w naszym przewodniku na temat łatwego dodawania własnych CSS do twojej witryny WordPress.

Alternatywnie, możesz użyć wtyczki Simple Custom CSS. Po włączaniu, po prostu przejdź do Wygląd ” Custom CSS i dodaj swój własny kod CSS.

Po zakończeniu kliknij przycisk „Aktualizuj własny CSS”, aby zapisać twoje zmiany.

Metoda 3: Dodawanie lub usuwanie pustych przestrzeni między blokami WordPressa za pomocą CSS Hero

Innym przyjaznym dla początkujących sposobem dodawania lub usuwania pustego miejsca między blokami WordPress jest użycie własnej wtyczki CSS WordPress. Pozwala to na wprowadzanie zmian wizualnych na twoim blogu WordPress bez edytowania kodu CSS.

Zalecamy korzystanie z wtyczki CSS Hero. Pozwala ona edytować prawie każdy styl CSS na twojej witrynie WordPress bez pisania ani jednej linii kodu.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączeniu należy kliknąć przycisk „Przejdź do aktywacji produktu”, aby włączyć wtyczkę. Przycisk ten znajduje się bezpośrednio nad twoją listą zainstalowanych wtyczek.

Spowoduje to wyświetlenie ekranu, na którym należy wpisz swoją nazwę użytkownika i hasło. Następnie postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, a po zweryfikowaniu twojego konta zostaniesz przekierowany z powrotem do kokpitu.

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 CSS Hero. Wtyczka korzysta z edytora wizualnego, więc będziesz mógł wprowadzać swoje zmiany w czasie rzeczywistym.

Kliknięcie dowolnego elementu na twojej stronie spowoduje wyświetlenie paska narzędzi po lewej stronie, umożliwiającego wprowadzenie własnych konfiguratorów.

Aby usuwać lub dodawać puste miejsca między twoimi blokami, wystarczy kliknąć opcję „Spacings”, a następnie przewinąć w dół do sekcji „Margin-Bottom”.

W tym miejscu można przesunąć suwak w górę lub w dół, aby dodać lub usuwać puste miejsce.

Wszelkie wprowadzone zmiany będą automatycznie widoczne na twojej stronie.

Po zakończeniu wprowadzania zmian należy kliknąć przycisk „Zapisz”, aby Twoje zmiany zostały wprowadzone.

Metoda 4: Dodawanie lub usuwanie pustych przestrzeni między blokami WordPress za pomocą SeedProd

SeedProd to najlepszy kreator stron typu „przeciągnij i upuść„, z którego korzysta ponad milion witryn internetowych.

Biblioteka ponad 300 szablonów umożliwia tworzenie własnych stron 404, stron sprzedaży, stron docelowych i wielu innych. SeedProd może być nawet użyty do stworzenia własnego motywu WordPress bez pisania jakiegokolwiek kodu.

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

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

Konfigurując własną stronę, możesz dodać przestrzeń w dowolnym miejscu za pomocą bloku Spacer.

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

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

Możesz także kontrolować odstępy między dowolnymi blokami. Aby to zrobić, wystarczy kliknąć dowolny blok, do którego chcesz dodać lub usuwać odstęp.

Spowoduje to wyświetlenie panelu opcji po lewej stronie, a następnie kliknięcie karty „Zaawansowane”.

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

Spowoduje to wyświetlenie menu, w którym można kontrolować „Margines”. Wystarczy wpisz liczbę w polu dolnego marginesu, aby dodać miejsce lub usunąć liczbę, aby usunąć istniejące puste miejsce.

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

Następnie wybierz opcję „Opublikuj”, aby wprowadzić twoje zmiany.

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się dodawać lub usuwać puste miejsca między blokami WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat tego, jak założyć własny podcast, a także do wybrania najlepszych dostawców hostingu WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.