Safelayout Cute Preloader Pro Documentation

Installation

Plugin Requirements

  • WordPress 4.7 or higher
  • PHP 5.0 or higher

Install Safelayout Cute Preloader Pro

  • Go to the Plugins section of your WordPress dashboard.
  • Click on Add New.
  • Click on the Upload Plugin button.
  • Browse and locate the zipped plugin that you have downloaded.
  • Activate the plugin by clicking on Activate.
  • Use the Settings -> Safelayout Preloader Pro to configure the plugin.
  • Choose your style and enjoy.

Display settings

To change Display settings, go to the Settings section of your WordPress dashboard, select Safelayout Preloader Pro and click on the Display tab.

In this tab you can change the following settings:

Enable Preloader: You can choose to turn on/off preloader on your WordPress website.

Display on: specifies where to display the preloader, only on the home page or on all pages of your website.
You can select pages by it’s Type or ID. You can find page and post id in browser address bar when you are editing that page or post. ( /wp-admin/post.php?post=74&action=edit “The ID of this post is 74” )

Exclude page/post: Specifies pages/posts to exclude the preloader on them.
You can select pages by it’s Type or ID. You can find page and post id in browser address bar when you are editing that page or post. ( /wp-admin/post.php?post=74&action=edit “The ID of this post is 74” )

Show per session: Enable to display preloader only when a visitor first visits your site.

Device: Enable to display preloader on all devices, mobile, or desktop only.

Display settings

Minimum load time: The minimum time that, the preloader will be shown, even if the page was loaded. (Enter 0 to disable this feature)

Maximum load time: After this time the preloader will be hidden even if the page has not been loaded yet. (Enter 0 to disable this feature)

Show close button after: After this time the close button will be shown at the top right corner of the screen. (Enter 0 to disable this feature)

Style type: You can choose inline CSS style or external CSS style.

Script type: You can choose inline javascript or external javascript.

More display settings

Background settings

To change Background settings, go to the Settings section of your WordPress dashboard, select Safelayout Preloader Pro and click on the Background tab.

In this tab you can change Background animation, opacity and color.

The Background color can be solid color or gradient color. There are 431 Gradient colors for icon and background.

Background settings

Brand Image settings

You can display your Brand image or logo inside the preloader screen.

To change Brand Image settings, go to the Settings section of your WordPress dashboard, select Safelayout Preloader Pro and click on the Brand Image tab.

In this tab you can change Image URL , Image animation, Image position, margin top and margin bottom.

You can also use a base64 encoded image as an Image URL.

If you don’t want to show the Brand image in the preloader, simply delete the Image URL.

Brand Image settings

Icon settings

To change icon settings, go to the Settings section of your WordPress dashboard, select Safelayout Preloader Pro and click on the icon tab.

There are 42 Loading animation icons. You can choice one of them, or add your own loader image URL.

You can also use a base64 encoded image as an Image URL.

Icon settings

In the rest of this page you can change icon size, color and effect as well.

The icon color can be solid color or gradient color. There are 431 Gradient colors for icon and background.

More icon settings

Text settings

To change Text settings, go to the Settings section of your WordPress dashboard, select Safelayout Preloader Pro and click on the Text tab.

In this tab you can change text, text animation, color, font size and margin top.

If you don’t want to show the text in the preloader, simply delete the text in the text field.

Text settings

Special preloader

With this feature, you can have more than one preloader on your site. You can add different preloader to different pages of your site.

Special preloader

To add different preloader to different page/post, just change the settings according to the new preloader you want (do not click on the “Save Changes” button), then return to Special preloader tab and create a preloader shortcode by clicking the “Generate preloader Shortcode” button, you can now copy and add the shortcode to your page/post.

Note: Do not click the “Save Changes” button after applying the changes, otherwise the new preloader will overwrite the original preloader of your site.

To add the shortcode to your page/post, simply edit the page/post and scroll down to the “Safelayout Preloader Shortcode” section below the editor. Paste the preloader shortcode into the text area and Update the page/post.

preloader shortcode