Picture anchor and custom section layout manager

Support
#1

Dear support team, I have the following 2 questions:

  1. How can I anchor a background image / video while scrolling, if necessary, several times with different images? Good sample page: https://www.xandy.club/

  2. Can I divide a container more flexibly than just e.g. 4/5 + 1/5? Goes e.g. also 17/20 + 3/20 or 37/40 + 2/40 + 1/40 or similar? Cornerstone does not accept values from 5 on the Section Layout Manager.

Sorry for my bad english!

Thank you very much for your great help !!

#2

Hi there,

Thanks for writing in.

  1. You can add a background image to your section and enable its parallax option. Then add a gap element in that section and define its size, it will serve as the height of your section. Unfortunately, it’s not possible for videos.

You can turn on the parallax option once you inspect and set the background to your section.

  1. It’s a bit tricky, but the total should be 1 whole in fractions. Example, 1/2 + 1/2 = 1 whole, or 1/4 + 1/4 + 1/2 = 1 whole. But what you’re trying to implement is a bit to narrow, I’m not sure if it’s going to work in terms of readability.

Thanks!

#3

Thank you for your quick reply!

to 1.) Unfortunately, I can not go on with the explanation. Please have a look on my page under section 7 (https://psycheundcoaching.at/). There I inserted a background image, switched parallax on and built a gap element. Nevertheless, the picture just scrolls up. But it should stop until the section is completely scrolled up.

to 2.) The sum in fractions is always = 1 for me, e.g. 20/25 + 3/25 + 2/25 = 1. But Cornerstone does not accept that. I can only up to max. x / 5 go.

Thank you for your support!

#4

Hey Steffen,

  1. Your image is small to be used as parallax. You will need to use an image with width greater than or at least the same as your monitors resolution. Or, I’d recommend at least full HD image size.

  2. Your setup will not work because custom columns supports up to 5 columns only. Having more columns will actually add bloat to the theme so it is not good for performance. If you need 25 columns, you will need to hire a developer to build the custom columns for you.

Thanks.

#5

Hi Christian, Thank you for your answer and sorry for my bad english! But I still need help and describe again what I mean exactly:

to 1 .: I changed the picture once. It now has 1772 × 1181 pixels. Nevertheless, I do not see the effect. Is this resolution sufficient or is the implementation of parallax incorrect? Look again please at the sample page https://www.xandy.club/. There, the desired effect is nice to see. First, you see a (background ?) image, then a content-container slides over it and then another anchored image appears. It follows again a text-container etc.

to 2 .: I need only 2 to 3 columns, but would like to set their width individually. For example, the first column should be 7/9 of the page width and the second column 2/9. I can not register that way. The minimum column width seems to be 1/5 of the page width. Is that correct?

Thanks again for your great support!

#6

Hey @Willibald33,

You’re welcome.

1.) Your image size is set to contain. It should be set to cover.

The parallax effect in your sample site could be achieved using a CSS shown here

2.) Yes, 1/5 is the smallest you can setup. 5 columns is the furthest you can control.

If this doesn’t help, please give us access to your WordPress admin so we could check your actual setup and maybe we can set an example for you to use.

Thanks.

#7

Hi Christian, thank you, we are on the right track!
It already works in Cornerstone. There, the background remains as desired and the following section slides over the picture. So far so good. I have inserted the following css:

.x-bg-layer-lower-image {
background-attachment: fixed
}

Unfortunately, it does not work on the live page yet. There, the picture is still pushed upwards.

What am I doing wrong here? Do you want to look directly into my cornerstone?

Thanks again!
Steffen

#8

Hey Steffen,

Can you give us a screenshot of the section and also access to your WordPress admin in a Secure Note so we could check your setup in the backend.

Thanks.

#9

Hey Steffen,

The CSS actually does not save that is why it works in Cornerstone but not in the frontend. This is most probably because cornerstone-endpoint is blocked by your host. Please contact your host to whitelist cornerstone-endpoint from Mod Security settings.

Thanks.

#10

Hey Chris,

I asked my hoster if he blocked something on the server. That’s not the case. There is no access restriction. I should clarify with you, which PHP version is needed for cornerstone-endpoint and how the complete requirements to the server are.

What you think, can you help me with that?

Many thanks!
Steffen

#11

Hi Steffen,

You need to have at least PHP version 5.6 and a memory limit of at least 256M.

Can you try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

#12

Thanks a lot, Paul! Everything works fine after removing all plugins. Now I test with which plugin there are problems.

Thank you again! You all are doing a great job!

1 Like
#13

Glad to hear that. :slight_smile:

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.