Does anyone know a way to put a preload screen when starting the site? I realized that when the site is opened, the images, even optimized, are blurred to adapt to the browser. A preload screen would be an excellent way to load what is delayed, in 2/3 seconds. While the person is distracted looking at the .gif.
I performed the following steps, but I did not like the result, as it does not block the mouse scroll.
1.I created a blankContainerpage. I extended it to 100vh and 100vw and set theScroll Effect to “Fixed”
2.Iadded the central .gifto it.
3. I usedCorvidand put a code where the “Container” would have a “FadeOut” in 3 seconds and then the website will appear.
The problem is that the Mouse Scroll is activated ; therefore, if the person scrolls down, when there is “FadeOut”, the site will start in the sections below and not in the first.
Basically, what I want to do is a loading screen to hide the website by loading in its background.
Hi William,
I am Naama from Editor X Product Team.
We don’t support this ability yet and we will add it to the backlog, but there is a workaround that might be helpful for you design-wise.
Set the first section to 100 VH or more (you can also adjust the section height later to fit your needs).
Let’s create your preloader in the first fold: set the section background color and place the gif.
when done, add a container to the section and stretch it to the section using the right-top button that appears on the container when it’s selected. The container should now be placed on top of the preloader and it will be used as the first section on your homepage.
The last step will be setting how and with what delay this section will appear. Choose Animation from the container action menu. Then, select the animation type and click Customize in the panel. there set the delay of appearance that will allow the preloader to run and toggle on the Only animate first-time option.
In the attached example I set a reveal animation with a 1-second delay.
that does not work for me. The problem is >> first i do not see the first section, i see the “background” of the homepage >> and then the first section slides in…
how do you do that? that the container is used as first section?
As for her suggestion, there’s a design class video here showing a similar concept to what Naama explained using animations and containers to get a “loading screen effect” for your site.
Hi, But the issue with this suggestion is that when the preloaded page is loading the user can scroll down to other sections in the same page. The reason why the user can scroll is because the suggested animation will only cover the first section and not the whole page. Is there any way to fix this issue?
