Enlarge Section and add buttons

Support
#1

Hello,
Is there a way to enlarge a section so that an image will fill the entire space (left to right) of a page? Also, I would like to add a button on top of this image that links directly to a scheduling website. Is this possible? Like this: http://www.surface85.com/

I am using Renew. My home page in cornerstone doesn’t show when I go directly to my website, so I am not sure how to show you what I need to customize.

Thank you,
Shireen

#2

Also, I have added in my old content into cornerstone vis pages cornerstone edit, but only the “Policies” page keeps showing under the other pages I have edited. I don’t know what is going on or where I should fix this. I appreciate any help you can give me.

#3

Hi There,

http://www.surface85.com/ uses Ethos as a stack. Ethos in my opinon has the best looking blog layout of our stacks, if you wish that your blog look the site I would suggest you switching from Renew to Ethos.

Your home page is a posts page (blog) but you have no posts at the moment. You cannot edit your blog page with CS as it is automatically generated once you create your posts.

If you wish to edit your home page with Cornerstone, go to Wp admin > Settings > Reading and select a static page as your home page. Select for this page under cornerstone > settings > page templates > Blank No Container Header Footer

When you create a page like that, you can add a background image to your section and it will extended to the edges of your site.

Regarding the Policies issue, please clarify.

Thanks

#4

Hello Joao,
Thank you!! I can now see my home page. If I switch to Ethos, will everything be messed up again? I figured out that all my pages were my “Policies” page because I did not set the same menu for all the pages.

#5

I switched to Ethos but I still can’t figure out how to place an image filling the space from left to right on the home screen and adding buttons that overlay onto the image. Can you provide the steps on how I can do this?

#6

Hi There,

Please inspect your section and enable the advanced background option. Set your image as the section’s background.


Hope it helps,
Cheers!

#7

Hello,
Got it! Would it be possible for you to tell me how to add a button to this background image with a color overlay when the cursor hovers over the image?
Thank you,
Shireen

#8

Hi There,

I am not quite sure what you want to achieve, but if you want to add a button on top of the image you can add :

Classic Button Element : this button will follow the styles set on X > Theme Options > Buttons

Button Element: This is highly customizable element.

If you want to use an image as a link you will need to add an Image or classic image element instead of image background.

If you want to do something different, please clarify.

Thanks

#9

Hello Joao,
I would like a color overlay on hover with a button that links to another website for the background image. Is this possible? When I add a button into a column over my background image, the button covers almost all of the background image.
Thank you,
Shireen

#10

Just like this background image on this page: http://www.surface85.com/

#11

Hello There,

Do you want something like this?
http://theafterlash.com/an-x-test/

If that is the case, please do this:

  • Create a section, set your background image and make sure that margin and padding is set to 0.
  • In your row settings, please disable the “Inner Container” option.
  • In your column settings, please set a specific height or at least a minimum height by adding min-height: 420px; just like in my example.
  • And in your column, insert a button element. Please make the background of the button transparent and the hover interaction with something semi transparent background color. Also please set the width and height to 100%. And then add a custom my-section-button class in the “Customize” tab.
  • Lastly, insert the following custom css in the settings tab, Settings > Custom CSS 
.my-section-button {
  position: absolute;
  top: 0;
  left: 0;
}

Hope this helps.

#12

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