Split front page one images, another one is video

Hi. i am a new user here. I need help regarding my website i tried to create.
my website is https://vibesintegrated.design

i am trying to create website front pages with only Half Images (plus button) and Half Video with button on top
i already tried with Slider Revolution, or even corner stone with 2 columns. but none of it have perfect as i want.

my question : how do i create full screen front pages with half images (plus button) and half video (with button on top) with full screen. as you can see in my website, i tried to create something like that, but the problem is the video never fit the size. Another problem is i am using header to create text which is not as effective as i want. Here is the reference

i am not a coder or develpor, i am just new in website trying to create website on my own. if there is another way without coding please tell me. Thank you

Hi There,

Thanks for writing in!

You can do this using cornerstone, you might need few custom CSS but can be achievable.
Just choose the homepage template as No Container | No header No footer

Then add a two column section with margin less column.

Left coulm you can use background color black and in right column you can use the vidio as background.

Now you can use navigation inline element for the menu items. and gap element for top-bottom space. or custom CSS to maintain the height.


Hope this is clear.

Thanks

Thank you very much for the reply.

  1. i changed the pages templates as blank - No Container | No Header, Footer
  2. i Go to CornerStone and Create New Section
  3. After that i create a new row with 2 coloumns (1/3 and 2/3)

  1. in the Row Section i choose Marginless Coloum after that i go to row and choose the black as background

  1. at the second coloumn i choose video as background

  1. now after i save the website looks like this https://vibesintegrated.design

Please help. THank you

Hi There,

See my answer below.

  1. please active the inner container of for the row.

  2. I had suggested managing the gap and height by adding gap element or Custom CSS height. I believe you have ignored this. Please do this. it will look okay.

To match your requirement you really need custom CSS code that I have mentioned earlier. Which is out of your theme . support scope. Basic things we can help you or you can check Knowledge base articles.

Thanks

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