Add full width images with call to action

Support
#1

Hi, I’m creating a new website and I have used a demo to start with but I’m now trying to create pages from scratch and I want to add images that have no margins and go full width (banners or bigger images), is there an easy way to do it? I can’t seem to find it on the knowledge base and using cornerstone I only get to add an image on a section and it’s boxed.

Any suggestion?
My website is www.mysardiniaholidays.com and the idea is to add an image like the one already in the demo (where I also added a white box and a button) for consultancies in the home page.

Thanks!

#2

Hi Clelia,

Your page need to have a Blank - No Container template first like the homepage before you can make your ROW a full-width.

Then turn off the ROW’s Column Container option and add your image as the section’s background.

Cheers!

#3

Splendid, I tried and it worked, thank you! Just one more thing, on the preview when I am adjusting the padding to make the banner bigger, it shows the majority of the picture while after saving and seeing the live version it is still smaller than the preview on my screen (a macbook air 13), also when I go to the mobile version, it shows the whole picture.
The page is this one:https://www.mysardiniaholidays.com/about-sardinia-holidays/

Another small issue: on the WHY THIS WEBSITE? section, in the mobile version there is a lot of space in between the writing and the round picture, is there a setting to fix that? It doesn’t look cool with all that space.

Thanks a lot in advance!
Kind regards
Clelia

#4

Hey Clelia,

1 - This is because the background image covers the section and the section’s top padding is fixed. Because it’s fixed, the height remains the same size regardless of the screen size but the screen’s width varies so there’s a mismatch in the image aspect ratio and the section’s proportions.

The solution for this is to use a Gap element above and below your other elements. The Gap element has a Hide Based on Screen Width feature so you can have different spacing on different screen sizes. Please see this quick screencast https://youtu.be/Kn__cb-bVSs

2 - The space is from a Gap element that is not hidden on mobile. Please set the Hide Based on Screen Width option.

Thanks.

#5

Thank you, got it, I removed the space, I think, for mobile (i clicked on the last 3 icons) and now the gap is diminished but there is still space in between, not a big issue, it’s ok.

I don’t know if I should open another ticket but I’m having some more important issues with the blog page. I am using WPML plug in for translation and everything seems to be quite smooth so far, so If you go to my blog page here: https://www.mysardiniaholidays.com/blog/

It’s a bit messed up. I try to explain: I created all the categories in both languages and I’m ok with the option at the top “Filter by topic” so I want to leave it on. But when you first click on blog it only shows a random category unless I click on “all” it shows this random category.
The category is different if I switch to Italian language. Still random.

I have put the categories ID on the customizer under the ethos blog settings (I put both the ID for the categories in English and Italian, is that correct? I noticed that if I only put the category for Italian the post still shows up in the English version).

Another weird thing, on the English version, 2 posts (one is the family holidays and the other is Luxury hotels) are shown not with the usual small image on the left but full width, while on the Italian version they don’t (I prefer the Italian version)

What should I do to:

  1. Have all the posts in the categories I have chosen showing when I go to the blog page (so that the reader can decide whether to filter them or not)?

  2. Get rid of the full width annoying blog posts in the English version?

Thanks a lot!
Clelia

#6

Hi Clelia,

1.) By default, it will only show the post inside the category on the current page. It is possible with customization but it will be outside the scope of our support. Although, I can point you to the template that handle this part. It is _index.php on this folder: \wp-content\themes\x\framework\views\ethos. Feel free to copy that file on the same folder on your child theme and then adjust as needed.

2.) To get rid of the fullwidth image, please disable below setting:

Hope this helps.

#7

Thanks, I am a bit confused about this. What does exactly means when you say: 1.) By default, it will only show the post inside the category on the current page? What current page are you talking about? Bein it the Blog page, there is no specific category in there… so I’m a bit confused…

  1. Where can I find the setting? on the customiser I don’t think I’ve seen it… also if I set it not full widht, will this affect the slide at the top of the blog page where the images are full widht?

Thanks again!

#8

Hi There,

1.) I am sorry for the confusion. Let’s try again. Since you’re using filterable index for your blog, the posts being displayed are specific to active category from the filter. The active category is always the first one. And your first category: ROMANTIC SARDINIA only contains 3 posts. Maximum display per page on blog index page is set on Settings > Reading: Blog pages show at most.

2.) Edit the specific post that is showing fullwidth. You can see that setting below the main content area.

#9

Thanks Lely, all clear now. I didn’t tick the full width on the post, it probably was already there, good to know so now I know how to fix it.

As for showing all the categories, I understand that I would have to fix it separately. No problem.

One more question (I have asked it on the FB page support but so far I didn’t receive a reply). I’m trying to translate the essential grids and revolution slider into the Italian Version but I can’t find any tutorial for it (maybe they are not compatible with WPML)?

For the essential grid i was thinking about duplicate the grid, place the Italian text and link to the italian post and then go to the translated page where I placed the original grid in English): https://www.mysardiniaholidays.com/best-tours-sardinia/ and change the grid to the Italian version.

Not sure if this is a good way to do it as when you change things outside cornerstone it creates a conflict, but so far is the only option I could think about.

For the revolution slider I have no Idea on how to proceed.

Thanks again for your help!

#10

For the Essential Grid, yes, you need to duplicate the Grid and link to the post manually.

For Slider Revolution, please see https://wpml.org/documentation/plugins-compatibility/creating-multilingual-sliders-with-revolution-slider-and-wpml/

If you have further questions, please open a separate thread to avoid confusion.

Thanks.

#11

Thank you!

One more question… I have a page in here Sardinia Holidays and if you go to the Italian version, the images and overall page looks bigger. I checked if the pages had the same set up (no container, header and footer) and they are the same, so I’m wondering why there is this difference in layout? I’m sure I’m probably missing something, all I did was going to the list of pages and click on the translate editor and saved the italian version, nothing more.

Any clue on why that is and how I can fix it?

Thanks again!

#12

Your page returns a 404. Please check and it would be best to open this in a separate thread.

Thanks.