How to Make the Interior Design Layout Pack Social Media Ready with Divi & Monarch

Last Updated on September 22, 2022 by 5 Comments

How to Make the Interior Design Layout Pack Social Media Ready with Divi & Monarch
Blog / Divi Resources / How to Make the Interior Design Layout Pack Social Media Ready with Divi & Monarch
Play Button

Every week, we provide you with a new and free Divi layout pack which you can use for your next project. Along with every layout pack, we also share a use case thatโ€™ll help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, weโ€™re going to show you how to make your Interior Design website social media ready with the Interior Design Layout Pack, Divi and Monarch.ย  Besides showing you how to add social sharing icons and social follow icons to your pages and posts, weโ€™re also going to create a matching blog post template layout that you can use for all the posts you create on your interior design website.

Table Of Contents

Use Case Sneak Peek

Before diving into the use case blog post, letโ€™s take a look at what weโ€™re going to create visually. First of all, weโ€™ll be adding Monarchโ€™s social follow feature which you can place wherever you want on your pages. Weโ€™ll display the number of followers for each one of the social networks as well to create social proof throughout the website in a subtle way.

monarch

Weโ€™ll also show you how to add social sharing icons to each and every blog post. On top of that, weโ€™re also creating a nicely-looking blog post template layout which you can reuse for each one of your future blog posts.

monarch

How to Make the Interior Design Layout Pack Social Media Ready with Divi & Monarch

Subscribe To Our Youtube Channel

The Setup

1. Install and activate the Divi Theme
2. Install Plugins
3. Download the Layout Pack and Import the Interior-Design_All.json file to your Divi Theme Library.
4. Create new pages for each layout.
5. Create your primary menu.

If you are confused by the setup listed above, you can find more detailed instructions on how to setup your layout properly by checking out these 10 steps for using a layout pack for your new project.

Part 1: Download & Install the Monarch Plugin

Step 1: Download Plugin

The first thing youโ€™ll need to do is download the Monarch plugin. If youโ€™re an Elegant Themes member, you can find the plugin in the Memberโ€™s Area after you log in. If youโ€™re not an Elegant Themes member yet, go to the following page to become a member of our empowered community.

 

monarch

Step 2: Upload & Activate the Plugin

Once youโ€™ve downloaded Monarch, go to your plugins > Add New, upload the zipped file and make sure you activate your plugin as well.

monarch

Part 2: Set up Your Social Follow Icons

monarch

Step 1: Go to the Monarch Settings

To set up your social follow icons, start by going to Tools > Monarch Settings.

monarch

Step 2: Add Most Relevant Social Media Channels & Enable โ€˜Open Link in New Windowโ€™ Option

Then, open the Social Follow option, go to Networks and add the relevant social media channels linked to your Interior Design company. No need to add all of the options there, try focusing on the ones that bring the most added value. Enable the โ€˜Open link in new windowโ€™ option as well.

monarch

Step 3: Appearance Settings

Then, move on to the Shortcode tab and apply the following changes to the appearance of your social follow icons:

  • Icon Placement: Centered
  • Number of Columns: Auto Width
  • Display Follower Counts: Yes
  • Minimum Count Display: 0
  • Display Total Followers: No
  • Display Network Names: No
  • Outer Text Color: Dark
  • Remove Icon Spacing: No
  • Hide On Mobile Devices: No
  • Use Custom Colors: Yes
  • Background Color:ย #1a1a1a

monarch

Step 4: Generate Shortcode

Once youโ€™ve made all of the appearance changes, you can go ahead and generate a shortcode. Copy this shortcode as you will need it in the next steps of this post.

monarch

Step 5:ย Choose Social Follow Icons Position Strategically

You can place these social follow icons wherever you want on your website. However and preferably, youโ€™ll choose a strategic position and wonโ€™t add them too often as it may become disturbing. A few good places where you can add the social icons are:

  • The blog section on the home page or landing page
  • The about page
  • Any place else that doesnโ€™t include a CTA already

monarch

Step 6: Add Text Module

Although you can add it wherever else you want as well, weโ€™ll be showing you how to add it to the blog section of the homepage. After creating the integration first, you can reuse the Text Module wherever else you want on your website. So, go to your homepage, enable the Visual Builder and add a new Text Module right below the existing Text Module of the blog section.

 

monarch

Step: 7: Add Shortcode to Text Module

Then, add the shortcode to the Content box of the Text Module. This will make your social follow icons show up.

 

monarch

Step 8: Modify Text Module Width According to Position

Depending on the position of your social follow icons, youโ€™ll need to modify the width of your Text Module to match the design. For the example below, weโ€™ve used โ€˜13%โ€™ for desktop and โ€˜20%โ€™ for tablet.

monarch

Part 2: Create Custom Blog Post Template Layout

monarch

Step 1: Add New Post

To create the blog post template layout, start by going to Posts > Add New to create a new post.

monarch

Step 2: Add Title& Featured Image

Then, add a title and featured image to your post.

monarch

Step 3: Enable Divi Builder

Next, enable the Divi Builder.

monarch

Step 4: Modify Divi Posts Settings

And before moving on to the Visual Builder, make the following Divi Post Settings apply:

  • Page Layout: Fullwidth
  • Post Title: Hide

monarch

Step 5: Switch Over to Visual Builder

Then, switch over to the Visual Builder to continue creating the blog post template layout.

monarch

Step 6: Upload Blog Layout

Once youโ€™re there, upload the blog layout included in the Interior Design Layout Pack. Weโ€™ll be reusing most parts of this layout and make some changes to keep the work we need to put in to a minimal.

monarch

Step 7: Delete Hero Section Text Module

The Text Module within the hero section of the Interior Design blog layout is unnecessary in this case. Thatโ€™s why you can delete it right away.

monarch

Step 8: Change Hero Section Spacing

Then, open the section settings and change the top and bottom padding of your section to โ€˜5%โ€™.

monarch

Step 9: Upload Featured Image as Hero Section Background

Within the section settings, change the background image into your featured image as well. Youโ€™ll have to change this background image every time you reuse the blog post template layout to match with your new blog post.

monarch

Step 10: Add Post Title Module

Moving on, add the Post Title Module to the column of your row.

monarch

Step 11: Disable Featured Image Element

Since weโ€™re already using the section background for our featured image, you can go ahead and disable the โ€˜Show Featured Imageโ€™ option of the Post Title Module.

monarch

Step 12: Text Settings

Then, move on to the Design tab and apply the following changes to the Text subcategory:

  • Text Color: Light
  • Text Orientation: Center

monarch

Step 13: Title Text Settings

Next, open the Title Text subcategory and use the following settings:

  • Title Font: Muli
  • Title Font Weight: Bold
  • Title Text Size: 50px
  • Title Line Height: 1.7em

monarch

Step 14: Meta Text Settings

The Meta Text subcategory, will instead, need the following settings:

  • Meta Font: Muli
  • Meta Font Weight: Regular
  • Meta Text Size: 14px
  • Meta Line Height: 1em

monarch

Step 15: Remove Blog Module

Scroll down the post youโ€™re working on and delete the Blog Module that is already present.

monarch

Step 16: Add Text Module

Continue immediately by adding a Text Module to that row instead. This Text Module will contain the content youโ€™ll be sharing with your visitors.

monarch

Step 17: Text Settings

After adding some sample text or your first blog post, move on to the Design tab and make the following changes to the Text subcategory:

  • Text Color: Dark
  • Text Font: Muli
  • Text Font Weight: Regular
  • Text Size: 17px

monarch

Step 18: Heading Text Settings

For the Heading Text subcategory, use the following settings instead:

  • Heading Font: Muli
  • Heading Font Weight: Bold
  • Heading Font Style: Underline
  • Heading Underline Color:ย #f4583f
  • Heading Underline Style: Double
  • Heading Text Size: 26px
  • Headling Line Height: 1.8em

monarch

Step 19: Change Sizing

Lastly, scroll down and change the Sizing of your Text Module into:

  • Width: 68% (Desktop), 100% (Tablet & Phone)
  • Module Alignment: Center

monarch

Step 20: Save Layout for Future Posts

Now that youโ€™re done editing your blog post template layout, you can go ahead and save it in your Divi library. This will allow you to reuse the layout everytime you create a new blog post. Of course, youโ€™ll need to modify some things everytime you create a new blog post such as the featured image, hero section background image and the content.

monarch

Part 2: Set up Your Social Sharing Icons

Step 1: Choose Sidebar

Now that you have your first sample blog post, you can add your social sharing icons and see what they look like on your posts. Start by going to Tools > Monarch Settings > Social Sharing > Locations and choose โ€˜Sidebarโ€™ as your location.

monarch

Step 2: Add Relevantย Social Networks

Next, open the Networks tab and add as many social networks you need to the sharing possibilities.

monarch

Step 3: Sidebar Appearance Settings

Last but not least, open the Sidebar tab and make the following appearance settings apply to your social sharing icons:

  • Sidebar Direction: Left
  • Intro Animation: Slide Right
  • Display Share Counts: No
  • Display Total Shares: Yes
  • Total Shares Text Color: Dark
  • Display โ€˜All Networksโ€™ Button: No
  • Add Icon Spacing: No
  • Hide On Mobile Devices: No
  • Use Custom Colors: Yes
  • Background Color:ย #f4583f
  • Post Type Settings: Posts Only

monarch

Final Thoughts

In this post, weโ€™ve shown you how to make your website social media ready using the free Interior Design Layout Pack, Divi and Monarch. Besides showing you how to add social media followย icons for social proof to your website and social sharing icons to your posts, weโ€™ve also put together a blog post template layout which you can use for all of your upcoming posts. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Featured Image by COME 2 US / shutterstock.com

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

5 Comments

  1. very helpful, thank you

  2. I love Monarch and use it on most of my sites.

    BUT…

    Monarch has the worst interface ever. It is highly unintuitive and to this day I still find myself trying to remember what certain things do because it isn’t readily clear. There is no descriptive text for any of the controls and the sections could be better organized.

    In any case, Monarch still rocks, although it could use a hook for adding an email icon. Funny how we can have one for printing but not sending an email.

  3. What I would like to know is if THIS is the best and recommended way of creating and using blog post template layouts!

    While it seems great to be able to do this, it will obviously not allow for retrospective layout changes to existing blog posts, nor will it enable you to make layout changes to any blog posts – globally, i.e. you change the layout and it would change all existing blog posts automatically!

    I think this has been discussed a few times, can we get an answer if there are plans to implement the creation of blog post page templates/layouts and blog post templates that can be switched on and off so they will apply to ALL blog posts?

  4. Would you be able to add related posts to the blog template?

  5. Impressive, plus a nice layout.

    I love these post.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today