[{"data":1,"prerenderedAt":13},["ShallowReactive",2],{"$f3dpcehzcb4tuo":3},{"slug":4,"title":5,"description":6,"published":7,"updated":8,"thumb":9,"html":10,"tag":11,"legacy":12},"create-awesome-divi-blog-layout","Style your Divi Blog Archive with amazing Blog Layouts","Post archive is the best way to display our blog posts in a single place. It also increases the interest of the user to surf your website for a longer...","2019-10-30","2021-09-15","\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002Fwebsite-1597382-1.png","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Post archive is the best way to display our blog posts in a single place. It also increases the interest of the user to surf your website for a longer time. Plus, if you’re a Divi or extra theme user, then it’s much easier for you to create an intriguing Blog Archive. But the default native Divi blog module only has two decent blog layouts. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">And if you’re a developer, then it’s not a big deal for you to create a custom blog layout. But it takes time and lots of coding. And, for non-technical users, coding is not an excellent option. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">So, in this blog post, we will look at a third party plugin \u003C\u002Fspan>\u003Ca target=\"_blank\" rel=\"noopener nofollow\" href=\"https:\u002F\u002Fdemo.diviextended.com\u002Fdbe\u002F\">\u003Cspan style=\"font-weight: 400;\">Divi Blog Extras\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">. Using this plugin, we can customize our Blog archive without any coding and consuming time. This Divi Blog layout plugin has 6 modern and beautiful blog layouts. And  many customization options that we can use to create our awesome blog page. Like, custom post type, custom taxonomies and Advanced sidebar widget.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>The following are the steps, which you can use to create your own stunning and beautiful blog archive page in Divi 4 or Extra theme.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\">\n\u003Ch5>\u003Cspan style=\"font-weight: 400;\">Step 1\u003C\u002Fspan>\u003C\u002Fh5>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The first and necessary step is to purchase \u003C\u002Fspan>\u003Ca target=\"_blank\" rel=\"noopener nofollow\" href=\"https:\u002F\u002Fwww.elegantthemes.com\u002Fmarketplace\u002Fdivi-blog-extras\u002F\">\u003Cspan style=\"font-weight: 400;\">Divi Blog Extras plugin\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">. So, we can move on to the next steps in creating an awesome blog page. The above link will transfer you to the product page.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\">\n\u003Ch5>\u003Cspan style=\"font-weight: 400;\">Step 2\u003C\u002Fspan>\u003C\u002Fh5>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">After purchasing the Extras plugin. You’ll receive a Zip file containing the Divi Blog Extras plugin. All you need to do is download and upload it to the WordPress.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" alt=\"Divi Blog Extras Plugin File\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1388 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Plugin-File.png\" width=\"720\" height=\"122\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Plugin-File.png 720w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Plugin-File-480x81.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 720px, 100vw\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">After Uploading to WordPress, and activating it,  you’ll find it in your plugin menu.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" alt=\"Divi Blog Extras in Plugin menu\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1389 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-in-Plugin-menu.png\" width=\"1365\" height=\"367\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-in-Plugin-menu.png 1365w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-in-Plugin-menu-1280x344.png 1280w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-in-Plugin-menu-980x263.png 980w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-in-Plugin-menu-480x129.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1365px, 100vw\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Now, we’re ready to move on our third step, which is creating an awesome blog archive page.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\">\n\u003Ch5>\u003Cspan style=\"font-weight: 400;\">Step 3\u003C\u002Fspan>\u003C\u002Fh5>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">First, create a new page and then launch Divi front End builder. You can also choose to design blog page in back end but I find it a little awkward. It’s like coloring a picture with closed eyes.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\">\n\u003Ch5>\u003Cspan style=\"font-weight: 400;\">Step 4\u003C\u002Fspan>\u003C\u002Fh5>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Now, all you need to do is add a section, then a row, and in row add Divi Blog Extras module from Divi modules.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1390 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-module-in-Divi-Modules.png\" alt=\"Divi Blog Extras module in Divi Modules\" width=\"666\" height=\"484\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-module-in-Divi-Modules.png 666w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-module-in-Divi-Modules-480x349.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 666px, 100vw\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">You’re half way customizing the Blog page.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" alt=\"Divi Blog Extras back end view\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1391 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-back-end-view.png\" width=\"1190\" height=\"333\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-back-end-view.png 1190w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-back-end-view-980x274.png 980w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-back-end-view-480x134.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1190px, 100vw\" \u002F>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\">\n\u003Ch5>\u003Cspan style=\"font-weight: 400;\">Step 5\u003C\u002Fspan>\u003C\u002Fh5>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">After, you’ve chosen the Divi Blog Extras module. It is time to customize it further. And selecting the desired Divi Blog Layout from 6 Blog layout options. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Tap on the settings button of Divi Blog Extras and customization menu will open.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" alt=\"Divi Blog Extras settings\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1392 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-settings.png\" width=\"404\" height=\"497\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-settings.png 404w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-settings-244x300.png 244w\" sizes=\"(max-width: 404px) 100vw, 404px\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">In Divi Blog Extras&#8217; setting, you get three settings options. Content, Design, and Advanced. In content settings, you can choose the number of posts, option order posts, display excerpts, or complete content. Customization of the featured image, read more button, and lots of other customization.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Design setting allows you to select layout from six modern Divi blog layouts, overlay options; title, body and meta text customization.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1393 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Layout-of-Divi-Blog-Extras.png\" alt=\"Divi Blog Layout of Divi Blog Extras\" width=\"400\" height=\"495\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Layout-of-Divi-Blog-Extras.png 400w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Layout-of-Divi-Blog-Extras-242x300.png 242w\" sizes=\"(max-width: 400px) 100vw, 400px\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Advanced settings gives feature of visibility, Custom CSS and more.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>&nbsp;\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">It is much easier to create a blog archive page with Divi Blog Extras plugin. Below are the archive designs created with each Divi Blog layout available in this plugin.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1395 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Grid-Extended.png\" alt=\"Divi Blog Extras Grid Extended\" width=\"582\" height=\"642\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Grid-Extended.png 582w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Grid-Extended-480x529.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 582px, 100vw\" \u002F>\u003C\u002Fp>\n\u003Cp style=\"text-align: center;\"> Grid Extended Layout\u003C\u002Fp>\n\u003Cp>&nbsp;\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1396 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Box-Extended.png\" alt=\"Divi Blog Extras Box Extended\" width=\"376\" height=\"630\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Box-Extended.png 376w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Box-Extended-179x300.png 179w\" sizes=\"(max-width: 376px) 100vw, 376px\" \u002F>\u003C\u002Fp>\n\u003Cp style=\"text-align: center;\"> Box Extended Layout\u003C\u002Fp>\n\u003Cp>&nbsp;\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1397 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Full-Width-layout.png\" alt=\"Divi Blog Extras Full Width layout\" width=\"567\" height=\"579\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Full-Width-layout.png 567w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Full-Width-layout-480x490.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 567px, 100vw\" \u002F>\u003C\u002Fp>\n\u003Cp style=\"text-align: center;\">Divi Blog Extras&#8217; Full Width layout\u003C\u002Fp>\n\u003Cp>&nbsp;\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1398 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Layout-Box-Extended.png\" alt=\"Divi Blog Layout Box Extended\" width=\"954\" height=\"563\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Layout-Box-Extended.png 954w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Layout-Box-Extended-480x283.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 954px, 100vw\" \u002F>\u003C\u002Fp>\n\u003Cp style=\"text-align: center;\">Box Extended\u003C\u002Fp>\n\u003Cp>&nbsp;\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1399 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Layout-FullWidth-Background.png\" alt=\"Divi Blog Layout FullWidth Background\" width=\"620\" height=\"511\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Layout-FullWidth-Background.png 620w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Layout-FullWidth-Background-480x396.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 620px, 100vw\" \u002F>\u003C\u002Fp>\n\u003Cp style=\"text-align: center;\"> Full Width Background\u003C\u002Fp>\n\u003Cp>&nbsp;\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1400 size-full\" src=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Classic-Blog-Layout-e1572518619836.png\" alt=\"Classic Blog Layout\" width=\"1356\" height=\"2209\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Classic-Blog-Layout-e1572518619836.png 1356w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Classic-Blog-Layout-e1572518619836-1280x720.png 1280w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Classic-Blog-Layout-e1572518619836-980x551.png 980w, \u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002FDivi-Blog-Extras-Classic-Blog-Layout-e1572518619836-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1356px, 100vw\" \u002F>\u003C\u002Fp>\n\u003Cp style=\"text-align: center;\">Divi Blog Extras&#8217; Classic Blog Layout\u003C\u002Fp>\n\u003Ch3>Last but not least\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-preserver-spaces=\"true\">Using Divi Blog Extras, you can also create custom posts and custom taxonomies. It also \u003C\u002Fspan>\u003Ca class=\"_e75a791d-denali-editor-page-rtfLink\" href=\"\u002Fhow-to-create-custom-category-archive-page-in-divi\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cspan data-preserver-spaces=\"true\">allows the user to create a custom category archive page. \u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-preserver-spaces=\"true\">Divi Blog Extras is a nice plugin for both developers and users without any coding knowledge. A perfect solution for creating a stunning Blog page in no time. If you&#8217;ve used this plugin before, then please write your views in the comment section. And share this post to help other Divi and Extra theme users to create stylish Blog Archive page.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>&nbsp;\u003C\u002Fp>\n\u003Cp>&nbsp;\u003C\u002Fp>","Archive",true,1793901057406]