Docs

[Kelsey L]

Hello,

I’m starting a new project for a client and they’d like a very specific flash page. They want it to be full screen, with one image on the left and one on the right, each linking to a separate section of the site. They’d like each image to be black and white, changing to color on mouseover. Their inspiration is this page: http://joomla.templaza.net/liona/index.php/en/home-en/home-horizontal-shop but without the scrolling, and with just two images.

My question is what’s the best way to get these images to be full-screen, while still responsive? I know how to handle the linking and b&w/color changing, but not sure how to get the layout set up using X and Visual Composer. Any suggestions? As always, thank you so much for the excellent support on this forum – you guys rock!

[Lely]

Hello Kelsey,

Using a Visual Composer, you can Add a Content Band. Then choose 2 Columns. Click Content Band Settings Then check the option for Marginless columns. Then on each column, you can add an Image element.Please also note to use Blank – No Container | Header, Footer Template.
Please check the following thread for fullheight option:
https://community.theme.co//forums/topic/how-do-i-make-one-rowcontent-band-fullscreen/
https://community.theme.co//forums/topic/make-content-bands-adjust-to-screen-size-full-screen/

Hope this helps.

[BodiSchuwer]

Hi!

Im working an a clothing brand website and i would like to have a splash screen that consists out of 2 images that are fullscreen. one side is Mens and the other side is Womens.

Adventually i will link both of them to a different version of the website.

I dont have actual pictures yet but i am sure you will figure it out: http://bodischuwer.nl/splashscreen

Hopefully you can help.

Thanks!

[Paul R]

Hi,

To make it full screen, you can add this under Custom > CSS in the Customizer.

.page-id-351 .site {
       width: 100%;
    max-width: 100%;
}

.page-id-351 #x-content-band-1 .x-column {
    margin-right:0;
}

.page-id-351 #x-content-band-1 .x-column.one-half {
    width: 50%;
}

Hope that helps.

[BodiSchuwer]

This reply has been marked as private.

[Paul R]

Hi,

That is normal and will not have a negative effect on the template.

To remove the header, select Blank – No Container | No Header, No Footer under page attributes

http://screencast.com/t/bS58tCVpBztA

Hope that helps.

[BodiSchuwer]

This reply has been marked as private.

[Rue Nel]

Hello There,

Upon checking on this page: http://bodischuwer.nl/splashscreen, it is still using the No Container | Header, Footer. Please use the Blank – No Container | No Header, No Footer page template as what we have suggested in our previous reply.

Please let us know how it goes.

[BodiSchuwer]

This reply has been marked as private.

[BodiSchuwer]

Fixed!

[Paul R]

Glad to know it’s fixed.

Have a great day!

[Author]

Posts