{"id":2872,"date":"2016-08-03T12:13:08","date_gmt":"2016-08-03T12:13:08","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=2872"},"modified":"2016-10-13T12:30:37","modified_gmt":"2016-10-13T19:30:37","slug":"row-separator-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/row-separator-beaver-builder\/","title":{"rendered":"How to add Row Separator using Beaver Builder"},"content":{"rendered":"

Row separator is a new design trend and it looks very good.\u00a0PowerPack Beaver Builder addon comes with a bunch of creative Row Separators<\/a> that you can\u00a0add with \u00a0a few clicks. In this tutorial, I\u00a0will be sharing details about how you can add these row separators and style them.<\/p>\n

Adding Row Separator<\/h2>\n

Row separator can be added to the\u00a0top, bottom or both the ends of a row. Style of the separator will help you decide whether it’s a good fit for the selected position or not.<\/p>\n

You must have PowerPack Beaver Builder addon<\/a> as that’s what I am going to use it in this tutorial.\u00a0<\/em><\/p>\n

To add a Row Separator, click the\u00a0Settings \/ Wrench\u00a0<\/strong>icon for Row Settings as shown in the screenshot below.<\/p>\n

\"Beaver<\/p>\n

Clicking this icon will open up the Row Settings module and you can now navigate to the Separator Tab\u00a0<\/strong>and enable the row separator.<\/p>\n

This will display options to set Top and Bottom Row Separator.<\/p>\n

\"Row<\/p>\n

You can now select the\u00a0style, color, size for Row Separator.\u00a0Sometimes a row separator styling may not look good on mobile or tablet devices. So, you can\u00a0optionally show \/ hide the separator on these devices. If you select to display the row separator on mobile devices, you can even set a custom\u00a0size and make it smaller and better.<\/p>\n

\"row-separator-mobile-settings\"<\/p>\n

Depending on the\u00a0separator style, you will need to select a color that matches the existing row’s background color or the next \/ previous row’s background color.<\/p>\n

For e.g., in my demo, I am using a top separator where the color is set to white so it merges with the\u00a0top part of the page.<\/p>\n

\"row-separator-demo\"<\/p>\n

Now, let’s add a bottom separator. Tilt separators are quite popular and the good thing about this separator style is that they look elegant on both desktop and mobile devices.<\/p>\n

In my demo, I am going to add a Bottom Row Separator to the Third Row.<\/p>\n

Since the separator should merge with the row below it i.e. the Fourth Row, I have used the color for separator same as the fourth row’s background color.<\/p>\n

\"bottom-row-separator-demo\"<\/p>\n

Here’s how it looks<\/strong><\/p>\n

\"bottom-row-separator-deom-2\"<\/p>\n

 <\/p>\n

Now, finally let’s add a Small Triangle Row Separator<\/strong> for the Fifth Row<\/strong> that has an image background. So, I will edit the row settings for the Fifth Row and enable its Top Separator.<\/p>\n

Since we want the separator to look connected with the fourth row, I have set its color to same as fourth row’s background color.<\/p>\n

\"top-row-separator-demo-2\"<\/p>\n

 <\/p>\n

That’s all. Once you understand how you will need to set the combination for colors and separator style it becomes very easy to add these effects. Below is a\u00a0screenshot of the complete page.<\/p>\n

\"row-separator-page-demo\"<\/p>\n

 <\/p>\n

If you are still not using PowerPack, you should grab your copy now! We have a powerful Content Grid module<\/a> as well that lets you build almost any kind of content grid and supports Custom Post Types and Taxonomies.<\/p>\n

Got any questions? Please feel free to contact us<\/a> or leave a comment below.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Row separator is a new design trend and it looks very good.\u00a0PowerPack Beaver Builder addon comes with a bunch of creative Row Separators that you can\u00a0add with \u00a0a few clicks. In this tutorial, I\u00a0will be sharing details about how you can add these row separators and style them. Adding Row Separator Row separator can be…<\/p>\n","protected":false},"author":1,"featured_media":2885,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12,27],"tags":[],"class_list":["post-2872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-beaver-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/2872"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=2872"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/2872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/2885"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=2872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=2872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=2872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}