Creating a faux header with section + question about upper/lower layer

Hey these are all related questions on Section so I figured I’d put them into one support request.

1) What is the difference between Upper and Lower background layers of a section?

I am unsure how this works in terms of the image or video. I usually use the lower layer, yet to not yet understand how the upper layer even functions. Is it like a layer in photoshop? Confused.

2) How to create an 'improv header’

I want to create a kind of header. I cannot use X Pro headers as it overrides and removes the ethos post carousel in the process (which I’ve already discussed with Apex). What I want is to have a section that goes ALL the way across the screen and has the normal sidebar and content below it. While I recognize this could be done with a fullwidth page and a 1/4+3/4 column layout w/widget element and content, I’m wondering if there is an easier way to do this.

Here is the example —> https://intothemythica.com/header-attempt-example/

In that example, the ‘Academy’ image stops at the edge of the sidebar. Also, it has whitespace. I have tried to adjust the margins & padding and what-not yet cannot get it to be flush with the edge of the sidebar or the edge of the screen.

I would like -

a) To have the section go across the full screen, much like a “header” beneath the main menu that I shall use for different areas of the site.

  • or *

b) The CSS on how to make the image be flush with the sidebar and the edge of the screen (instead of the whitespace on the edges as it is now)

I could then turn that ‘improv header’ into a page or a block template and move from there, however I am wondering if there is a CSS or other solution

3) How to stretch a section across the entire screen

This may be answered in the previous question, yet the first question is about a post w/standard sidebar whereas I am wondering how to generally stretch a section across the screen to create that faux header. Example – https://intothemythica.com/akasha-2/

(different from the previous question, this one focuses more on the idea of not a regular post w/sidebar, but a full page that I wish to create a faux section header with, though it is a similar principle)

3a) How to remove the post title to make it visually clean

Again, I feel this relates to the overall design question, which is echoed on the example above. If we do this with CSS, how to make the post title disappear on a per-post basis so as to make it clean and flush?

4) How to make an entire section clickable

What is the CSS to make an entire section clickable on a per-section basis?

Thank You!

Hi there,

  1. The Upper Layer can be used to have for example a pattern over the lower background to make the background darker to be able to read the Text over it better. The best use case is when the lower background is video and it has dark and light seems, then you may have parts of the video which the text over it is not readable. That is where the upper level comes handy to add a layer to make the video darker for example. The best way to understand the case is that you see it in action:
  1. You can not achieve the Header section in question without Pro Header Builder. So the rest of the answer assumes that you use the 1/4 + 3/4 method:

2-a) To make a section to go full width and to remove the white space between columns you will need to go to the Section in question and expand it to see the Row settings:

In the Row options set the Row to be Marginless and without container:

2-b) Meanwhile you can always use the Helper classes to force margins and stuff: https://theme.co/apex/forum/t/customizations-css-class-index/207

Actually with the Global Blocks feature which will be available in the next release in February you exactly can have a premade section to use wherever you like: https://theme.co/apex/forum/t/global-blocks/20497

  1. Set the same Row options and it will be stretched full width. You can also check the Page Templates and you may find cases proper to your need.

3a) Go to the Page in question and from the page settings you will find a section to remove the title:

  1. That needs deeper Javascript coding which I will appreciate if you open up a separate thread to follow up.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

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