June 2020 – Feataholic

Adding Preloaders to your WordPress site can help you get a message early on to your users as your page is loading. Did you know that you could display a smooth page transition and display your content and catch your user's attention? In this blog post, we will see all 21 available transitions in the MAZ Loader WordPress Preloader plugin as well as a demo for each one. How to enable Page TransitionAll available Page TransitionsPage Transition Demos How to enable Page Transition After you have created your Preloader (MAZ Loader > Create New Loader), you should click on the "Appearance" tab and navigate to the setting called "Display Transition". Once you enable this toggle you will be presented with a dropdown called "Transition Style" as well as a color picker called "Transition Color". Setting NameDescriptionTransition StyleSelect any of 20+ transitions available to apply to your Preloader.Transition ColorSet the color of the page transitionSettings mentioned and their respective description Below you can see how to enable the Page Transitions. Go to "Appearance" > "Display Transition" and enable the toggle as seen above. After enabling Page Transition, you need to select a transition from a list of 20+ available transitions. Below you can find the complete list of transitions: All available Page Transitions Page Transition Name Split Horizontally Split Vertically Split Up Split Down Slide Left Slide Right Shrink Scale out Bottom Left Scale out Vertical Scale out Top Scale out Left Scale out Top Right Scale out Top Left Scale out Right Scale out Horizontal Scale out Bottom Right Scale out Bottom Scale out Horizontal Top Flip out Horizontal Bottom Flip out Horizontal Left Flip out Vertical Right All available page transitions. Here is how to select a page transition from your Loader > Appearance tab. How to select a page transition for your Preloader After setting a Page Transition, you should specify the color of the transition, you have either make it blend nicely with your Preloader's background or make it stand out using a more vibrant color. Select the color of the page transition. You have now successfully added a Page Transition to your WordPress Preloader. You can now preview it by pressing the Run Loader button available on the top right of your page. How to run your Preloader and preview it. Page Transition Demos In this section, we will be showcasing each Preloader Page Transition in order to see how it would appear on your WordPress site. Split Horizontally This page transition consists of a screen that splits from the middle and creates 2 sections that navigate to the left and right side of the page respectively thus revealing your page's content. Split Horizontally Split Vertically This page transition consists of a screen that splits from the middle and creates 2 sections that navigate to the top and bottom side of the page respectively thus revealing your page's content. Split Vertically Slide Up This page transition consists of a screen that slides from the bottom to top to reveal the page content. Slide Up Slide Down This page transition consists of a screen that slides from the top to bottom to reveal the page content. Slide Left This page transition consists of a screen that slides from the right to left to reveal the page content. Slide Left Slide Right This page transition consists of a screen that slides from the left to right to reveal the page content. Slide Right Shrink This page transition consists of a screen that starts in fullscreen and shrinks in the middle of the page to reveal the page content. Shrink Scale out Bottom Left This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the bottom left side of the page to reveal the page content. Scale out Bottom Left Scale out Vertical This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then animates and repositions itself in the middle of the page by making its height zero to reveal the page content. Scale out Vertical Scale out Top This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the top center of the page to reveal the page content. Scale out Left This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the left center of the page to reveal the page content. Scale out Left Scale out Top Right This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the top right side of the page to reveal the page content. Scale out Top Right Scale out Top Left This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the top left side of the page to reveal the page content. Scale out Top Left Scale out Right This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the right center of the page to reveal the page content. Scale out Right Scale out Horizontal This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then animates and repositions itself in the middle of the page by making its width zero to reveal the page content. Scale out Horizontal Scale out Bottom Right This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the bottom right of the page to reveal the page content. Scale out Bottom Right Scale out Bottom This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the bottom center of the page to reveal the page content. Scale out Bottom Flip out Horizontal Top This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then flips on the horizontal axis to the top to reveal the page content. Flip out Horizontal Top Flip out Horizontal Bottom This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then flips on the horizontal axis to the bottom to reveal the page content. Flip out Horizontal Bottom Flip out Vertical Left This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then flips on the vertical axis to the left to reveal the page content. Flip out Vertical Left Flip out Vertical Right This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then flips on the vertical axis to the right to reveal the page content. Flip out Vertical Right

Month: <span>June 2020</span>

How to create a WordPress Preloader with a Smooth Page Transition

Creating a text-only WordPress Preloader

Feataholic

Links

Social

Month: <span>June 2020</span>

Subscribe to get the latest updates!

Feataholic

Links

Social