How to change your blog from masonry grid layout to full width with a left aligned image

[dipi_breadcrumbs bc_separator_color=”#999999″ _builder_version=”4.20.2″ _module_preset=”default” items_font=”Urbanist||||||||” items_text_color=”#757575″ items_font_size=”15px” hover_text_color=”#000000″ active_text_color=”#000000″ global_colors_info=”{}”][/dipi_breadcrumbs]
By Trace at SuperDivine Web & Tech
Published:May 21, 2021
Tags: Divi theme | masonry blog | Teabreak Tutorial
Categories: Divi theme | Tea Break Tutorials
[dipi_table_of_content header_icon_color=”#FFFFFF” generate_for_whole_page=”off” section_selector=”.dp-blog-content” table_title_background=”#161616″ content_background=”#161616″ list_custom_margin_1=”|0px|0px|0px|false|false” list_custom_margin_2=”|0px|0px|0px|false|false” list_custom_padding_2=”5px|0px|0px|20px|false|false” list_custom_margin_3=”|0px|0px|0px|false|false” list_custom_padding_3=”5px|0px|0px|20px|false|false” list_custom_margin_4=”|0px|0px|0px|false|false” list_custom_padding_4=”5px|0px|0px|20px|false|false” list_custom_margin_5=”|0px|0px|0px|false|false” list_custom_padding_5=”5px|0px|0px|20px|false|false” list_custom_margin_6=”|0px|0px|0px|false|false” list_custom_padding_6=”5px|0px|0px|20px|false|false” _builder_version=”4.24.2″ _module_preset=”default” tabel_title_font=”Urbanist||||||||” tabel_title_font_size=”20px” content_list_font=”Urbanist||||||||” content_list_text_color=”#FFFFFF” content_list_font_size=”17px” content_list_line_height=”1.7em” h1_font=”Urbanist||||||||” h1_text_color=”#c4c4c4″ h1_font_size=”18px” h1_line_height=”1.7em” h2_font=”Urbanist||||||||” h2_text_color=”#c4c4c4″ h2_line_height=”1.7em” h3_font=”Urbanist||||||||” h3_text_color=”#c4c4c4″ h3_line_height=”1.7em” h4_font=”Urbanist||||||||” h4_text_color=”#c4c4c4″ h4_line_height=”1.7em” h5_font=”Urbanist||||||||” h5_text_color=”#c4c4c4″ h5_line_height=”1.7em” h6_font=”Urbanist||||||||” h6_text_color=”#c4c4c4″ h6_line_height=”1.7em” global_colors_info=”{}”][/dipi_table_of_content]

Hi there, trace here!

Another Teabreak Tutorial from Super Divine Web Design

Is your Divi Blog page layout looking a little tired? Or perhaps you’re fed up with using the Divi masonry grid option?

Well say no more! I have just the thing you need. In today’s Teabreak Tutorial (video captured using Screencast-O-Matic) I will show you how to easily change your blog from masonry grid layout to a full width layout, and a nicely sized left aligned featured image.

change-masonry-grid-blog-layout-to-full-width-with-left-aligned-image

TUTORIAL CHECKLIST

What do you need for this tutorial?

1.  Please download my instruction document!

2.  Have 2 hex codes from your biz branding colour palette ready to copy & paste: these are for the “READ MORE” button & hover colours.

3. Set aside 6 minutes – yes only 6 minutes to give your blog layout a new fresh look!

DOWNLOAD

CREATING A CSS CLASS

change-masonry-grid-blog-divi-theme-css-class

PASTE IN YOUR CSS CODE TO PAGE SETTINGS & UPDATE BUTTON COLOURS

change-masonry-grid-blog-layout-divi-theme-css-code-read-more-button

Like this video? Please pop over to Twitter and let me know – thank you. Trace x

@SuperDivineWeb