I am trying to create 2 x 2 layout, each section with a different background image. Each one section fades in from th left or right at a different time, and then a heading should fade in after.
My first question is, how would I add a background image (and set a minimum height) when using the one half columns?
2. Ignoring background images, I tried the code below, and the effect was not as expected. The fade did not work at all, and the "from left" and "from right" caused the div to start about 50px off from where it was and slowly move into place.
I tried:
[one_half centered_text="true" animation="Fade In From Left" delay="500"][heading subtitle="SUBTITLE"]TITLE[/heading][/one_half]
[one_half_last centered_text="true" animation="Fade In From Right" delay="1000"] [heading subtitle="SUBTITLE"]TITLE[/heading][/one_half_last]
And I also tried this to try and get the headings to fade in afterwards (but as I said, fade did not work at all):
[one_half centered_text="true" animation="Fade In From Left" delay="500"][one_whole centered_text="true" animation="Fade In" delay="1000"] [heading subtitle="SUBTITLE"]TITLE[/heading][/one_whole][/one_half]
[one_half_last centered_text="true" animation="Fade In From Right" delay="1000"][one_whole centered_text="true" animation="Fade In" delay="1000"] [heading subtitle="SUBTITLE"]TITLE[/heading][/one_whole][/one_half_last]
The Animation wont work because the elements are already in viewport when you view the page. Please let us know the specifics of what you need done so we may write you some custom css.
Hi,
I am trying to create 2 x 2 layout, each section with a different background image. Each one section fades in from th left or right at a different time, and then a heading should fade in after.
My first question is, how would I add a background image (and set a minimum height) when using the one half columns?
2. Ignoring background images, I tried the code below, and the effect was not as expected. The fade did not work at all, and the "from left" and "from right" caused the div to start about 50px off from where it was and slowly move into place.
I tried:
[one_half centered_text="true" animation="Fade In From Left" delay="500"][heading subtitle="SUBTITLE"]TITLE[/heading][/one_half]
[one_half_last centered_text="true" animation="Fade In From Right" delay="1000"] [heading subtitle="SUBTITLE"]TITLE[/heading][/one_half_last]
And I also tried this to try and get the headings to fade in afterwards (but as I said, fade did not work at all):
[one_half centered_text="true" animation="Fade In From Left" delay="500"][one_whole centered_text="true" animation="Fade In" delay="1000"] [heading subtitle="SUBTITLE"]TITLE[/heading][/one_whole][/one_half]
[one_half_last centered_text="true" animation="Fade In From Right" delay="1000"][one_whole centered_text="true" animation="Fade In" delay="1000"] [heading subtitle="SUBTITLE"]TITLE[/heading][/one_whole][/one_half_last]
Hey Irfan!
The Animation wont work because the elements are already in viewport when you view the page. Please let us know the specifics of what you need done so we may write you some custom css.
Thanks
ThemeNectar Support Team