1. Add a Horizontal Line with the WordPress Block Editor<\/h2>\n\n\n\n
Adding a line separator in the default Block Editor is as easy as placing any other piece of content. First, open up the page you want to add the line to:<\/p>\n\n\n\n As you can see, our page is a long wall of text. To add a separator and break it up, just hover over the block you want to separate, click on the \u2018plus\u2019 icon, and search for \u201cline\u201d or \u201cseparator\u201d:<\/p>\n\n\n\n Select Separator <\/em>from the list, and the editor will add it in the default style:<\/p>\n\n\n\n You can add as many of these as you want throughout the page, in order to break up long chunks of content or separate elements that aren\u2019t immediately related. You can also move the line around by clicking on the arrows in the pop-up menu above it.<\/p>\n\n\n\n Depending on the theme you\u2019re using, you may have several options for customizing your line separators. In the default Twenty Twenty theme, for example, there are plenty of options for style and color.<\/p>\n\n\n\n To access these settings, select the separator block and click on the three dots that appear above it, or choose the Block<\/em> option above the menu on the right. Here\u2019s what the separator looks like in the Dots<\/em> style, with a red color:<\/p>\n\n\n\n The exact options you see here will vary from theme to theme. However, with most, you should at least be able to change the color and width of the separator.<\/p>\n\n\n\n If you prefer to use the Classic Editor<\/a>, you can still add a row separator to your content. In fact, the process is even simpler. Open up your page:<\/p>\n\n\n\n If the editing toolbar isn\u2019t displayed, click on the toggle button at the top of the page, or press Shift + Alt + Z<\/em>.<\/p>\n\n\n\n Next, place your cursor at the end of a paragraph and select the Horizontal line<\/em> button in the toolbar. This will insert a horizontal line after your cursor:<\/p>\n\n\n\n As you can see, the line uses the same default style as the Block Editor. However, unlike with the Block Editor, there are no options to edit the line\u2019s style. To do that, you\u2019ll have to add some code manually, which we\u2019ll cover in the next section.<\/p>\n\n\n\n WordPress makes it easy to edit the HTML for your pages directly. If you prefer to work that way, you can still easily add a horizontal separator. First, pull up the text editor for the page you want to work with. <\/p>\n\n\n\n If you\u2019re using the Block Editor, click on the three dots in the top-right corner of the editor. Then select Code Editor<\/em> in the drop-down menu that appears. You can also use the keyboard shortcut Ctrl + Shift + Alt + M.<\/em><\/p>\n\n\n\n Here\u2019s what that looks like:<\/p>\n\n\n\n If you\u2019re using the Classic Editor, simply click on Text<\/em> at the top of the editing window, above the toolbar.<\/p>\n\n\n\n Here\u2019s what the text editor looks like using the Classic Editor plugin:<\/p>\n\n\n\n Now that you have the text editor pulled up, you\u2019ll need to add your separator. Simply place your cursor where you want the separator to appear, press the Enter<\/em> or Return<\/em> key to create a new line, and enter the following code:<\/p>\n\n\n\n That\u2019s all there is to it!<\/p>\n\n\n\n If you\u2019re a fan of working with code, or you prefer the Classic Editor, you won\u2019t get the Block Editor\u2019s fancy configuration options for the line separator. However, you can still adjust its styles using CSS<\/a>. <\/p>\n\n\n\n To add custom CSS to your page, you can use the WordPress Customizer. When viewing your page on the front end, simply click on Customize<\/em> in the WordPress toolbar at the top of the screen:<\/p>\n\n\n\n Next, select Additional CSS <\/em>at the bottom of the sidebar. This brings up a notepad where you can add any custom CSS you like:<\/p>\n\n\n\n You\u2019ll see a live preview of your changes on the right. At this point, you can continue to make edits and preview them until you\u2019re happy with the line\u2019s style.<\/p>\n\n\n\n A horizontal line separator is a quick, easy way to break up a monotonous article and turn it into a must-read product. It\u2019s such a simple element, but it can really elevate your content.<\/p>\n\n\n\n If you want to turn your entire digital experience up to eleven, WordPress hosting<\/a> with WP Engine can help. We have comprehensive resources<\/a> for users and developers, along with a selection of world-class hosting packages<\/a> to help you deliver incredible content to your visitors!<\/p>\n","protected":false},"excerpt":{"rendered":" Online readers are picky. They don\u2019t want to see long walls of text, and many will leave a site immediately if the content looks too difficult to read. Therefore, skimmability is vital for your website\u2019s content. If you have excellent, value-packed content that could use an aesthetic touch-up, a horizontal line separator could be just…<\/span><\/span><\/p>\n","protected":false},"author":297,"featured_media":110295,"template":"","resource-topic":[901],"resource-role":[895,896,903],"resource-type":[916],"class_list":["post-110294","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n![\"Screen](\"https:\/\/lh6.googleusercontent.com\/weWw9C0EksPlVHDYg9rD9e0_BV1bVr3QnR1ZjeMGMrykPUJTbZCoYNBOyljA4CZGcHdttuzlqx4xKa6tKByOeQ4f-eRWKr-BA1aDV0i9Y1VEr8FBYrxT1QgJhz58OVKN1mRy8zq8\")
![\"Screen](\"https:\/\/lh5.googleusercontent.com\/ZXxlMjgq8m_t5LgJUOiDWo3tad11qwg_MluMdxfHZB-IszfvO57eQGcON3sduVKbr4clUcETUkTIwdqRyvV3XTXhBV1XW5HRzAXeKd49pkyHtTm5g5pnmooK9BihJ5gTwwuxxYl5\")
![\"Screenshot](\"https:\/\/lh3.googleusercontent.com\/Yl9eS4OmbhZJnalJunwQKRFl6-1HKTnKICacqpEMbKR2X4wGRuV8KyDNEU2CK69zUZx90rbI7rw8XsGd_chRn6WvTtFJTPfvszWCih7TF-rVljJ8-flCh-5zsn4oM01z_TDkVQVf\")
Changing Color and Style in the Block Editor<\/h3>\n\n\n\n
![\"Screenshot](\"https:\/\/lh3.googleusercontent.com\/rrUmt40E4xsSDAND-sLtaNrJFrBE8Kx0e1cVnGEzMktnnDXafoAZUrHdSf7a8d8jmuRJ32UedKLSpi1R_uCjKAxossn46l4yZDFaxaRx7Z497EHOWkhJauwDwAnaNvr1B5HeWRB3\")
2. Add a Row Separator with the WordPress Classic Editor<\/h2>\n\n\n\n
![\"Screenshot](\"https:\/\/lh6.googleusercontent.com\/3OIiBNfet1_ph8GytkUG2vH73QBhZejdJPlE-F61_TFdtQ05eek-Of8OKw-6m8o9Q5gQybmhfc9ivtCagOCeYxsVevuSESeGFxaIMG7uVLDeZsHV-XLFgPqRbCV-KlPAJ8d-2xk3\")
![\"Screenshot](\"https:\/\/lh5.googleusercontent.com\/-SGuyCxU_Sg98x66WgaOu3rXl3VxFdof5r6QXYQd6VvfrgGzMqhAspE22xhOPwhUreDHtcl-xGTVbSN4GumE0XDdbq28_mm5GF8JMO888oVuP9-4AhkcCiX7QwuaQKy4-d1BJEyS\")
3. Create a Horizontal Line Separator in HTML<\/h2>\n\n\n\n
![\"Screenshot](\"https:\/\/lh3.googleusercontent.com\/IUwkDKqZJOPILHYVybHMz73WE-BCwIwbgo2_jAe1VVVK-pd2nTaIjEimbCjYFD2VBgkwIhlQTg6nLNnMQmuY7ii6--B7ckF7iDVLN3PunFnzfXtxL59FlgoTaZuVoUJrzS2HcUol\")
![\"Screenshot](\"https:\/\/lh6.googleusercontent.com\/TuKzGBo08X0VVnJGjhz-AwPM6YClm_nGORYmNIQRvQra5hwTy51bPqf_PjdLMYTlKerqFBsV0un2AEIvwNHhpf24zDmMOlJIA2AxErmp2MMGA-Hurnn0-PH6revlcD60J63OMVtq\")
<hr \/><\/code><\/p>\n\n\n\nChanging the Color and Style with CSS<\/h3>\n\n\n\n
![\"Screenshot](\"https:\/\/lh4.googleusercontent.com\/7-UiTbMgHketT-APEFdpsPgAYwGIQjbdQ54-YQGmHWqlRAjuBmpXAS_BdVIz_R_ZJ73fSfhx8RKuT39c4ttq6x4xJA4YCEUIbHq4bM5R0Pyh7FRTDzzRX_Vh_37g9yJaEYZPIRdy\")
![\"Screenshot](\"https:\/\/lh3.googleusercontent.com\/27kmvGwRVKl4rBFmxmM5qvntCgvqt0SlrxvFnYJUVeTiGLiNYHuBrPoByUsQH2P2MfacOcTH_djpqZiJFZme8VgiUW-YCVNxrqD05-kFLZTcXTGFNwyt3s6roYQgu32bFrZiEgd2\")
Customize Your WordPress Site with WP Engine<\/h2>\n\n\n\n