[Resolved] Right Sidebar merge

[David]

Ok

1. in Customizer > Layout > Container change the Content Layout to: One Container.
2. now create a Block Element – Page Hero to display your Title and Meta:

https://docs.generatepress.com/article/block-element-page-hero/

That will give you the structure you require.

[iamarghya]

But can I create the same page hero design Now I have?

[David]

Yes, you have all the design tools in GenerateBlocks and the Block Element to style it the way you want. it may take a little CSS to create an overlap.

[iamarghya]

and what to do if i wanna show them in the free space as I asked I will ask you again for the sidebar as I got problem

[David]

Put the settings back to the way they were, keep the sidebar enabled and let me know – and ill see what can be done.

[iamarghya]

ok I changed it in the default mode

[iamarghya]

I have created what u said for this one post for experiment see..

[David]

This CSS:

@media(min-width: 1400px) {
    .single-post.right-sidebar .site-content {
        position: relative;
    }
    .single-post.right-sidebar .site-content .content-area {
        width: 100%;
    }
    .single-post.right-sidebar #right-sidebar {
        width: calc( ( 100vw - 1250px ) / 2 );
        right: 0;
        transform: translatex(100%); 
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .single-post.right-sidebar .inside-right-sidebar {
        position: sticky;
        top: 0;
    }
}

On large screens ie. 1400px will position the right sidebar in the space to the right of the content and make its contents sticky.

[iamarghya]

what is this CSS for? its breaking my screen

[David]

This:

On large screens ie. 1400px will position the right sidebar in the space to the right of the content and make its contents sticky.

As you requested here:

https://generatepress.com/forums/topic/right-sidebar-merge/page/2/#post-2161952

But it higlights an issue with your design idea – you have to have a very wide screen to accomodate the centered content and a ‘sidebar’ to its side.

[iamarghya]

yes now I got the idea… and see this link. as you say how to overlap the page hero and the content..
and also tell me as I asked can I add those advertise in the right side of the content without a sidebar is this possible with element?

[iamarghya]

Oh I can overlap those with margin CSS it will take time but can be done. Thank you very much now only last question that
can I add those advertise in the right side of the content without a sidebar is this possible with element?

[David]

It is possible to Hook something in – but its much easier to use the Sidebar. Any reason why you don’t want to use the sidebar ?

One thing to note: edit the Block Element, and empty Paragraph Blocks should be selected and Backspace Deleted otherwise they occupy space on the screen. You have one below the page hero thats adding extra space.

[iamarghya]

yes I don’t wanna use the sidebar because I want to give my reader a clean and good reading experience and adding a sidebar either change the width of my design or it will create a bulky experience But I noted down all points and all this things I wanna know if I want to add some advertise, for that but after creating the sidebar and designing them I don’t like them it will destroy my design principle.
So see my website now, assume I wanna add a square box add right side of my content not sticky just there is there any way to add the advertise code there and hook that in the free right side of my content?
And for all the help thank you…

[iamarghya]

Actually I have designed it in a responsive way so in every width reader can enjoy their read. so check my post now and tell me is this now possible to show advertise in the free right space without a sidebar

[Author]

Posts