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 other pages of your website.

Exclude page/post: Specifies pages/posts to exclude the preloader on them.

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.

safelayout preloader advanced

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)

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, progress bar and background.

Background settings

Progress Bar settings

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

In this tab you can change Bar Shape, Light move effect, Bar color, position, width, height, border radius, border color, margin top, margin bottom and margin left.

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

progress bar

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, progress bar and background.

More icon settings

Counter settings

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

In this tab you can change Counter text, position, color, font size, margin top, margin bottom and margin left.

preloader counter

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, Text 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

How to set preloaders for different data types.

You can set preloaders for different data types, for example a different preloader for products or a different preloader for elementor landing page.

1. Go to the Settings section of your WordPress dashboard, select Safelayout Preloader Pro and change the settings according to the new preloader you want.

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

2. Go to the special preloader tab and select the type you want, from the list displayed at the bottom of the page and click the “Set the current …” button.

* To remove the preloader from a data type, click on the “Remove preloader …” button next to that type.

How to add different preloaders to different page/post of your site.

1. Go to the Settings section of your WordPress dashboard, select Safelayout Preloader Pro and click on the Special preloader tab.

2. Activate the “Show preloader meta box” option and click the “Save Changes” button.

3. Now change the settings according to the new preloader you want.

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

4. Go to the special preloader tab and create a preloader shortcode by clicking the “Generate preloader Shortcode” button and copy the shortcode to clipboard by clicking the “Copy to Clipboard” button.

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