Flexible section with overlay and link (that a client can edit)

Hi there, bit stuck with this. Trying to create a section like this image, where the grey box overlays the background image. We’ve had a play and while we could probably do this with a ton of css over a bg image on a column we need it to be easy for the client to edit the image and the text and where they link to. So would rather do it just natively in cornerstone and give them instructions.

Any suggestion of the best way to achieve it?

this is the same section on mobile btw.

Thanks,
Mark

Hi Mark,

Thanks for reaching out.

I think it’s best to create it through the Essential Grid and use its Skin Editor to create a similar layout. It’s layer-based so it’s doable. Still achievable by just image and text but that would require custom CSS which may not appropriate to your client.

It can’t be done in CSS without tons of CSS since it has no built-in feature for that. Whil grid is more simpler and easy to manage then just add it in the cornerstone.

Thanks!

Hi Rad,

Thanks for the suggesting.
Annoyingly when I add essential grid I can no longer use cornerstone, just get 500 errors. When I deactivate it works again.
Would you be able to take a look?

Thank you

Hello There,

Please follow up the steps below:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  2. Go to X > Settings and click on the Clear Style Cache button.
  3. If you’re using a CDN(ex: CloudFlare), please clear the CDN’s cache and disable optimization services. For the CloudFlare you also need to follow the steps below besides the developer mode: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/1
  4. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see 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.
  5. Remove custom CSS and Javascript from the options or Child Theme and test the case.
  6. Switch to the parent theme to check if the issue persists.
  7. Reset your htaccess file by renaming it to .htaccess-bak. Then in WP Admin Menu, go to Settings > Permalinks and just click the Save Changes button.
  8. Increase the PHP Memory Limit of your server. Click here for more detailed information and how to increase the PHP memory limit.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

Hi, we’re checking those, I’ll come back to you.
Thanks. :slight_smile:

Let us know how it goes.

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