# Splash Screen

This Guide will help you to add **Splash Screen.**

#### DRAG AND DROP SPLASH SCREEN

<div id="bkmrk-drag-and-drop%C2%A0splash">- Drag and Drop **Splash Screen** from left side **Widget Panel** at your desired portion of page.
- When your website window reach that portion, At that time **Splash Screen** will get Displayed.
- Here we have **Dragged** it at the Start of Page, so it will get **Displayed** when we load Page in Website.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-drag.png)

#### EDIT CONTENT

<div id="bkmrk-when-you-drag-and-dr">- When you Drag and Drop **Splash Screen** it will open **Dialog Box** for it.
- Now in Dialog Box you can edit content by clicking on **Edit Splash Screen** as shown in image below.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-content.png)

#### DELAY TIME AND DISPLAY

<div id="bkmrk-delay-time-will-dela">- Delay time will delay the *Arrival* of **Splash Screen** with that much time.
- Select when you want to display **Splash Screen** from **Display** options.
- Select style of Splash Screen. If you want to give your **custom style** then select **Custom**.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-settings1.png)

#### STYLE AND ANIMATION

<div id="bkmrk-you-can-add-your%C2%A0cus">- You can add your **custom style** by selecting **Custom** as shown image below.
- There is another way to give **custom styles** which is given in later steps.
- Now select type of **Animation** to **Arrive** the Splash Screen on your page. Same to **Hide** the Splash Screen.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-settings2.png)

#### CUSTOM STYLES

<div id="bkmrk-this-is-the-second-w">- This is the second way to give custom style to Splash Screen.
- Just click on Edit Element Style to add custom styles.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-styles.png)

#### SPLASH SCREEN VIEW

<div id="bkmrk-splash-screen-will-l">- Splash Screen will look like as shown in image below in your website.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-view.png)

<div id="bkmrk-"></div><div id="bkmrk--1"></div>