Load a div before other page content in WordPress

Question

As the title says, I want to load a div in WordPress before any other content on the site. I'll explain it better: when a user loads the page, I want to show an animated intro, and then let him see the site after. How can I do that?

You could make the div an overlay; one way to do this is to set the `z-index` CSS property high on the div, and make it cover the whole screen. That way, it will appear in front of your other content. You'll have to use a script to allow the user to close out of the div, though. — josephmbustamante, Jun 13 '17 at 17:25

score 1 · Accepted Answer · answered Jun 13 '17 at 17:30

You'll want to create a fixed div that covers the screen to act as an overlay. Say you have a div: <div class="overlay">.

Now, in your CSS, you want to make that div take up the whole screen:

.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

You also need to make sure your parent containers (html and body, most likely) have width/height of 100%. You might want to give your div another color so you can see it. Also, reference this question.

Load a div before other page content in WordPress

1 Answers1