Sidebar vs No Sidebar

[eutaw]

Using X-Theme, can a website have some pages with a sidebar and some without a sidebar? For example, on my page Design MCW203, there is no sidebar. Am I able to duplicate that page and add a sidebar? If so, do I just change the setting for that page from No Container|Header, Footer to Sidebar|Header, Footer?

I tried to create a page using Sidebar|Header, Footer, but there doesn’t appear to be space for a sidebar. Please see page MCW300.

I’m trying to show that websites can be designed with or without a sidebar and give examples of how the websites would look. I know this can be done but not sure how to accomplish this with X-Theme.

Please Help!

[ruenel]

Hello @eutaw,

Thanks for writing in!

If you want to have a sidebar in your single blog posts, you will need to set a sidebar globally. To do that, simply go to X > Theme Options > Layout & Design > Content Layout and select “Content Left, Sidebar Right” or “Sidebar Left, Content Right”.

And then if you want to have a page that is fullwidth, you will edit that page and use a page template that is fullwidth like the “Layout - Fullwidth” or the “Blank - No Container” page templates. If you want to have a sidebar in your page, you can use the default template, the “Layout - Content Left, Sidebar Right” or the “Layout - Sidebar Left, Content Right” page templates. To know more about the different page templates, please check this out: https://theme.co/apex/forum/t/features-page-templates/50/1

Hope this helps. Please let us know how it goes.

[eutaw]

Thank you. I did get the sidebar, but my images aren’t displaying correctly on the Content side. Please see page Design MCW300. In section Logobanner, the image appears the correct size, but is much smaller when I view the page. The width is correct, but the height isn’t. How do I get the height to be 250px?

Also, in section 5 of that page, how do I get the image to be the same width as the section?

[jade]

Hi there,

Would you mind posting the direct link to the page in question?

I tried checking the pages of your site but there are several pages that are titled MCW… and I am not certain which one has the sidebar.

For the meantime, try double checking if you have the media settings of JetPack set to have the images on the site display at a certain dimension.

Thank you.

[eutaw]

The direct link is in Secure Notes. I don’t understand why Jetpack settings would impact image sizes. I’ll have to go find out about JetPack, not familiar with it.

[mldarshana]

Hi There @eutaw

That is because of the picture resolution that you’re using. It will automatically resize according to the space, so that the image is proportionally reduced.

If you want to set a particular height, try adding the following CSS rule into your section.

min-height:250px

Click on the customize tab in your section, to access inline CSS area.

Hope that helps.

[eutaw]

That gave me the height I want, but the entire image no longer shows. The image is truncated.

[paul.r]

Hi,

Try to set background size to Contain.

Hope that helps

[eutaw]

That didn’t work. It shows the entire width of the image but I lose the height. I want the height to remain at 250px. Is there a way to get both?

Also in Section 6 with the three rectangles, how do I get them to start at the left side of the section and end at the right side of the section (without any padding)?

[ruenel]

Hello @eutaw,

If you want to have a fixed height of your background image, please insert auto 250px in the size field.
For more details about the background size, please check this out: https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=200px

In Section 6 with the three rectangles, please click the row and in the row settings, disable the “Inner Container”.

Please let us know how it goes.

[eutaw]

Thank you.

[ruenel]

You are most welcome!