Now it’s time to style the blog layout with a huge collection of design resources. You can design every single element you kept ON in the element option from the content tab. Take control over the appearance of your blog into the design tab. We added all the possible design settings to make the module unique and resourceful. For easy navigation, we set the settings into a different option with a name. You can use the search to find a specific design option as well.
Let’s introduce you to the options in the design tab and the control under each option.
One of the first things you need to do when you start a blog page/section design is to choose a layout. The layout is a way to show your posts in an attractive manner.
Under the layout, you will find 3 options to choose from. Those are Grid, Masonry & Full Width.
Grid
Layout with vertical and/or horizontal guidelines to incorporate margins, spaces, and columns in order to provide responsive and organized content. It has a fixed height and width.
With Grid, you can define the columns based on devices. You have an option to choose the number of columns for particular devices.
Columns
Columns in desktop: You can choose 2-5 columns (1 column means fullwidth)
Columns in Tablet: You can choose 1-3 columns
Columns in Mobile: You can choose 1 & 2 columns
Space between: Define the space between columns with this. By default, it’s 30px for all devices. You can define it based on the device as well. All you need is to click on the mobile icon just right to the “Space between” text.
Equal Height Article: To make each container the same size keep this option in Yes mode.
Set featured image as Background: You can use the featured image as the background of your content by just clicking yes. (You can add spacing and padding to makeover) For example:
Masonry
A grid layout based on columns is called masonry. It doesn’t have a fixed height row. It optimizes the space inside your blog by using gaps. It’s also referred to as Pinterest Style Layout.
With Masonry, you can define the columns based on devices. You have an option to choose the number of columns for particular devices.
Columns
Columns in desktop: You can choose 2-5 columns (1 column means fullwidth)
Columns in Tablet: You can choose 1-3 columns
Columns in Mobile: You can choose 1 & 2 columns
Space between: Define the space between columns with this. By default, it’s 30px for all devices. You can define it based on the device as well. All you need is to click on the mobile icon just right to the “Space between” text.
Set featured image as Background:
You can use the featured image as the background of your content by just clicking yes. (You can add spacing and padding to makeover) For example:
Full Width
It will display your content in 1 column. Full width comes up with additional options named Layout Style.
Layout styles: With layout styles, you can select your image position for the full-width layout. You can put the image-
Image Top – By Default. Content is underneath of it.
Image Left – Image will be on the left where content will be on right.
Image Right – Image will be on the Right where content will be on left.
Image left right Both – Here images and the content will look like X. Like Left-right combination.
Now if you select the last 3 options out of 4 (Image left, Image right, Image Left Right both) there will be 4 more options added in the layout option.
Equal Height Column: To make each container the same size keep this option in Yes mode. If you keep this ON then Content Vertical-Align doesn’t require it.
Content Vertical-Align: When you choose any of the three options with Equal Height Column off, Your content will be Vertically Aligned. Now here you can decide where it should be aligned-
Top
Middle
Bottom
Image width by %: Scale your image size according to your needs. You can resize the image by pulling the blue icon left or right after holding it. Or you can put the number into the input field. By default, it’s 50%. You can define this for the particular device(Desktop, Tablet & Mobile) by clicking on the mobile icon just right to text.
Side Overlap: You can drag your content over the image with a side overlay option by just clicking on Yes. Just like Image width you can reposition your content by pulling the blue icon left or right after holding it. Or you can put the number into the input field. Here you can set side overlap for a particular device as well.
Tips: When using a full-width layout with image right style with side overlap, You might want your contents(Title, Meta, etc.) alignment right too.
Image Settings Option
Here you go with plenty of options for your feature image. You can style it on your own.
Note: The setting of This image doesn’t apply for a background image or if you set the featured image as background.
Select Image Resolution: You have an option to choose from 3 different resolutions. You might see no visual changes in size.
Medium: In medium Image, the resolution size will be 400X240.
Large: In large 1080X675 will be your image resolution size.
Default Image: Image Resolution will same as the default image you uploaded to your blog post as the featured image.
Image Overlay on Hover: Keep it ON if you want an overlay effect on your post featured image. Once you turn it ON, a couple of more options will show up underneath it.
Overlay color: You can choose the color with opacity from here for your overlay color.
Use Overlay icon: You can use an icon in the middle of your image while using an image overlay on hover just by turning it ON. It will turn on two more options.
Select Image overlay icon: You can select an icon from the list of the icon.
Overlay Icon Color: You can select the color of the selected icon.
