How to Add Parallax Effect with Elementor (in 3 minutes)

In this post, I’ll show you EXACTLY how to create Parallax Scrolling Effect with Elementor for your WordPress website by using Royal Elementor Addons. First things first: To follow along with this go-to guidebook for adding Parallax Effect to your Elementor website, you will need to install Royal Elementor Addons (500,000+ active installations). Fortunately, this is as easy as it sounds. Click Add New Plugin in your dashboard’s Plugins section. Search for Royal Elementor Addons, click Install Now and activate the plugin. Now you are ready to learn how to create a cool parallax effect for your website. What Is the Parallax Effect and Why to Use It? The parallax effect is a widely used design feature in WordPress websites. It creates a scrolling illusion where background images move more slowly than foreground elements, adding depth and a 3D-like feel to a 2D space. Parallax Effect: Now let’s create a parallax effect using Royal Elementor Addons. Step 1. Choose a Section and Add Parallax Effect To bring parallax magic to your Elementor website, start by selecting the section you want to enhance. From the edit section in the layouts panel set the Content Width feature to Full Width and the Minimum Height to 600 pixels. It’s an important thing to remember that parallax effect is not a widget that you can drag and drop into your section. It is an extension which you can apply to any Elementor section you want. The Parallax Effect is now working: In order to do so, go to Style section in your settings and enable background parallax feature. Right now you don’t have any background for your section, so choose an image and click on apply changes. But to make it even look better you can add a text to your section. In Styles settings you have a couple features you can customize and one of them is Scrolling Effect. There are different options, some of them only work in Pro Version. More about it later. From there you can also control the Animation Speed. Step 2. Use Multi-Layer Parallax to Add Depth & Movement to Your Website Let’s go back to the settings and overview another free extension – Multi-Layer Parallax. If you enable this feature suddenly you’ll have two more items on your Parallax section. You can choose an image for each of them and set Horizontal and Vertical positions. Then change Date Depth value (which defines how much the item will react to mouse hover) and apply changes. Now you have this really cool Multi-Layer Parallax effect (with Pepes): It’s time to quickly check the additional features that come with Pro Version of Royal Elementor Addons. Unlock Advanced Parallax Features with the Pro Version If you activate the Pro Version of Royal Elementor Addons, you’ll have several additional features to your Parallax Effect. First, in Scrolling Effect you have more options available: Second, in Pro Version you are not limited to two items in Multi-Layer Parallax, which means that you can add as many items to your section as you’d like. That’s it for today’s guide. If you have any questions please comment below or go to our support forum.  You can download the Plugin or upgrade to the Pro Version on the Home page of our website. See you in the next one.

Step-by-Step Guide: How to Create a Popup with Elementor (for FREE)

Today you’re going to learn how to create a popup with Elementor for your WordPress website by using Royal Elementor Addons. Check out our video tutorial down below: First things first: To follow along with this go-to guidebook for adding Mega Menu to your Elementor website, you will need to install Royal Elementor Addons (500,000+ active installations). Fortunately, this is as easy as it sounds. Click Add New Plugin in your dashboard’s Plugins section. Search for Royal Elementor Addons, click Install Now and activate the plugin. Now you are ready to learn how to create email subscription popups, promotion sales, countdown popups and many more. Popups could be displayed on page load, page scroll, when visitor decides to leave the page or when a user clicks on a button. Basically, it comes with all kinds of features you might need to create a popup. But before you start creating your Elementor popup, let’s preview a great feature that comes with Royal Elementor Addons — popups Library. Keep reading… Premade Popups: Save Time with Ready-to-Use Templates If you click on the Royal Elementor Addons icon, it will take you to the library of ready-made popups that you can directly import with just one click. Choose the one you like, click on it to preview and finally click on an Insert button. Now let’s dive into creating an Elementor popup. Step 1. Create an Elementor Popup Step-by-Step There are different styles of Elementor popups available: As you can see there are no limits of what you can do when building an Elementor popup. To create a popup you need to go to the WordPress dashboard and in Royal Elementor Addons click on Popup Builder. Click on Create Template, give it a name and click on create template. Next you need to choose where you want to display your template. So click on Add Condition. Since it’s a free version of Royal Add-ons you can only choose Entire Site feature. Save conditions and it will take you to the popup editor. Let’s create your Elementor popup for an email subscription. Click on Add New Container button and choose the structure of your layout. Now go to the widgets list by clicking the “+” icon in the center of your container. Drag and drop an image widget into the container. Next you need to add some text to your popup. So again drag and drop the header widget. You can change its content, alignment, tag, size and font weight. Now let’s add a MailChimp subscription widget (or any other widget). Congrats! You’ve just built your email subscription Elementor popup! Step 2. Elementor Popup Settings Mastery Show Again Delay: Prevent Annoying Popups & Improve UX Let’s go back to the popup settings and the first option you have is to choose how the popup opens up. You’re probably wondering… WHERE IS THE SETTINGS BUTTON?! Well, it’s right in the middle of the top toolbar. In a free version there’s only one option and that’s On Page Load. Next feature allows you to choose the time of the delay between the page load and popup display. If you want to display your popup again to your visitors once they close it you have a few options to choose from. Otherwise leave it to No Delay. Layout Settings: Customize the Perfect Popup Design In layout section you can choose how you want your Elementor popup to be displayed. You can change the background Width and Height (and choose between pixels and percent). There are all kinds of alignment options that you can play with. There are also tons of Entrance Animations that you can choose from (you can change it’s duration). And finally, Z Index is what determines that your popup will always stay on top of other elements of your page. You don’t want it to be overlaid by other elements like sticky navigation or others. So always make sure that it is set to a very high number. If you want your pages not to be scrollable when popup is displayed you can simply activate the Disable Page Scroll feature. Overlay Settings: Control Background Effects for Better Engagement Let’s move on to the Overlay section. Here you can choose if you want to show the overlay or not. There’s also an option to prevent the closing of the popup when someone clicks on the overlay. So if you set it to Yes, then the only option to close the popup will be to click on the close icon on it. Close Button Settings: Optimize User Experience & Conversions Speaking of which. If you go to the Close Button settings, you can choose if you want to display it at all or not. There’s also an option to delay its show up. You can choose the position of the close button (vertical or horizontal). Styling Settings: Make Your Popups Visually Appealing Now we move on to Style section where you can change the Background Type of your popup, change the color or add an image as a background. There’s also an option to change the color of the ScrollBar. There are standard things like Padding and Border Radius as well as Border Type and Box Shadow. Again in Style section there are Overlay and Close Button settings where you can change the color or set the image as a background and stylize the close button. Popup Trigger Button: Maximize Clicks with Smart Placement Now I want to overview a really important feature related to Elementor popups — it’s called Popup Trigger. Click on the “+” icon in the top left corner of your screen to Add Element. Search for Popup Trigger and drag and drop it into your popup. This feature could be really handy if you want to add a button to your popup, which will trigger some kind of action from a customer. But first let’s see how Close Popup action works. It is almost identical to Close Button but has some additional settings like Show Again Delay or Direct to a Specific URL

The Go-To Guidebook: How To Create Mega Menu With Elementor (for FREE)

Today you’re going to learn how to build a mega menu for your WordPress website by using Royal Elementor Add-ons alongside with Elementor. Check out our step-by-step video tutorial down below: Step 1. Getting Started with Mega Menus: Your First Steps to Better Navigation First things first: To follow along with this go-to guidebook for adding Mega Menu to your Elementor website, you will need to install Royal Elementor Addons (500,000+ active installations). Fortunately, this is as easy as it sounds. Click Add New Plugin in your dashboard’s Plugins section. Search for Royal Elementor Addons, click Install Now and activate the plugin. Also, in this step-by-step guide we’ll be using free Royal Elementor kit (which you can add from your dashboards Appearance section), but you can use any other Elementor compatible theme. Now: Click on Royal Addons theme on your dashboard and go to Template Kit section. Import any templates kit with just a single click from the library. And on to the Mega Menu. To begin with, go to the dashboard again and in Appearance section click on Menus. This is a standard WordPress menu. As you can see, when hovering over the menu items it shows a button that says Mega menu. But keep in mind that we can only build the mega menu for the parent items and not for the sub items. Click on that Mega Menu button. From this window you can manage most of the mega menu settings. First of all, enable Mega Menu and then click on edit with Elementor. Here’s what you need to do next… Step 2. Customize with Ease: How to Edit Mega Menu Content After you click edit with Elementor, it will display a window, which is basically a standard Elementor editor, where you can edit things just like on any other Elementor page or section. Click on + icon in the middle of the page to add a new container. Then choose a grid layout with 3-column structure. Click on the first container, go to the widgets section and choose, for example, a Feature List widget and drag and drop it in the first container. Do the same for the second and third containers, choosing, for example, Taxonomy List and Page List. Step 3. Simplify Navigation: How to Use the Page List Widget Effectively The Page List widget was created specifically for Mega Menu. By using this widget you can display in your Elementor Mega Menu any page you’d like to. On the left side, in general settings for the widget, you have a page list where you can add any number of pages. You can also choose the page type. It will be either custom or dynamic. If you set it to Dynamic, it will show you the related pages. You can also choose whether to open it in a new window or not. Now switch on Badge toggle for additional small text next to a menu item. Choose an icon for your page. But that’s not all… Click publish, close the editor window and make sure that Mega Menu in settings window is enabled. Save the changes. Go to your website and refresh it. It’s still not going to display your Mega Menu. You’re probably wondering, why is that? Step 4. Adding Elementor Mega Menu Widget for Enhanced Functionality The reason it’s not displaying the Mega Menu yet is that right now in your header you are still using a standard menu widget, but you need to replace it with the Mega Menu one. Hover over edit with Elementor on your website and click on V1 Header. Now if you click on edit in the top right corner of the header, you’ll see that it’s still the standard Nav Menu widget. Right-click and delete it – you’re going to replace it with a new Mega Menu widget. Search for it in the widgets section and drag and drop it into your header. Click publish. Now if you refresh your website, you can see that it displays the Elementor Mega Menu, which you’ve created a moment ago. Step 5. Master the Backend: A Complete Overview of Mega Menu Settings Go back to the Mega Menu settings window. The Dropdown Position feature is set to default, which means that the dropdown subcontent of the mega menu is positioned where the Mega Menu widget starts itself. Now, if you set the Dropdown Position to Relative, click on Save and refresh your website, you can see that the mega menu subcontent starts from the parent element. Let’s continue with the Dropdown Width feature. In case of the default width, the subcontent of the Mega Menu will take the entire width of the widget itself. Choose the full width, refresh the website again and now you can see that the Mega Menu takes the width of the entire screen. Another option is to set the width to custom pixels. Let’s continue by overviewing some of the additional features of the Elementor Mega Menu. Keep reading… Additional Features: Vertical Layout, Mobile Nav, Offcanvas Menu and Hover Effects We’ll start with Layout settings. Go to the header editor’s section. Right now the feature is set to horizontal. Change it to vertical and now your menu will have a vertical layout. It may not look pretty for some website templates, but you can create a very appealing mega menus by using vertical layout feature. Set the layout to horizontal again. In Mobile Menu section you have this feature called Show on. It basically enables you to choose when do you want the mobile menu to show up. When using Pro version of Royal Elementor Addons you can set it to All devices. And it will always display the mobile menu with the hamburger icon. There’s also an option that lets you choose how you want the mega menu to be displayed. If you choose the off-canvas option, for example, the menu will appear off-canvas with a little slide animation (you can choose the slide direction as well). The final additional feature that we’re going

The Complete Guide: How to Add Instagram Feed Widget to Your Elementor Website

Today you’re going to learn how to add an Instagram feed widget with Elementor to your WordPress website using Royal Elementor Addons free widget. Check out our step-by-step video tutorial down below: Step 1: Easily Add the Instagram Feed to Your Elementor Website Here’s the deal: To follow along with this ultimate guide to adding Instagram feed to your Elementor website, you will need to install Royal Elementor addons (500,000+ active installations). Fortunately, this is as easy as it sounds. Click Add New Plugin in your dashboard’s Plugins section. Search for Royal Elementor Addons, click Install Now and activate the plugin. Now that you’ve installed Royal Elementor Addons, go to Pages on your WordPress dashboard and add a new page Instagram feed (you can call it whatever you want).  It is a completely blank page, so click on edit with Elementor. First things first: find the Instagram feed widget and drag and drop it into your canvas. Next you need to get the access token from Instagram, so here comes step 2. Step 2: Authorize Your Instagram Account Go to developers.facebook.com.  Then Get started (sign in) with your Facebook account. And click on Create App. Enter the app name and click on next.  In the use cases section choose other and click on next again. In app type select business, click next and create an app.   Now click on Instagram setup. To generate an access token you need to add your Instagram account, so click on add account and continue.  You’ll have to log in to your Instagram account and allow access.  Finally, click on generate token. You’ll have to log in to Instagram one more time.  Then just check the I understand box, copy the token and save it somewhere. Now you have your token, so you need to switch your app from development mode to live.  To do so click the switch button and go to basic settings. Now you need to enter the URL of the privacy policy page of your website and click on Save changes. Next click on the Instagram drop-down on the left side and go to API setup with Instagram login. Now if you click on that switch button again, your app will actually go from development to live mode. All right!  You have already generated the access token and saved it somewhere.  So go back to your website and paste the access token. You see that now your Instagram feed widget is fetching some posts from your Instagram page.  Finally enter some random large number in the expired date field and that’s it. Keep reading — here’s where the fun part begins… Custom Feature #1: Create Different Instagram Feed Layouts to Engage Visitors First go to the layout section and select the desired layout.  The default one is greed, but you can choose the Slider/Carousel, for example. Sometimes you might need to update and refresh the page to see the changes. Now go back to the layout section and this time choose the full width.  The content width takes up the entire width of the section, so edit the section itself to make it full width. Now you can see that the Instagram widget takes the entire sections’ width.  Go back to layout again and for this time try the list style.  You can change the number of columns and adjust the media width as well.  There’s also a Masonry grid, which you can try if you like.  Now go back to the grid layout and set the columns to three again. Custom Feature #2: Boost Engagement with Pagination and Follow Buttons Under the layout section, you can activate the show pagination feature, which displays the Load more button. There’s also a button available for the Show follow feature. Go back to the Integration section and change the number of posts displayed by default to three.  Then click on preview changes — it works perfectly fine. Now let’s go to the Follow button settings.  Here you can change the link of the button to your Instagram page where others can follow you.  You can change the button text as well. Custom Feature #3: Add, Remove, and Rearrange Instagram Feed Elements On to the next one!  Go to the Element Section, where you can add some additional elements to your Instagram post.  Click on add item and in select item.  You can add things like username, caption, date, icon, light box and few others.  So choose the username, for example, and now it shows the Instagram username. If you click on the item itself you can set the location of the username (horizontal alignment or manually). There’s also an option to apply the animation — it will display the element when someone hovers over the media. Keep in mind that you can apply the alignment and location settings to any other element.  In media overlay settings you can change the overlay width and height. Last but not least: let’s see how the light box works!  Bonus #1: Enable Lightbox for a Seamless Viewing Experience Go to the Elements section and select the Lightbox instead of username.  Now when you hover over the media it shows the zoom icon. If you go to preview mode and click on the media itself, tt will display images as a nice lightbox with slide animation. Bonus #2: Add Visual Flair with Professional Image Effects You can also add some effects to your images.  By default it is set to none, but let’s see, for example, how zoom in or zoom out works.  Basically it adds some nice animations to your images on mouse hover and there’s plenty to choose from.  But that’s not all… In the next part of this go-to guidebook I’ll show you some of the premium features in Royal Elementor Addons. Bonus #3: Unlock the Full Potential of Your Instagram Feed With Pro Features The free version is limited to a maximum of six posts.  In the Pro version you can display as many posts as you’d