fullscreen

Build fullscreen with Elementor

1. New Page --> edit with Elementor

2. Page layout --> Elementor Canvas (Page Settings)

3. Add new section (select one column type)

4. Add new (2nd) section (select one column type)

5. Insert Heading to both sections

6. (1) Edit 1st section --> (2) Style --> (3) Classic

and now we see: 

7. press on classic (Backgound Style) (under background Overlay)

now you see:

8. add image

9. few settings

9.1 Repeat --> no repeat

9.2 Size --> cover

9.3 Opacity --> xx

10. fit to screen

10.1 --> layout

10.1 Height --> fit to screen

11. reapeat Paragraph 6 till 10 on the second section

12. update

13. exit Elementor --> settings --> reading -->static page --> (our) page

Now the fullscreen is working only at desk top but not in tablet and mobile

So the next steps are to adapt the fullscreen also on tablet and mobile

14. open website front page --> F12 (chrom inspector) --> verify the backround image section 

15. add the css "height:100vh;"

now you see:

16. copy selector (press mouse right button --> copy --> copy selector)

17. inser "height:100vh;" css to the theme

17.1 open WP back panel --> Appearance --> Customize

17.2 open Additional CSS

17.3 past the selector we found at paragraph 

17.4 add the "height:100vh;" css

18. repeat paragraphs 14 till 17 on the second section backgroung image

19. now you have fullscreen image x 2 with Elementor on desktop, tablet and mobile!!!

only it is not one page scroll but this we still need to learn...