Divi’s weblog module offers you two default structure types off the bat. Grid and fullwidth. However how can we make a selection? On this article, we’ll discover this query and evaluate Divi’s grid and fullwidth weblog module layouts to lend a hand making a decision between them. We’ll percentage some other examples the use of each types as smartly.
Let’s get began!
Converting Your Divi Weblog Module Format
Ahead of we get into our dialogue, let’s see what we’re speaking about and find out how to alternate between them. The Divi Weblog module comprises settings to choose from Grid and Fullwidth layouts. Move to the Design tab inside the Weblog module.
The primary phase is known as Format. It has a dropdown field with two choices: Fullwidth and Grid. This situation displays the Grid choice. It shows 3 posts in a row via default.
The grid is responsive, so it’ll alternate the collection of posts in a row to suit the web page design. I’ve modified the collection of Rows for this situation. The grid has spoke back to show two columns.
This situation displays the Fullwidth choice. It shows the posts stacked vertically so just one submit seems on a unmarried row. It’s additionally responsive, but it surely displays one submit without reference to the width.
Let’s glance nearer at each designs.
Divi Weblog Module Grid Format
In weblog design, the grid structure is extra common than the fullwidth structure. It puts the weblog posts at the web page in more than one columns, making a grid. Each and every submit is gifted as a card. The grid is responsive, so the collection of columns will alternate to suit the display.
Mag blogs and portfolios are recognized for this kind of structure. Websites akin to Pinterest, YouTube, Amazon, and different on-line shops show content material inside of a grid. The vast majority of Divi Weblog Web page layouts within the unfastened Divi Format Packs are in a grid structure.
Divi Grid Weblog Format Examples
Let’s take a look at a couple of Divi grid weblog structure examples. Those are the weblog pages from one of the unfastened Divi structure packs that you’ll be able to make a selection inside of Divi.
Instrument
The weblog web page for the Software layout pack features a featured submit within the hero phase. The grid shows playing cards with a border, which is helping them to face aside. The metadata and Learn Extra hyperlinks are pink, so that they stand out.
Panorama Upkeep
The Landscape Maintenance weblog web page makes use of a 2-column grid with a sidebar, which contains posts with out featured photographs. The hero phase features a submit slider with out the featured symbol. The weblog playing cards have a minimum design that appears blank.
Ground
The Flooring layout pack weblog web page makes use of a 3-column grid with a few options that lead into the grid. The hero phase shows a submit slider with out a featured symbol. The following phase shows the newest submit in a single column and 3 extra posts with out featured photographs subsequent to it.
Grid Format Professionals
- The grid design is structured smartly. Playing cards provide numerous data in a small house. It makes very good use of house. Posts take much less house at the web page, which will also be essential actual property for CTAs and different components. The web page will also be smaller.
- Customers can see additional info directly as a result of there’s extra content material at the web page. This permits for extra content material in much less house. This appears to be like higher with vast monitors.
- Since there’s extra at the display directly, customers can in finding the content material they’re taken with a lot quicker. It’s more uncomplicated to scan the web page and more uncomplicated to scroll throughout the content material to search out older posts.
- The metadata is extra outstanding, so customers have extra alternatives to choose the types, authors, and so forth.
- It’s more uncomplicated to divide content material into classes like {a magazine}, making it your best option for class layouts.
- It’s responsive, so posts develop into fullwidth on cell units.
Grid Format Cons
- There’s in most cases numerous content material at the web page, making the web page extra cluttered.
- Featured Pictures are smaller, so that they don’t stand out. This brings much less consideration to the photographs.
- Loading extra content material can have an effect on the web page loading time.
- It’s more uncomplicated to fail to remember a submit as a result of they may be able to mix in.
Divi Weblog Module Fullwidth Format
Fullwidth layouts position the weblog posts in one column, so posts are stacked vertically. With a full-width structure, the featured symbol is essentially the most outstanding component of the weblog submit.
Websites akin to Fb and eBay’s seek effects show in complete width. It’s additionally a well-liked strategy to show information about products and services.
Divi Fullwidth Weblog Format Examples
Let’s take a look at a couple of Divi fullwidth weblog structure examples. Those are the weblog pages from a number of the unfastened Divi structure packs.
Social Media Advisor
Right here’s the weblog web page for the Social Media Consultant layout pack. it features a sidebar, so the featured symbol doesn’t take a great deal of house at the web page. The titles are huge and impressive, making them simple to look and browse.
Insurance coverage Company
Right here’s the weblog web page from the Insurance Agency layout pack. This one does no longer come with a sidebar. This assists in keeping the focal point at the featured photographs.
Bodily Treatment
Right here’s the weblog web page for the Physical Therapy layout pack. this one features a sidebar, but in addition makes use of colour and different design components to make use of the whitespace.
Fullwidth Format Professionals
- Since all the featured photographs are fullwidth, they stand out.
- Each and every submit takes extra of the display, so all of them get consideration. This improves engagement with every submit.
- The design is extra minimum. This makes it a much less cluttered design.
- It really works nice with sidebars and different components.
- You’ll be able to use CSS or plugins to get much more structure choices, akin to putting the picture on one aspect and the excerpt at the different. You’ll be able to take this one step additional and provide the posts in an alternating structure.
Fullwidth Format Cons
- For the reason that photographs are fullwidth, they may be able to be too huge. Each and every submit takes numerous house at the web page. That is very true should you’re no longer the use of a sidebar.
- Pages are more difficult to scan. It calls for much more scrolling to look a couple of posts, so customers can’t look on the web page to look what they’re in search of. Pages can take longer to scroll via.
- The structure doesn’t paintings smartly for journal layouts. It’s tougher to put posts inside of classes at the web page.
- If the featured photographs are made smaller, the structure may have an excessive amount of whitespace at the web page.
- It’s more uncomplicated to omit a submit if the consumer doesn’t scroll throughout the web page.
Opting for Between Divi’s Grid and Fullwidth Weblog Module Layouts
When opting for between the 2, there is not any proper or flawed resolution. Each web site’s design and wishes are other. Listed below are some ideas you’ll be able to take into account when opting for:
- Make a selection the structure that most closely fits the design you’re after.
- Glance throughout the Divi weblog layouts to look which design attracts you essentially the most.
- Believe the professionals and cons of every and notice which is healthier on your wishes.
- Go away it as much as your target audience. Take a look at your stats to look which display sizes your target audience makes use of essentially the most. If nearly all of your target audience perspectives your weblog on a desktop, then a grid structure may well be your only option. If nearly all of your target audience perspectives your weblog on cell, then a full-width structure may well be your only option. Divi is responsive both method, so it is advisable to move with a grid structure and feature a grid on desktop and fullwidth on cell.
- Grid layouts are higher suited to magazine-style blogs. You’ll be able to crew and provide other classes more uncomplicated. It’s additionally higher if you wish to exhibit loads of weblog posts. It displays extra posts at the web page and so they’re more uncomplicated to navigate.
- Fullwidth layouts are higher should you handiest have a couple of posts or should you don’t submit that regularly. It’s a sensible choice if you wish to draw consideration to every submit within the feed. They’re additionally just right should you don’t want to exhibit other classes.
- Check out a couple of blogs your self and notice which you prefer to make use of.
- If you happen to’re no longer positive which might paintings highest on your target audience, it is advisable to all the time take a look at an a/b break up take a look at to look which structure provides you with essentially the most visitors.
- Use them in combination to create some fascinating layouts.
Finishing Ideas
That’s our comparability of Divi’s grid and fullwidth weblog module layouts. Each layouts supply chic weblog designs. You’ll be able to even use them in combination via including the newest submit to the hero house to lend a hand get a divorce the web page design.
With the Divi Weblog module settings, it’s simple to switch your weblog structure. You’re no longer caught with the design you select. It’s good to take a look at one structure for some time to look should you love it after which take a look at the opposite structure. If you are feeling that your weblog wishes a transformation, merely make a selection the opposite structure to get a contemporary glance.
We wish to pay attention from you. Which of Divi’s weblog module layouts do you favor? Tell us within the feedback.
The submit Comparing Divi’s Grid & Fullwidth Blog Module Layouts seemed first on Elegant Themes Blog.
WordPress Web Design