Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Editor X

Design your boldest creations.

Jul 7

HELP! Preloading Screen - How can I do it?

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 blank Container page. I extended it to 100vh and 100vw and set the Scroll Effect to "Fixed"


2. I added the central .gif to it.


3. I used Corvid and 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.


Help?



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.

1. Set the first section to 100 VH or more (you can also adjust the section height later to fit your needs). 

2. Let's create your preloader in the first fold: set the section background color and place the gif.

3. 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.

4. 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.

Thank you,

Naama