Q & A: How Do I Get This Sidebar Look

This was asked in the Facebook Group and I figured I would answer here in case others had the same question:

I love Pat Flynn’s website, SmartPassiveIncome.com– I want to be able to do something similar to his side bar… Is this possible with Divi in the sidebar? Screenshot is attached.  It’s the “Hi there! I’m Pat Flynn” photo section. If you’d like to see it live in action, here’s a link => https://www.smartpassiveincome.com/successful-online-brand/

Blog Page Widget

We can use our widgets and Divi Page Builder to create a customized sidebar.

What are widgets?

  • Widgets in WordPress allow you to add content into widgetized areas of your website.
  • In Divi the widgets are used for sidebars and the footer.
  • In other themes you may be familiar with, the homepage or header areas are sometimes managed via the widgets.

 

Where do I find the widgets?

  • Dashboard -> Appearance -> Widgets OR
  • Dashboard -> Divi -> Theme Customizer -> Widgets

Widgets ‹ Divi Course WordPress

Your site will have default widget’s, which you may use and they will display if you are not using the Divi Page Builder. If you want to add a new special widget, you may create one.  Add the name, save, and then refresh your page.

custom widget

Why do I want to use custom created widgets?

  • Because you want specific content to be delivered on different pages.
  • Because you want different sidebars for different blog categories on your website.
  • Because you want to have different affiliate links / products in sidebars of of your posts.

How do I Add Content to A Widget?

  • If you access the widgets from your Dashboard you will see your available widget content in the center of the screen and then your created widgets in the far right hand column.
  • You simply drag and drop widget content boxes from the center of the screen into the widget you wish for that content to appear.
  • Drag and drop the widget content boxes into the order you wish them to appear.
  • An image widget is relatively new, which makes adding a photo super easy.

I have my widget, how do I get in on the right page?

  • To put your widgets into your pages / posts you will use the Divi Page Builder.
  • Set up your page layout and select modules.
  • Select Sidebar.
  • Within the Sidebar Module you will be asked which sidebar you wish to include.

So to revisit the original question, can there be an image in the sidebar of the blog page. YES you most certainly may.  Simply use the image widget and put it into the sidebar and add the image.  If you are using the page builder, create as many different widgets as needed, propagate each one with content, then when building pages, add the desired widget.

NOTE:  On mobile devices, the sidebar image will stack below the content (just like reading a book content is delivered left to right, left hand content is presented above what is on the left).  If you want the sidebar content to be presented first on mobile, hide the display on mobile and duplicate your section, reverse the order and then hide that section on the desktop view.  There is an excellent post on how to Adjust Divi’s Stacking Order on Mobile over on Elegant Themes Blog.

disable display on devices on divi

Happy creating.

A little about the author, Eileen Lonergan

Eileen Lonergan is a WordPress website designer and internet marketing specialist. She is the founder and Community Manager of the Divi Theme User Group on Facebook. Eileen's focus is on web design, content marketing and search engine optimization.

1 Comment

Submit a Comment

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items. Please be aware that you will need an amount of experience in WordPress to take advantage of our themes and plugins. Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads. We do not offer refunds under any circumstances. If you feel that there is an issue with a product please get in touch with the developer of the product through their contact details which can be found within the plugins Dashboard, themes and documents we sell on their behalf. Rudeness to our developers or support staff will not be tolerated and support may be refused. By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - we send out around two emails a week to keep you informed of product updates, WordPress News and Developer advice. You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email. (Amended. February 6th 2018)

Get the latest news!

Join our mailing list to receive the latest news and updates from our team.

Thanks, we appreciate your support

Pin It on Pinterest