Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać poziomy separator linii w WordPress (3 metody)

Dodanie poziomej linii do twojego wpisu lub strony WordPress jest skutecznym sposobem na poprawę czytelności. Linie te pomagają podzielić długie wpisy na łatwe do zarządzania sekcje, zapewniając, że twoja treść pozostanie wciągająca.

Poziome podziały są również idealne do importowania uwagi na ważne ogłoszenia lub promocje. Wyraźnie oddzielają one różne części twojej strony, ułatwiając czytelnikom śledzenie jej zawartości.

W tym przewodniku przeprowadzimy Cię przez 3 proste metody dodawania poziomych separatorów liniowych w WordPress. Podzielimy się również kilkoma alternatywnymi separatorami linii poziomych.

How to add a horizontal line in WordPress

Dlaczego warto dodać poziomy separator linii w WordPress?

Podjęcie decyzji o opuszczeniu Twojej strony zajmuje odwiedzającym zaledwie kilka sekund. W zależności od urządzenia, przeglądarki mogą wyświetlać twój wpis na blogu jako długą ścianę tekstu.

Wielu czytelników odejdzie, jeśli treść jest zbyt trudna do odczytania, nawet jeśli artykuł na blogu jest pełen wartości.

Dodanie poziomego separatora linii może być wszystkim, czego potrzeba, aby twoja treść była czytelna.

Poziomy separator linii może pomóc poprawić czytelność i ostatecznie zwiększyć zaangażowanie użytkowników w twoje wpisy i strony na blogu. Co więcej, może podkreślać kluczowe punkty, co pomaga importować ważne cytaty lub przejścia w twojej treści.

Ponieważ jest to kompleksowy przewodnik na temat dodawania poziomej linii podziału w WordPress, pomocne może okazać się skorzystanie z naszego spisu treści, aby znaleźć metodę, której chcesz użyć:

Gotowy? Przejdźmy do rzeczy.

Metoda 1: Dodanie poziomej linii w edytorze bloków WordPress

Aby dodać poziomą linię za pomocą edytora bloków WordPress, możesz kliknąć ikonkę „+”, aby utworzyć nowy blok w dowolnym miejscu, w którym ma znajdować się linia.

Adding a new block where you want your horizontal line

Następnie wybierzmy blok „Separator” z sekcji „Elementy układu”.

Można go łatwo znaleźć za pomocą paska wyszukiwania.

Find and add the Separator block

Po dodaniu, w obszarze treści zobaczysz twój poziomy dzielnik liniowy.

Stylizacja linii poziomej w edytorze bloków WordPress

Domyślnie poziomy separator jest bladoszarą linią na środku twojego wpisu lub strony.

Możesz zmienić jego wygląd, klikając linię, aby wybrać jej blok. Następnie po prawej stronie twojego ekranu otworzy się panel edycji „Blok”.

Click on the Separator block to select it and edit the settings

Aby zmienić styl twojej linii, kliknij małą strzałkę obok opcji Style. Następnie zobaczysz różne opcje.

Jeśli chcesz, możesz zmienić poziomą linię na jedną z nich:

  • Szeroka linia, która obejmuje całą szerokość treści twojego wpisu.
  • Trzy kropki są wyświetlane na środku twojego wpisu.
The different styles available for the Separator block

Uwaga: W niektórych motywach WordPress zarówno szeroka linia, jak i domyślna linia będą obejmować całą szerokość twojego wpisu.

Możesz również zmienić kolor twojej poziomej linii w ustawieniach „Kolor”. Wystarczy kliknąć jedną z wyświetlonych opcji lub użyć odnośnika „Dostosuj kolor”, aby wybrać dowolny kolor.

Change the color of the horizontal line

Jeśli chcesz powrócić do domyślnego szarego koloru, po prostu kliknij przycisk „Wyczyść” pod opcjami kolorów.

Tutaj nasza pozioma linia jest niebieska i używa stylu „szeroki”.

A horizontal line that's been modified to be wide and blue

Metoda 2: Dodanie poziomej linii w klasycznym edytorze WordPress

Jeśli nadal korzystasz z klasycznego edytora, nie martw się; nadal możesz dodawać podstawowe linie poziome.

Aby to zrobić, wystarczy edytować istniejący wpis lub stronę lub utworzyć nowy. Jeśli widzisz tylko jeden rząd przycisków na pasku narzędzi nad edytorem wpisów, kliknij ikonkę przełączania paska narzędzi po prawej stronie:

Click the Toolbar Toggle button to see the second row of icons

Spowoduje to otwarcie drugiego rzędu przycisków, który zawiera opcję poziomej linii.

Teraz umieść podział wiersza między akapitami w miejscu, w którym ma przebiegać pozioma linia. Następnie kliknij ikonkę „Linia pozioma”. Jest ona druga od lewej w drugim rzędzie:

The horizontal line button in the classic WordPress editor

Po dodaniu zobaczysz jasnoszarą poziomą linię.

Pokryje on całą szerokość twojego wpisu w ten sposób:

A horizontal rule created using the classic editor

Ręczne dodawanie poziomej linii podziału przy użyciu HTML

W niektórych rzadkich przypadkach może być konieczne ręczne dodanie poziomej linii podziału w twojej treści WordPress.

Jeśli tak, możesz to po prostu zrobić, używając tagu hr HTML w twojej treści:

<hr>

Spowoduje to dodanie separatora w postaci poziomej linii do treści twojego wpisu.

Metoda 3: Dodawanie podziału strony w formularzach WordPress przy użyciu WPForms

Co jeśli chcesz umieścić przerwę nie we wpisie lub na stronie, ale w formularzu kontaktowym WordPress? To też można zrobić!

Będziemy do tego używać WPForms.

Najpierw należy pobrać, zainstalować i włączyć wtyczkę WPForms. Jeśli nie wiesz, jak to zrobić, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Następnie możesz przejść do WPForms ” Add New z twojego kokpitu WordPress.

Creating a new form using WPForms

Na następnym ekranie wpiszesz nazwę twojego formularza, a następnie wybierzesz szablon.

W tym poradniku użyjemy szablonu„Formularz zapytania ofertowego„.

Po wybraniu szablonu wystarczy najechać na niego kursorem myszy i kliknąć przycisk, aby utworzyć twój formularz.

Creating a quote form in WPForms

Następnie przewińmy kartę „Dodaj pola” po lewej stronie do sekcji „Fantazyjne pola”.

Następnie możesz przeciągnąć i upuścić „Podział strony” w dowolnym miejscu formularza. Umieszczamy go tuż przed polem „Request”.

Adding a page break in WPForms

Zobaczysz, że formularz jest teraz podzielony na dwie części. WPForms automatycznie dodał również przycisk „Dalej”.

Jeśli chcesz, możesz zmienić etykietę „Następny” i dodać przycisk „Poprzedni”, aby użytkownicy mogli przejść do drugiej strony formularza.

Wystarczy kliknąć pole podziału strony, aby je edytować.

Editing the page break field in WPForms

Po zakończeniu możesz zapisać formularz, klikając przycisk „Zapisz” w prawym górnym rogu.

Teraz nadszedł czas, aby dodać formularz do twojej witryny internetowej.

Aby rozpocząć, kliknij przycisk „Osadzanie” tuż obok przycisku „Zapisz”. Spowoduje to otwarcie okna podpowiedzi, w którym można utworzyć nowy wpis lub stronę albo edytować istniejącą.

W tym poradniku wybierzemy opcję „Wybierz istniejącą stronę”.

WPForms' embed prompt window

Następnym krokiem jest wybranie jednej z dostępnych stron i kliknięcie „Let’s Go!”.

Następnie zostaniesz przekierowany do edytora treści WordPress.

Stąd wystarczy kliknąć ikonkę „+”, aby utworzyć nowy blok do twojego wpisu lub strony i znaleźć blok „WPForms”. Możesz użyć paska wyszukiwania lub poszukać w sekcji „Widżety”.

Gdy go znajdziesz, kliknij go, aby dodać blok do twojej strony.

Adding the WPForms block to your page or post

Teraz zobaczysz opcję wyboru twojego formularza.

Z rozwijanej listy wybierz utworzony przed chwilą formularz.

Choose your form from the dropdown list

Gdy już to zrobisz, możesz opublikować wpis lub stronę. I to już wszystko!

Teraz, jeśli przejdziesz na wpis lub stronę, możesz zobaczyć formularz w działaniu.

The form with a page break on the website

Dodatkowa wskazówka: Inne separatory, których możesz użyć w swoich wpisach i na stronach

Domyślny edytor bloków WordPress umożliwia dodawanie wielu rodzajów separatorów do twoich wpisów i stron.

Poza poziomym separatorem linii, inne opcje w zestawie bloków „Elementy układu” obejmują bloki „Odstęp”, odnośnik „Więcej” i „Podział strony”.

Blok dystansowy

Blok „Spacer” umożliwia dodanie białej przestrzeni między blokami. Na przykład, jeśli chcesz mieć niewielką przerwę na końcu twojego wpisu przed ofertą specjalną, możesz użyć „Spacer”.

Oto jak to wygląda podczas tworzenia twojego wpisu w edytorze bloków:

The Spacer block in the block editor

Możesz dostosować wysokość elementu dystansowego, aby lepiej pasował do twojej treści.

A oto jak przekładka może wyglądać na twojej witrynie:

How the spacer block appears in a page or post

The More Block

Jeśli twój motyw wyświetla pełne wpisy na głównej stronie bloga zamiast zajawek, dodanie odnośnika „Więcej” spowoduje odcięcie wpisu w tym miejscu.

Będzie to wymagało od odwiedzających kliknięcia, aby dowiedzieć się więcej.

The More block in the post editor

Powyższy obrazek przedstawia to, co zobaczysz w edytorze treści.

Poniżej przedstawiamy, jak może wyglądać Twoja witryna dla odwiedzających:

The Read More block in a post on the site

Możesz dowiedzieć się więcej na ten temat w naszych przewodnikach na temat tego , jak prawidłowo korzystać z bloku more i jak łatwo dostosować konfiguratory zajawek w WordPress.

Blok podziału strony

„Podział na strony” umożliwia dzielenie długich wpisów na blogu na wiele stron, ale nie można go w żaden sposób dostosować. Oto jak to wygląda podczas tworzenia twojego wpisu:

The page break block shown in the block editor

Następnie „Page Break” użyje numerów stron i pozwoli czytelnikom wybrać stronę, do której chcą przejść.

Oto jak może wyglądać Twoja witryna:

The page break as it appears on a site

Każda z tych opcji może być dobrą alternatywą dla dodania poziomej linii w WordPressie, w zależności od twojego celu.

Mamy nadzieję, że ten poradnik pomógł ci nauczyć się dodawać poziome separatory liniowe w WordPress. Jeśli chcesz dodać więcej elementów projektu i układu do twoich wpisów i stron, zapoznaj się z naszym artykułem na temat najlepszych kreatorów stron WordPress typu „przeciągnij i upuść” lub przeczytaj nasz wpis na blogu o tym , jak utworzyć niestandardowy dzielnik kształtu w 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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

4 komentarzeZostaw odpowiedź

  1. Jiří Vaněk

    May I ask you, if its possible to make dividier horizontal, instead fo vertical?

    • WPBeginner Support

      For that you would want to create columns and then you would use css to add the border property to the columns.

      Administrator

  2. Shoaib

    Does using hr tags between article affect SEO?

    • WPBeginner Support

      It would depend on how they are being used but for the most part they should not have a major effect.

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.