Using BeaverBuilder to create inner pages for Genesis's Altitude Pro Theme

General Discussions
1

Dear Forum Members,

We would like to use BeaverBuilder to create inner pages on our site: www.pairfum.com

The site is based on WordPress, WooCommerce, Genesis & Altitude Pro Theme.

The new inner pages should be similar to our home page in these respects:

  • transparent header that goes black on hover and scroll,
  • full width image at the top and further images down the page,
  • inbetween will be sections of text / WooCommerce Products / etc.

We started by creating a full page width template based on this tutorial:
https://sridharkatakam.com/full-width-page-template-in-genesis-for-beaver-builder/

You can see the first result here: www.pairfum.com/reed-diffusers/

We find the following issues though and hope that you may have a solution:

  • we cannot place the image right at the top of the screen, under the header (we know how to get the header to be transparent)
  • we find that the images are only full width if we use one of the pre-built templates and not if we start from scratch with a blank page

We would very much welcome your suggestions:

  • if you believe the full width template approach is not the best way forward, and/or
  • how can we place the images right at the top of the screen, and/or
  • how we can create a full width page from scratch, i.e. without going with one of the pre-built templates.

Many thanks for your help.

Pairfum

2

Hey Pairfum,

Thanks for getting in touch!

To place a background image under the header, you’ll want to move the site content upwards so it blends with your transparent header. Using this CSS snippet should get that done.

html .page .site-inner {
  margin-top: 0;
}

The default setting for a row is to use fixed width. You’ll have to change it to full width. Check the screenshot below for reference.
http://imgur.com/x2ARpjq

Hope this helps!

Ben

3

Dear Ben,

Many thanks for your reply and advice.

It is interesting to see that I don’t need the ‘full width template’ to achieve a full page width.

If I use the CSS snippet you suggest, would that not affect every single page on the site ?

Instead, would it work if I did this:
.page-template-full_width_page_template_beaver-php html .page .site-inner {
margin-top: 0;
}
Please note, that full_width_template_beaver.php is the name of the template in the child theme’s folder.

Or should I add the instruction to css styling instruction from the article that I took the full width template from: https://sridharkatakam.com/full-width-page-template-in-genesis-for-beaver-builder/

.fl-builder-full .site-inner {
margin-top: 0;
max-width: none;
padding-top: 0;
}

Alternatively, do you have another suggestion ?

I just added two images / text / a single woocommerce cateogry to the page ( www.pairfum.com/reed-diffusers/ ) and noticed that BeaverBuilder does not automatically ‘force’ the image to go full width:

  • the top image with hyacinths is 1,600 x 400 px and does reach the edges of the screen,
  • the bottom & middle image of the bedroom & living room are 1024 × 683 px and appear to be too narrow for full width.
    How can I force the images in the middle & bottom to be full width ? How can I also restrict their height, i.e. full-width but only 500px high. I cannot see a setting in the ‘row’ or ‘photo’ that would achieve this.

Another question, how do I add a title & subtitle to the top photo ? I tried the text editor under basic modules but that creates a new new row.

I am sorry, to ask such a basic question.

Many thanks for your help.

Kind regards,

Pairfum

4

Hey Pairfum,

You can use this instead so it only applies to any pages BB is used.

html .page.fl-builder .site-inner {
  margin-top: 0px;
}

Or if you want to apply it only when that certain page template is used then you can use this.

html .page.page-template-full_width_page_template_beaver .site-inner {
  margin-top: 0px;
}

You may add it there as well but the snippets above have more specificity making sure it overrides the default top margin applied by your theme.

I don’t think there is any other way to achieve this. Your homepage uses the exact same method as well.

Another question, how do I add a title & subtitle to the top photo ? I tried the text editor under basic modules but that creates a new new row.

You’ll want to set the image as a row background then add the text editor module over it. You can also do the same for the images on the bottom and middle part of the page and add padding to achieve the height that you like.
http://imgur.com/bfzHZEe

Hope this makes sense.

Ben

5

Dear Ben,

I just wanted to say ‘thank you’ for your support.

Your suggestions work very well. Thank you.

There is also another tutorial that offers guidance along the same lines:
https://sridharkatakam.com/beaver-builder-in-altitude-pro/

Kind regards,

Pairfum

6

Hey Pairfum,

No worries! That’s so cool. I’ll bookmark that in case someone needs it later. Thanks for sharing! :slight_smile:

Ben