[justincourageParticipant]

I use Cornerstone and I’m looking to create a container that overlaps a slider revolution slider at the top of my page. I’d like it to act as a header and then the rest of the page is basically within the container.
the url is http://www.carakuulei.com/snapchat-filters-on-instagram

I’d like to make my site look like the image attached. How can I do this?
the url for that site is http://www.garyvaynerchuk.com/millions-of-tweens-using-musically-app/

thank you!

[justincourageParticipant]

forgot to add the image

[justincourageParticipant]

realistically, i’d love for my blog posts to act just the way his does. with the parallax and the container with other items in it.

[LelyModerator]

Hi There,

Thank you for the sample URL.
Please add the following on your Cornerstone > Settings Tab > Custom CSS:

#x-section-1 {
    position: fixed;
    top: 0;

}
#x-section-2 {
    padding-top: 60% !important; /*Adjust this accordingly*/
}

Hope this helps.

[justincourageParticipant]

awesome! ill try it out. Also, how do I add my post title where my heading is, instead of using text? Is there a shortcode?

Becuase I’m using text, when it gets shared on social it repeats the title in the share preview.

And one more thing; how do I add an author to the post? There’s no option for it. I’d like that to show up on the social preview as well. Attached there is a sample of what I’m talking about.

Oh, and as you can see I wrote the date in there as well, manually. Is there a way to use a shortcode or something else so it won’t show up like that in the share preview?

With the second image attached you can see the top of my post. I’d like all of that not to show up in the share preview and some how use shortcodes or any other method you suggest. Thanks.

[justincourageParticipant]

So I tried doing using the custom CSS you gave me, but it’s not moving section 2 on top of section 1. It’s staying where it’s at. Anything else I should be adding to make it move up?

[LelyModerator]

Hi There,

You can use custom headline element:http://demo.theme.co/integrity-1/shortcodes/custom-headline/ for the title.

For the author, you can go to Appearance > Customize > Blog > Set Post Meta to ON. Alternatively, we have author shortcode:http://demo.theme.co/integrity-1/shortcodes/author/

For the sharing issue, that is because you have added the title as content. You could change description for Facebook, Google+ and Twitter with Yoast SEO plugin

Regarding the positioning, I didn’t see above CSS on your page when I checked.

Hope this helps.

[justincourageParticipant]

thanks so much!

I put the code in the Custom CSS section in Cornerstone of my specific post. Does it need to be on top? Or am I missing something?

the url is http://www.carakuulei.com/snapchat-filters-on-instagram-stories

[justincourageParticipant]

Or where do I fill in the custom fields for the names of my sections?

After #x-section-custom-section-name?

Maybe I’m not doing it properly,

[justincourageParticipant]

Ok so I got the code you gave to become colorful by putting it at the top of the Custom CSS, which I’m assuming that means its working. But now, it’s still not overlapping.

Do I need to change any of my margins or padding within the rows or sections?

[JadeModerator]

Hi Justin,

The code suggested in response #1121409 is not working when you placed it in the custom CSS panel because the code added is incorrect. See screenshot below.

#.x-section-1{position:fixed;top:0;} is incorrect since you are trying to target the ID of the first section.

It should be #x-section-1{position:fixed;top:0;} without the period which is used to reference a class.

You may use your custom section ID by adding an ID name to the ID field of the section in Cornerstone left panel.

Hope this helps.

[justincourageParticipant]

awesome! got it. Now, is it possible to parallax that image?

[RupokMember]

Hi there,

Unfortunately it’s not possible to apply parallax there.

Thanks!

[justincourageParticipant]

how is it accomplished on a site like this?:

https://www.garyvaynerchuk.com/millions-of-tweens-using-musically-app/

And also for the image to fade the further I scrool?

Thanks!

[JoaoModerator]

Hi There,

I can´t see any parallax on the page you sent as a reference.

It has a fixed background just while the boxed content in front scrolls normally, but no parallax.

Would you mind sharing the exactly URL where you would like to apply that?

Thanks

Joao

[Author]

Posts