How to create sidebar with photos and buttons

Hello,

What is the best way to create a sidebar like pictured below? I’ve read a few other forums but I haven’t found one that is super helpful to creating one that looks like this. I’m not sure the appearance / widgets section will work because we want something with photos.

Thank you,

Ashley

Hi Ashley,

Thanks for reaching out.
I would suggest you use the Image widget to add the images in the sidebar as you are expecting.

Hope it helps.
Thanks

Is there a way to have multiple sidebars that are assigned to different pages? Or will that require a plug in?

Hi Ashley,

If I am understanding it correctly you want to assign a different sidebar to different pages. If that is the case, you can do that by using the Appearance > Sidebars where you can create multiple sidebars and assign it to different pages. I would suggest you go through the following article on this.

If you are trying to assign multiple sidebars in a single page or post, unfortunately, that is not possible at this moment.

Thanks

Hi. Yes, that is correct, I would like to add one sidebar onto different pages.

I followed the directions on that article but still do not see the sidebar. First I created a sidebar named “Blog Hawaii” and assigned it to this page: https://revealhm.com/blog-fresh-makeup-hawaii

Then I went to the widgets section and added an image, text, and button. (Side questions, how can I customize this button to be square and white?)

However, the sidebar is not appearing.

Hi Ashley,

It seems that you have selected a Page Template without a sidebar. You need to select a Page Template with sidebar option or Default template to show the sidebar on the page.

Regarding the Button styling, you need to add the custom CSS code to change the color and shape of it.

Thanks

I selected the page temple content left - side bar right, and the side bar didn’t show up. Additionally, we do not want the content to have a container. As you can see, it shortened the accent line on the title of the page and reduced the size of the colored background.

Hello Ashley,

In your Cornerstone > Theme Options > Layout and Design, you have choose to have a “Fullwidth” content layout.

Because of the above setting, you cannot simply use the Content Left - Sidebar Right page template. You will need to change the content layout first in the Theme Options.

Kindly let us know how it goes.

Hi Ruenel,

The “Fullwidth” content layout is already selected in Cornerstone > Theme Options > Layout and Design. The Content Left - Sidebar Right is still not displaying.

Thank you.

Hey Ashley,

You need to change the “Fullwidth” to “Content/Sidebar” or “Sidebar/Content” first. Sorry for the confusion.

Hope this helps.

Got it, thank you!

Is there a way to have the sidebar begin at a lower point? I’d like the pink box with the title to stretch across the whole page, and the first image of the sidebar to begin alongside where the text begins with “congratulations…”

Hi Ashely,

That is not possible with the Default template you are using. You can achieve that by using the Layout Builder and using the pre-defined template with the Sidebar as shown in the screenshot and assigning it to the specific page or post.

I would suggest you go through the following article and videos on Layout Builder and Single Template and add widget areas into the sidebar.



Hope it helps.
Thanks

This is a great resource! Thank you very much!

Hi Ashely,

Glad that we are able to help you.

Thanks

How can I erase the grey in the background so the title, content, and sidebar are expanded to the full width of the page? I want it to appear like a normal webpage and not be separated with a grey background.

Thank you!

Hi Ashely,

I have checked your website and found that the page is coming in the full width and not showing the grey background. Please check and let us know if you still having the issue.

Thanks

Hi,

There is still a grey background on this page: https://revealhm.com/blog-favorite-half-up-hairstyles/

I would like there to be no grey background and the content to extend the full length of the page.

Thank you,
Ashley

Hey Ashley,

Please edit your layout and separate the Rows with each own Section element. Each section must have its own background colors (#f6ebe4 and #fff).

Screen Shot 2021-11-20 at 8.39.09 AM

In your Row element settings, you need to enable the Global Container option.

Kindly let us know how it goes.

Thank you very much!

You are most welcome, Ashley.