Add text over full width video

Beaver Builder
1

Hi, I am testing BB out and trying to recreate something I’ve created for a client using a different builder. I have a full width video at the top of my page and I’m simply trying to add text to it. Can’t figure this out. Many thanks

Also, is it possible to post privately or directly to support? I have a few questions and it would be much easier to post a link to the website, but don’t want to post my client’s site up. Thanks

2

[Content Hidden]

3

[Content Hidden]

4

Hey Diane,

Welcome to the BB forums!

I can see the logo is already positioned in the left-hand corner. This is controlled by the theme so if you’re using BB theme you can set the header layout by going to Appearance > Customize > Header > Header Layout then set it to nav right.

The video background can be applied to a row which you can then add in a text module so you have a text overlaying the video. You can position the text by adjusting the text module’s margins.

In the same section, the row background, there is Background Type in there which you can set to Parallax then set an image background.

Jun

5

Thanks for the reply.

Re the logo - I mean in the left hand corner, as if it was full width ie completely in the left hand corner, as per the example link I sent of the site I want to recreate using BB. It is currently in the left within a fixed width.

The text module is in the centre of the of the video row and no matter how I change the margins of it (or the row), it doesn’t move. I want it right at the very top of the video row, as per the example I sent.

In the example I sent, there is a video parallax scroll. Is this possible?

6

OK, regarding the text at the top. It works fine if you use the default height for the row, but as soon as you choose full height for the row, it’s impossible to move the text box. I’ll have a look at global settings and see if I can change the default height of a row somewhere, as the current default height is very low.

7

OK, figured out the text at the top. I was setting the top margin and that was making no difference, but it works setting the bottom margin, so I’ve resolved that. Just the other points I’m still struggling with please

8

Hey Diane,

I believe the only point left is the logo, am I correct? For that, there’s currently no way to make the header into full-width. As a workaround, try using the CSS code below and see if that fixes it up.

@media (min-width: 1100px) {
  .fl-page-header-container.container {
      width: 94%;
  }
}

You can adjust the width value to your liking.

Jun

9

Thanks Jun for the code. However, as a newbie, I have no idea where I should paste this code.

Also I’ve not been able to replicate the parallax scrolling with the video, as per the example I sent you. Is this possible?

10

Hi Diane,

You can put the CSS in Tools > Layout Settings > CSS.

There’s currently no way to apply the parallax effect on a background video. Sorry about that! Feel free to add that in as a feature request on our UserVoice.

You’re free to look into other slider plugins that support the effect. You can use any other plugin with BB via a shortcode or widget. I have not tried it myself but I’ve read that Revolution Slider support it.

Jun

11

Hi Jun,

The code didn’t work. I tried different widths, but nothing. This BB site has the logo on the far left http://support.learnwithus.training/

I tried looking at the source code, but couldn’t figure it out. It is important, as the site has a lot of pages in the main menu, so it will be a long one and don’t want it to look cramped. Plus looks better when there is a video.

Thanks, Diane

PS, yes I’ve found plug ins for the video parallax, thanks

12

Hi Diane,

I have just this moment viewed your site and I am not seeing the CSS provided by Jun. Have you removed it? If so, can you add it back and reply here when you have so we can take another look.

Thanks,
Danny

13

Hi Danny,

I took the code out as it didn’t work and so was trying different code. I’ve added it back in now it you could take a look please. Thanks

14

Hey Diane!

My apologies for that! Try using this code below instead and this time put it under Appearance > Customize > Code > CSS to be sure.

@media (min-width: 992px) {
  .fl-page-header .container {
    width: 100%;
  }
  .fl-page-header .fl-page-header-row {
    width: 100%;
  }
}

Let us know how it goes

Thanks,
Jun

15

Hey Jun, that is perfect, thanks a million. All I’ve got to do now is work out how to move the menu over to the left a little!
Thank you

16

Hey Diane!

No worries! Let us know if you need further help :slight_smile:

Jun

17

Sorry Jun, just a quick one please, as you already have the link. I’m trying to delete what looks like a blog from my footer and can’t figure it out. No hurry. Thanks