How do I build this...

Beaver Builder
1

Hello,

I would like to know how I can build a site like https://www.rankingcoach.com/ with the Beaver Builder Plugin in conjunction with the Beaver Builder Theme.

Im really impressed by the transparent header, the always perfect fitted background image and how the buttons moved under the background image if the mobile view is used.

Can you give me some advice?

Thanks in advance
Bastian

2

Hi Bastian,

If you want to have a transparent header, you will want to first set the Header background color to no color value i.e. remove any hex color code from the header color picker via the Customizer.

Then you’re going to need to add some custom CSS and apply it to both the header and page content area. You could try this, but you may need to play around to get the exact styling you want.

.fl-page-header {
    position: relative;
    z-index: 20;
}
.fl-page-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 30px;
    z-index: 10;
}

You may want to increase/decrease the padding-top value as this will push your content below the header.

Thanks,
Danny

3

Hi Danny,

I will definitely check that out. But what about the always perfect background image? It’s always perfect sized in every browser dimension…

Thanks in advance
Bastian

4

Hey Bastian,

They’re assigning different top and bottom padding per device width via custom CSS and media query. Feel free to check the links below for tutorials re CSS and media queries. :slight_smile:
Media Query Article Link
CSS Tutorial Link

Ben