Go to plugins and search for Elementor Addon Elements or click on this link: https://wordpress.org/plugins/addon-elements-for-elementor-page-builder/ and click Download.
In the WordPress dashboard, click Plugins → Add New.
Now click on the upload plugin option, xa dialog box will open. Here choose the zip file you have downloaded from the site,
After purchasing the plugin, you will receive a confirmation email on the email address associated with your purchase. This email serves as proof of your purchase and contains important information about the plugin.
The confirmation email you receive will include important information, such as your Username and Password, license key, and temporary download link for the installation files. Additionally, you can conveniently manage your downloads, license key, and associated sites through our website.
To access your account on our website, please use the login credentials provided in the confirmation email.
After successfully logging in, you can navigate through the dashboard and click on the “Downloads” option.
In the Downloads section, a popup window will appear, allowing you to conveniently copy the license key of the product and download the zip file directly from that interface.
Once you have downloaded the zip file, proceed to your WordPress dashboard. From there, navigate to the Plugins >> Add New >> Upload Plugins.
Upload the plugin zip file that you downloaded from our store.
Once you have activated the plugin, you will be prompted to enter the license key. Simply input your license key and proceed to activate it.
How to Upgrade Frontend Product Editor License
You have the flexibility to upgrade your Frontend Product Editor license at any time you want. The upgrade charges will be calculated on a prorated basis, ensuring you are charged accurately for the remaining duration of your current license.
Navigate to the License option and select the plugin for which you wish to upgrade the license; you will find all the details associated with the selected plugin displayed in that section.
Next, Click on the “Upgrade To” dropdown.
After clicking on the dropdown menu, simply select the desired upgrade plan, and you will redirect to the Checkout page, where you can proceed to make the payment for the selected upgrade.
Once your payment is confirmed, your subscription will be upgraded accordingly.
How is the Proration Discount Calculated?
When users upgrade a plan that was initially purchased as a subscription, they will receive a proration discount. This discount is calculated based on the remaining unused portion of their previous plan.
To access the most recent version of Frontend Product Editor, proceed by Login to the website.
Once logged in, navigate to the Download section, where you will find a plugin file available for download. Simply click on the Download button to initiate the process.
Using Frontend Product Editor on Localhost or Development Site
We provide support for staging and local development websites. To ensure compatibility, your site URL should match one of the following patterns.
TLDs that are considered as dev or staging:
*.dev
*.dev.cc (DesktopServer)
*.test
*.local
*.staging
*.example
*.invalid
*.myftpupload.com (GoDaddy)
*.cloudwaysapps.com (Cloudways)
*.wpsandbox.pro (WPSandbox)
*.ngrok.io (tunneling)
Subdomains that are considered as dev or staging:
local.*
dev.*
test.*
stage.*
staging.*
stagingN.* (SiteGround; N is an unsigned int)
*.wpengine.com (WP Engine)
dev-*.pantheonsite.io (Pantheon)
test-*.pantheonsite.io (Pantheon)
staging-*.kinsta.com (Kinsta)
staging-*.kinsta.cloud (Kinsta)
*.mystagingwebsite.com' (Pressable)
Moreover, if your domain includes “localhost” (with any port), it will also be recognized as a localhost domain.
In case you wish to use a license on a dev site that doesn’t meet the criteria listed above, you have the option to deactivate the license from the Account page in your WP Admin dashboard. Once deactivated, you can then reuse the license for another site.
Frontend Product Editor Settings Page
The settings page provides you with the ability to effectively manage advanced Frontend Product Editor setting configurations.
You can find Frontend Product Editor Settings under the WooCommerce menu.
Go to WooCommerce -> Frontend Product Editor.
Various configuration options are available for effectively managing the settings of Frontend Product Editor.
Tabs Collapsed by Default: If you prefer the tabs to be collapsed by default, you can enable this option.
Default Tab: Choose the default tab that you would like to open.
Trigger Option: Choose your preferred trigger option from the following: admin bar, floating button, or both.
Allowed User Roles: You can specify the permitted user roles that have the authority to edit the details, such as Administrator or Shop Manager.
Edit from Archives: Enable the option to edit product details on the archive(Shop) page.
ProductTypes: Select the type of product you want: Simple, Grouped, or External/Affiliate.
Editor Position: Select the edit icon position from right or left.
Editor Color: Select the editor color.
How to Edit Products On Frontend?
After activating the plugin, you will get two options to edit products on frontend. These buttons provide a convenient way to edit details or perform specific actions directly from the frontend without having to access the WordPress Admin.
In the free version of the Frontend Product Editor plugin, you are limited to editing only simple products, excluding virtual products and downloadable products. However, with the pro version of the plugin, you gain the ability to edit various types of products, such as Downloadable, Virtual, Grouped Product, and External/Affiliate Products.
When you access the frontend of your WooCommerce single product, our plugin offers two easy-to-go buttons for editing.
When you are logged in as an admin and visit any WooCommerce product page, you’ll find an editing button located in the admin bar named “Quick Edit Product,” giving you easy access to make changes without navigating away from the current page.
Additionally, we provide a floating button positioned on the right edge of the browser. This button remains accessible as you scroll, ensuring you can quickly initiate edits regardless of your position on the page.
How to?
How to Edit Simple Products on the Frontend
Editing a simple product on frontend allows you to update the essential details and attributes of a product listed on your online store. Whether you’re adjusting the pricing, adding a description, or specifying inventory information, Frontend Product Editor provides a user-friendly interface to make these modifications.
Furthermore, with our pro version, you have the ability to edit both Virtual and Downloadable products. Here, you will learn about How to Edit Products On Frontend?
Once you click on the edit button, you will have access to a set of settings that allow you to edit the product details. Once you made the desired changes, simply click on the “Update” button to save the updated details.
General
Product Name: Enter the name of the product.
Description: Set the description for the product.
Short Description: Enter the short description of the product.
Catalog Visibility: Select the catalog visibility from the available options.
Is Featured: Enable the option if you want to feature this product.
Categories: Select the categories for product.
Tags: Add the tags for product, if any.
Product Image: Add the image of the product.
Product Gallery: Add the gallery of product images, if needed.
Price
Regular Price: Set the price of the product.
Sale Price: Enter the sale price.
Schedule Sale: Enable the option if you wish to schedule the sale.
Start Date: Set the sale start date.
End Date: Set the sale end date.
Inventory
SKU: Enter the unique SKU for that product.
Manage Stocks: Enable the option to manage the stock.
Stock Quantity: Enter the quantity of product available.
Allow backorders: Select whether to allow backorders.
Low Order Threshold: Enter a number upon which you are notified.
Stock Status: Select the option based on the product stock.
Sold Individually: Enable the option to restrict the product to one per order.
Shipping
Weight: Enter the weight of the product.
Dimension: Length, Width, and Height of the product.
Shipping Class: Shipping classes are utilized by specific shipping methods to group similar products.
Linked Products
Upsell Products: They are shown on the single product page. These are products that you may want to promote to users as upgrades based on the product they are currently viewing. For example, if a user is browsing the T-Shirt product listing page, you can display the Plain T-Shirt and Hoodie on that same page as an up-sell.
Cross-sell Products: Cross-sells are products that are presented along with the cart and are related to the items in the user’s cart. For instance, if a user adds a smartphone to their cart, you may suggest they consider purchasing a phone case when they reach the cart page.
Please check our detailed article on Upsell & Cross-sell. It will provide you with a deeper understanding of these techniques and how they can be effectively implemented in your business.
Attributes
Custom Attribute: Add the custom attributes by clicking on the “Add Attribute” option, and you can also hide the attribute on the frontend by keeping the “Visible on Product Page” option disabled.
How to Edit External & Affiliate Products on Frontend
External or Affiliate Products in WooCommerce are used to redirect your user to external websites or platforms. Instead of purchasing the product directly from your website, customers are redirected to another website/platform to complete the purchase. This allows you to promote and earn a commission from affiliate products or showcase products from other sellers. These types of products can be edited using the pro version of our Frontend Product Editor plugin.
Once you click on the edit button, you will have access to a set of settings that allow you to edit the product details. Here, you will learn about How to Edit Products On Frontend?
General
Product Name: Enter the name of a product.
Description: Set the description for a product.
Short Description: Enter the short description of a product.
Catalog Visibility: Select the catalog visibility from the available options.
Is Featured: Enable the option if needed.
Categories: Select the categories for a product.
Tags: Add the tags for a product, if any.
Product Image: Add an image of a product.
Product Gallery: Add a gallery of product images, if needed.
Product URL: Enter the link from where users can purchase a product.
Buy Text: Change the Add To Cart button text to your preferred text.
Price
Regular Price: Set the price of a product.
Sale Price: Enter the sale price.
Schedule Sale: Enable the option if you wish to allow the sale of a product.
Inventory
SKU: Enter the unique SKU for that product.
Linked Products
Upsell Products: These products in WooCommerce are displayed on the product details page as recommendations for users to consider as upgrades to the product they are currently viewing. For example, if a user is browsing the WordPress Pennant, you can display the album on that same page as an up-sell.
Please check our detailed article on Upsell & Cross-sell. It will provide you with a deeper understanding of these techniques and how they can be effectively implemented in your business.
Attributes
To add custom attributes, you can click on the “Add Attribute” option, which will be displayed in the Additional Information section of the product. You can also hide the attribute on the frontend by keeping the “Visible on Product Page” option disabled.
How to Edit Grouped Products on Frontend
It allows users to combine multiple related products together as a single offering. This feature is particularly useful when you want to sell a collection of items as a bundle or offer options for customers to choose from within a product group. By grouping products, you can provide customers with the convenience of purchasing multiple items in one go, encouraging upsells and increasing customer satisfaction.
Once you click on the edit button, you will have access to a set of settings that allow you to edit grouped products on frontend. Here, you will learn about How to Edit Products On Frontend?
General
Product Name: Enter name of the product.
Description: Set the description for product.
Short Description: Enter the short description of product.
Catalog Visibility: Select the catalog visibility from available options.
Is Featured: Enable the option if needed.
Categories: Select the categories for product.
Tags: Add the tags for product, if any.
Product Image: Add the image of product.
Product Gallery: Add the gallery of product images, if needed.
Inventory
SKU: Enter the unique SKU for that product.
Linked Products
Upsell Products: These products are displayed on the product details page with the intention of encouraging users to upgrade their purchases and increase sales.
Grouped Products: Add the products that you want to include in group.
Please check our detailed article on Upsell & Cross-sell. It will provide you with a deeper understanding of these techniques and how they can be effectively implemented in your business.
Attributes
Custom Attributes: Add the custom attributes by clicking on “Add Attribute” option, and you can also hide the attribute on the frontend by keeping the “Visible on Product Page” option disabled.
How to Edit Product Data from the Product Archive Page
Editing your products directly from the product archive page (Shop page or Category archives) saves you valuable time and streamlines your workflow. Imagine the convenience of making quick changes without the need to navigate through multiple backend menus. Whether modifying prices, updating descriptions, or adding new images, the Frontend Product Editor has got you covered. No more delays or interruptions—click, edit, and save!
Its user-friendly interface allows you to quickly locate the specific items you wish to modify, ensuring a smooth and efficient editing process. With just a few clicks, you can enhance your product listings, keeping them up-to-date and captivating for your customers.
Let’s discuss how you can efficiently edit your products on the product archive page (Shop page or Category archives) directly from the frontend.
Navigate to WooCommerce -> Frontend Product Editor.
Next, upon clicking on the Frontend Product Editor, you will be directed to the FPE settings page. Here, enable the “Edit from Archives” option, which allows you to conveniently edit the product details directly from the product archive page (Shop page or Category archives).
After enabling the “Edit from Archives” option, locate the shop page on your website. On the shop page, you will now see an Edit button displayed alongside each product. Click on the button corresponding to the product you wish to modify, and it will open up the edit interface.
How to Edit Upsell and Cross-Sell Products from Frontend?
Editing upsell and cross-sell products directly from the frontend empowers users to customize their offerings, fine-tune product recommendations, and boost average order values. Frontend Product Editor provides a user-friendly interface that is accessible to non-technical users; it allows businesses to effortlessly optimize their product catalog and tailor suggestions to suit individual customer preferences.
Whether it’s highlighting related products during the checkout process or suggesting upgrades and add-ons on product pages, the ability to edit, upsell, and cross-sell products from the frontend ensures a seamless shopping experience for customers, leading to increased conversion rates and customer satisfaction.
After clicking the edit button, a range of settings will become available, allowing you to edit upsell and cross-sell products. Within these settings, you can navigate to the Linked Products section, where you can modify the information related to Upsell and Cross-Sell Products. Once you have finalized the edits, simply save the updated details by clicking the “Update” button.
Linked Products
Upsell Products: They are shown on the single product page. These are products that you may want to promote to users as upgrades based on the product they are currently viewing. For example, if a user is browsing the T-Shirt product listing page, you can display the Plain T-Shirt and Hoodie on that same page as an up-sell.
Cross-sell Products: Cross-sells are products that are presented along with the cart and are related to the items in the user’s cart. For instance, if a user adds a smartphone to their cart, you may suggest they consider purchasing a phone case when they reach the cart page.
Please check our detailed article on Upsell & Cross-sell. It will provide you with a deeper understanding of these techniques and how they can be effectively implemented in your business.
After purchasing the plugin, you will receive a confirmation email on the email address associated with your purchase. This email serves as proof of your purchase and contains important information about the plugin.
The confirmation email you receive will include important information, such as your Username and Password, license key, and temporary download link for the installation files. Additionally, you can conveniently manage your downloads, license key, and associated sites through our website.
To access your account on our website, please use the login credentials provided in the confirmation email.
After successfully logging in, you can navigate through the dashboard and click on the “Downloads” option.
In the Downloads section, a popup window will appear, allowing you to conveniently copy the license key of the product and download the zip file directly from that interface.
Once you have downloaded the zip file, proceed to your WordPress dashboard. From there, navigate to the Plugins >> Add New >> Upload Plugins.
Upload the plugin zip file that you downloaded from our store.
Once you have activated the plugin, you will be prompted to enter the license key. Simply input your license key and proceed to activate it.
After you’ve logged in, go to the “Downloads” section. There, you’ll see a plugin file you can add to your website. Click the “Download” button to start downloading.
Using a Plugin on Localhost or Development Site
We provide support for staging and local development websites. To ensure compatibility, your site URL should match one of the following patterns.
TLDs that are considered as dev or staging:
*.dev
*.dev.cc (DesktopServer)
*.test
*.local
*.staging
*.example
*.invalid
*.myftpupload.com (GoDaddy)
*.cloudwaysapps.com (Cloudways)
*.wpsandbox.pro (WPSandbox)
*.ngrok.io (tunneling)
Subdomains that are considered as dev or staging:
local.*
dev.*
test.*
stage.*
staging.*
stagingN.* (SiteGround; N is an unsigned int)
*.wpengine.com (WP Engine)
dev-*.pantheonsite.io (Pantheon)
test-*.pantheonsite.io (Pantheon)
staging-*.kinsta.com (Kinsta)
staging-*.kinsta.cloud (Kinsta)
*.mystagingwebsite.com' (Pressable)
Moreover, if your domain includes “localhost” (with any port), it will also be recognized as a local host domain.
If you wish to use a license on a dev site that doesn’t match the criteria listed above, you can deactivate the license from the Account page in your WordPress Admin dashboard. Once deactivated, you can then reuse the license for another site.
Migrating License From One Site to Another
To migrate the license of Order Feedback For WooCommerce from one site to the new one, follow the below steps.
Go to the “Website” section to see the list of websites where the license is currently being used.
Select the website for which you want to deactivate the license.
After you select the website, find the “Deactivate” option for that site. Click on it to remove the license from the selected site. Then, proceed to activate the license on your live website.
Upgrade Order Feedback For WooCommerce License
You can upgrade Order Feedback For WooCommerce license whenever you want. When you upgrade, the charges will be calculated on a prorated basis, so you’ll only pay for the time left on your current license, ensuring you are charged accurately.
To upgrade your Order Feedback For WooCommerce License, follow these steps:
Find the “License” option in the menu. Once you’re there, look for the plugin you want to upgrade. Click on it, and you’ll see all the details about that plugin right there on the screen.
Then, click on the “Upgrade To” dropdown.
Once you’ve clicked the dropdown menu, choose the upgrade plan you want. After that, you’ll be taken to the Checkout page. There, you can pay for the upgrade you selected.
Once your payment is confirmed, your subscription will be upgraded accordingly.
How is the Proration Discount Calculated?
When users upgrade a plan that was initially purchased as a subscription, they will receive a proration discount. This discount is calculated based on the remaining unused portion of their previous plan.
Once you purchase the Order Feedback For WooCommerce plugin, you’ll get an email confirming your purchase sent to the email address associated with your account. This email is important because it proves you bought the plugin and contains important details.
It has all the key details you need, like your Username and Password, a license key, and a temporary download link for plugin installation files. Plus, you can easily manage details like downloads, checking your license key, and managing which websites you’re using the plugin on through our website.
To access your account on our website, use the login details sent to you in the confirmation email.
Once you’ve logged in, you’ll navigate to the Dashboard and then click on the “Downloads” button.
When you go to the Downloads section, a window will pop up. It lets you easily copy the license key for the product and download the zip file straight from there.
After downloading the zip file, go to your WordPress website dashboard. Then, navigate to Plugins ➝ Add New ➝ Upload Plugin, and upload the file you downloaded from the store.
After you’ve uploaded the plugin, it will ask you for the license key. Just enter the license key and click to activate it.
Order Feedback For WooCommerce Settings Page
The settings page lets you control many advanced options for the Order Feedback For WooCommerce. You can change settings to make it work just how you want it to.
When you install & activate order feedback for WooCommerce pro plugin on your website, a new menu, Order Feedback, will be displayed in the WordPress menu bar. To access the Order Feedback For WooCommerce Settings page, follow the steps below:
Navigate to Order Feedback ➝ Settings.
There, you can find three sections, General, Appearance, and Email, to manage the settings of Order Feedback For WooCommerce effectively.
General
Show Feedback Form: Select the option to display the feedback form on the Thank You page, Order details page, both pages or none.
Form Type: Select the form type from Floating, Embedded, or Popup (coming soon).
When you select Embedded as a form type, it will ask for some details
Embed Position(Thankyou Page): Select the position to display the feedback form on thank you page.
Embed Position(Order Details): Select the position to display the feedback form on the order details page.
Enter Hook Name: Enter the hook name where you want to display the feedback form on the website.
Priority: Set the priority for displaying the form on webpage.
Manage Form: Manage the form fields.
Visible: Enable the option to display the particular field on feedback form.
Label: Enter the label.
Placeholder: Enter the placeholder text for a particular field.
Required: You can make any field a required field in the form.
Rating Style: Choose rating styles from Number, Stars, or Smiley(applicable for Rating Form Field).
Rating Scale: Choose a rating scale from 5 or 10(applicable for number rating style)
Labels & Messages
Form Title: Enter the form title.
Form Description: Enter the description to display in form.
Submit Button Text: Enter the text for submit button.
Success Message: Specify the message that shows when the user submits the form.
Error Message: Specify the message that shows when there is some issue with form.
Appearance
Form Style
Enable Custom Style: Activate the option to enable the custom styling for form.
Container
Background Color: Select the background color of box.
Border: Set the border.
Width: Specify the width of box.
Margin: Set the margin.
Padding: Set the padding.
Heading/Top Bar
Typography: Set the typography.
Color: Select the heading color of top bar.
Background Color: Select the background color of top bar.
Border: Set the border.
Margin: Set the margin.
Padding: Set the padding.
Icon Color: Select the icon color of top bar.
Align: Select text alignment from left, right, or center.
Label
Typography: Set the typography.
Color: Select the label color.
Input
Input Typography: Set the input text typography.
Color: Select the color of text.
Background Color: Select the background color of input area.
Button
Typography: Set the typography of button.
Color: Select the button’s text color.
Border: Set the border.
Background Color: Select the background color of button.
Hover Color: Choose the text color of button when hover.
Hover Background Color: Select the background color of button when hover.
Hover Border Color: Select the border color when hover.
Align: Choose alignment from left, right, center, or full width.
Messages
Info Message
Typography: Set the typography of form description.
Color: Choose the color of form description.
Success Message
Typography: Set the typography of success message.
Color: Select the color of success message.
Error Message
Typography: Set the typography of error message.
Color: Select the color of error message.
Email
Emails
Enable Customer Email: Enable the option to email customers after they fill out the feedback form.
Customer Email Subject: Enter the customer email subject.
Customer Email Message: Enter the email content to send to customers.
Enable Admin Email: Enable the option to email store owners after customers fill out the feedback form.
Admin Email Subject: Enter the admin email subject.
Admin Email Message: Specify the email content to send to store owners.
Check out a detailed article on How you can use Order Feedback For WooCommerce in your online store.
View All Customer Feedback in WooCommerce
The Order Feedback For WooCommerce page lets you view all the feedback from your customers. When you install and activate the Order Feedback for WooCommerce Pro plugin on your website, a new menu called “Order Feedback” will appear in the WordPress menu bar.
Navigate to WordPress Dashboard Menubar ➝ Order Feedback ➝ Order Feedback.
Here, you can see all the feedback customers leave on your website about their shopping experience.
You can also sort the feedback by various criteria. For example, you can filter it based on the rating value given by the customers, the specific order ID associated with the feedback, the date range within which the feedback was received, or the style in which the rating was provided.
Filter Based on Rating Value & Date Range
Filter Based on Order ID
Filter Based on Rating Style
View Your Feedback
To read what customers wrote in their feedback, click the “View” button. This will open a popup window displaying the detailed feedback.
Install Order Feedback For WooCommerce
To install Order Feedback For WooCommerce, follow the below steps.
Go to plugins and search for Elementor Addon Elements or click on this link: https://wordpress.org/plugins/addon-elements-for-elementor-page-builder/ and click Download.
In the WordPress dashboard, click Plugins → Add New.
Now click on the upload plugin option, xa dialog box will open. Here choose the zip file you have downloaded from the site,
Click on install now and activate the plugin.
How to Enable / Disable Modules
Elementor Addon Elements allows you to enable/disable modules as per your choice. This feature allows you to disable widgets not used on your website.
Thus this will help you in managing the page builder interface and will also reduce the server load.
Navigate to the WordPress Dashboard>> Elementor Addon Elements.
Under the Modules tab, Deactivate or Activate the widgets individually.
You can use Bulk Action option to apply the action on all elements.
How to Enable / Disable Modules
Elementor Addon Elements allows you to enable/disable modules as per your choice. This feature allows you to disable widgets not used on your website.
Thus this will help you in managing the page builder interface and will also reduce the server load.
Navigate to the WordPress Dashboard>> Elementor Addon Elements.
Under the Modules tab, Deactivate or Activate the widgets individually.
You can use Bulk Action option to apply the action on all elements.
How to Edit Simple Products on the Frontend
Editing a simple product on frontend allows you to update the essential details and attributes of a product listed on your online store. Whether you’re adjusting the pricing, adding a description, or specifying inventory information, Frontend Product Editor provides a user-friendly interface to make these modifications.
Furthermore, with our pro version, you have the ability to edit both Virtual and Downloadable products. Here, you will learn about How to Edit Products On Frontend?
Once you click on the edit button, you will have access to a set of settings that allow you to edit the product details. Once you made the desired changes, simply click on the “Update” button to save the updated details.
General
Product Name: Enter the name of the product.
Description: Set the description for the product.
Short Description: Enter the short description of the product.
Catalog Visibility: Select the catalog visibility from the available options.
Is Featured: Enable the option if you want to feature this product.
Categories: Select the categories for product.
Tags: Add the tags for product, if any.
Product Image: Add the image of the product.
Product Gallery: Add the gallery of product images, if needed.
Price
Regular Price: Set the price of the product.
Sale Price: Enter the sale price.
Schedule Sale: Enable the option if you wish to schedule the sale.
Start Date: Set the sale start date.
End Date: Set the sale end date.
Inventory
SKU: Enter the unique SKU for that product.
Manage Stocks: Enable the option to manage the stock.
Stock Quantity: Enter the quantity of product available.
Allow backorders: Select whether to allow backorders.
Low Order Threshold: Enter a number upon which you are notified.
Stock Status: Select the option based on the product stock.
Sold Individually: Enable the option to restrict the product to one per order.
Shipping
Weight: Enter the weight of the product.
Dimension: Length, Width, and Height of the product.
Shipping Class: Shipping classes are utilized by specific shipping methods to group similar products.
Linked Products
Upsell Products: They are shown on the single product page. These are products that you may want to promote to users as upgrades based on the product they are currently viewing. For example, if a user is browsing the T-Shirt product listing page, you can display the Plain T-Shirt and Hoodie on that same page as an up-sell.
Cross-sell Products: Cross-sells are products that are presented along with the cart and are related to the items in the user’s cart. For instance, if a user adds a smartphone to their cart, you may suggest they consider purchasing a phone case when they reach the cart page.
Please check our detailed article on Upsell & Cross-sell. It will provide you with a deeper understanding of these techniques and how they can be effectively implemented in your business.
Attributes
Custom Attribute: Add the custom attributes by clicking on the “Add Attribute” option, and you can also hide the attribute on the frontend by keeping the “Visible on Product Page” option disabled.
After purchasing the plugin, you will receive a confirmation email on the email address associated with your purchase. This email serves as proof of your purchase and contains important information about the plugin.
The confirmation email you receive will include important information, such as your Username and Password, license key, and temporary download link for the installation files. Additionally, you can conveniently manage your downloads, license key, and associated sites through our website.
To access your account on our website, please use the login credentials provided in the confirmation email.
After successfully logging in, you can navigate through the dashboard and click on the “Downloads” option.
In the Downloads section, a popup window will appear, allowing you to conveniently copy the license key of the product and download the zip file directly from that interface.
Once you have downloaded the zip file, proceed to your WordPress dashboard. From there, navigate to the Plugins >> Add New >> Upload Plugins.
Upload the plugin zip file that you downloaded from our store.
Once you have activated the plugin, you will be prompted to enter the license key. Simply input your license key and proceed to activate it.
How to Upgrade Frontend Product Editor License
You have the flexibility to upgrade your Frontend Product Editor license at any time you want. The upgrade charges will be calculated on a prorated basis, ensuring you are charged accurately for the remaining duration of your current license.
Navigate to the License option and select the plugin for which you wish to upgrade the license; you will find all the details associated with the selected plugin displayed in that section.
Next, Click on the “Upgrade To” dropdown.
After clicking on the dropdown menu, simply select the desired upgrade plan, and you will redirect to the Checkout page, where you can proceed to make the payment for the selected upgrade.
Once your payment is confirmed, your subscription will be upgraded accordingly.
How is the Proration Discount Calculated?
When users upgrade a plan that was initially purchased as a subscription, they will receive a proration discount. This discount is calculated based on the remaining unused portion of their previous plan.
To access the most recent version of Frontend Product Editor, proceed by Login to the website.
Once logged in, navigate to the Download section, where you will find a plugin file available for download. Simply click on the Download button to initiate the process.
Using Frontend Product Editor on Localhost or Development Site
We provide support for staging and local development websites. To ensure compatibility, your site URL should match one of the following patterns.
TLDs that are considered as dev or staging:
*.dev
*.dev.cc (DesktopServer)
*.test
*.local
*.staging
*.example
*.invalid
*.myftpupload.com (GoDaddy)
*.cloudwaysapps.com (Cloudways)
*.wpsandbox.pro (WPSandbox)
*.ngrok.io (tunneling)
Subdomains that are considered as dev or staging:
local.*
dev.*
test.*
stage.*
staging.*
stagingN.* (SiteGround; N is an unsigned int)
*.wpengine.com (WP Engine)
dev-*.pantheonsite.io (Pantheon)
test-*.pantheonsite.io (Pantheon)
staging-*.kinsta.com (Kinsta)
staging-*.kinsta.cloud (Kinsta)
*.mystagingwebsite.com' (Pressable)
Moreover, if your domain includes “localhost” (with any port), it will also be recognized as a localhost domain.
In case you wish to use a license on a dev site that doesn’t meet the criteria listed above, you have the option to deactivate the license from the Account page in your WP Admin dashboard. Once deactivated, you can then reuse the license for another site.
Frontend Product Editor Settings Page
The settings page provides you with the ability to effectively manage advanced Frontend Product Editor setting configurations.
You can find Frontend Product Editor Settings under the WooCommerce menu.
Go to WooCommerce -> Frontend Product Editor.
Various configuration options are available for effectively managing the settings of Frontend Product Editor.
Tabs Collapsed by Default: If you prefer the tabs to be collapsed by default, you can enable this option.
Default Tab: Choose the default tab that you would like to open.
Trigger Option: Choose your preferred trigger option from the following: admin bar, floating button, or both.
Allowed User Roles: You can specify the permitted user roles that have the authority to edit the details, such as Administrator or Shop Manager.
Edit from Archives: Enable the option to edit product details on the archive(Shop) page.
ProductTypes: Select the type of product you want: Simple, Grouped, or External/Affiliate.
Editor Position: Select the edit icon position from right or left.
Editor Color: Select the editor color.
How to Edit Products On Frontend?
After activating the plugin, you will get two options to edit products on frontend. These buttons provide a convenient way to edit details or perform specific actions directly from the frontend without having to access the WordPress Admin.
In the free version of the Frontend Product Editor plugin, you are limited to editing only simple products, excluding virtual products and downloadable products. However, with the pro version of the plugin, you gain the ability to edit various types of products, such as Downloadable, Virtual, Grouped Product, and External/Affiliate Products.
When you access the frontend of your WooCommerce single product, our plugin offers two easy-to-go buttons for editing.
When you are logged in as an admin and visit any WooCommerce product page, you’ll find an editing button located in the admin bar named “Quick Edit Product,” giving you easy access to make changes without navigating away from the current page.
Additionally, we provide a floating button positioned on the right edge of the browser. This button remains accessible as you scroll, ensuring you can quickly initiate edits regardless of your position on the page.
EAE-Content Ticker is an attractive option to viewyour trending news feeds and trending posts with amazing animation effects.
Content
Heading Icon: Set the icon for the heading of the content ticker.
Icon Position: Set the position either before or after the icon.
Enable arrow: Enable next and previous arrows.
Stack on mobile: Enable it to stack the content ticker on mobile.
Content List
Text: Set the content of the content ticker.
Link: Set the link of the content ticker.
Speed: Set the speed of the slider in milliseconds.
Show Autoplay: Enable/Disable to show or hide.
Direction: Set the direction of the slider vertically or horizontally.
Loop: Enable/Disable to give loop effect.
Keyboard Control: Enable/Disable to show or hide.
Transition Effect: Choose the transition from the following effects.
Navigation: Enable navigation to navigate on either slide.
Prev Icon: Choose an icon from the options.
Next Icon: Choose an icon from the options.
Navigation position: Enable navigation to set position.
Top: Set the position from the top for the icon.
Right: Set the position from the right for the icon.
Style
Heading
Typography: Set the typography of the heading.
Icon Size: Set the size of the icon.
Rotate: Rotate the navigation in degrees.
Icon Color: Set the color of the icon.
Text Color: Set the color of the text.
Color: Set the color of the heading.
Background Type: Choose the background type of the heading.
Border radius: Set the border radius of the heading.
Slider
Typography: Set the typography of the slider on normal and hover state.
Text Color: Set the color of the text.
Background Type: Choose the background type of the heading.
Navigation
Icon Size: Set the size of the icon.
Icon Gap: Increase or decrease the icon gap.
Icon Color: Set the color of the icon.
Background Type: Set the background for the navigation.
Color: Set the color for the navigation.
Padding: Set the padding of the navigation.
Border radius: Set the border radius of navigation.
Rotate: Rotate the navigation in degrees.
Box
Border radius: Set the border radius of the box.
Border Type: Choose from the following options available.
Box Shadow: Set the box-shadow of box.
Comparison Table
EAE-comparison Table is an effective way to display your product features. This widget makes it easy for the customers to compare various products and thus make decisions.
Content
General
Plan: Enter the number of Product tables you want to display.
Feature box
Heading: Enter the title for the feature box content.
Enable Tooltip: Enable or disable the tooltip.
Type: Select the tooltip type like Link or the Icon.
Features: Enter the list of all the features you are offering. Click on the Add Item button to add another item to the list.
Plan
Title: Enter the title of the specific price plan
Currency: Give a custom currency symbol.
Price: Set the pricing of your product.
Offering Discount: Enable it if you want to display the discounted price.
Duration: Enter the period for each payment that appears under the price.
Ribbon: Enable or disable the corner ribbon.
Ribbon Text: Enter the text to be displayed on the ribbon
Position: Display the ribbon on the Top, Left, and Right of the table
Button text: Write the text that will appear for the button
Link: Enter the URL for the item’s link. Click the setting icon to either add nofollow to the link or to open the link in a new window
Feature: Add a list of all the features you offer for the particular product.
Override Styles: Enable this option to style a particular plan. It contains option for styling(Heading, Price, Features, Button).
Button
Heading: Assign a title to the Call to Action row.
Settings
Hide Title Row: Enable to hide titles of the plans.
Hide Bottom Row: Enable to hide the bottom row of the plan.
Hide Price Row: Enable to hide the price row for plans.
Style
General
Odd Row Color: Choose a background color for the odd row.
Even Row Color: Choose a background color for the even row.
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Width: Set the thickness of the border.
Color: Select the border color.
Feature box
Color: Set the color for the feature box text.
Primary Background Color: Choose a primary background color.
Secondary Row Color: Choose Secondary Color.
Typography: Set the typography options for the feature box text.
Alignment: Align the text to the right, left, or center.
Tooltip Icon
Size: Set the size of the tooltip icon.
Color: Set the color for the Tooltip icon.
Background Color: Choose a background color for the tooltip icon.
Hover Color: Set the color for the Tooltip icon.
Hover Background Color: Choose a background color for the tooltip on hover.
Tooltip Text
Size: Set the size of the tooltip text.
Color: Set the color for the Tooltip text.
Background Color: Choose a background color for the tooltip.
Hover Color: Set the color for the Tooltip text.
Hover Background Color: Choose a background color for the tooltip on hover.
Ribbon
Distance: Control the distance between the ribbon and the corner
Color: Set the color for the Ribbon.
Background Color: Choose the background color of the ribbon
Typography: Set the typography options for the ribbon’s text
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved
Heading
Tab Format: choose from the list of Formats available.
Active Tab Color: Set the background color for the active heading tab.
Color: Set the heading text color.
Active Tab Text Color: Set the text color for the active heading.
Background Color: Choose the background color of the header row.
Height: Adjust the height of the header row.
Typography: Set the typography options for the heading text.
Alignment: Align the heading to the right, left, or center.
Price
Original Price
Color: Choose the color of the price.
Text decorationColor: Choose the text decoration color of the price.
Typography: Set the typography options for the pricing area.
Currency
Color: Set the color of the currency symbol.
Typography: Set the typography options for the currency.
Vertical Alignment: Set the currency symbol to display at the price’s top, middle, or bottom.
Price
Color: Choose the color of the price.
Typography: Set the typography options for the pricing area.
Fractional
Color: Choose the color of the fractional part.
Typography: Set the typography options for the fractional part.
Duration
Color: Choose the color of the duration text.
Typography: Set the typography options for the duration text.
Background Color: Choose a background color for the pricing area.
Alignment: Set the alignment of the duration.
Features
Color: Choose the color of the features list text.
Check Icon Color: Choose the icon color.
Close Icon Color: Choose the close icon color.
Typography: Set the typography options for the features list text.
Alignment: Align the list to the right, left, or center.
Padding: Customize the padding of the features list.
Button
Text Color: Choose the color of the button’s text.
Background Color: Choose the background color of the button.
Column Background Color: Select the background color for the button row.
Typography: Set the typography options for the button’s text.
Text shadow: Set the text-shadow of the button.
Box shadow: Set the Box shadow of the button.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius of the button to control corner roundness.
Content Switcher
The EAE-Content Switcher widget allows you to switch between multiple content options in one place. You can also use Elementor templates, AE – Templates, and sections inside the content section.
Content
Skins
Skin: Select the layout from the preset layout skins.
Content
Title: Give a suitable title for each list item
Type: Select existing Elementor templates and Sections, AE – Templates, or add your content directly in the Richtext editor. In the editor, you can edit the text visually and add images from the Media Library.
Icon: Set an icon for each item in the switcher
Icon Position: Adjust the position of the icon like left or right
Active: Toggle the switch to set the content active on load.
Display Settings
Switch Alignment: Set the alignment for the switcher button, and select from left, right, or center.
Space: Set the space between the switcher and the content section.
Animation Speed: Set the animation duration in milliseconds.
Style
Switch
Typography: Set the typography options for the text inside the switch button
Color: Choose the background color of the switcher for Normal and Active States
Icon Color: Set the icon color
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
Border-radius: Set the border radius of a switch.
Box-shadow: Set the box shadow of the switch.
Icon Spacing: Adjust the space between the icon and the text.
Box Style
Box Color: Set the Box color.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Border-radius: Set the border radius of a switch.
Section Padding: Set the padding parameters for the switcher container section.
Background Color: Set the background color for the container.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius around the container to control corner roundness.
content
Padding: Set the padding for the content
Background Color: Choose the background color of the content section
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
Width: Set the width of the border around the content section
Color: Choose a color for the border
Border Radius: Set the radius of the border to control corner roundness
After/Before Image
The image comparison widget gives you the ability to compare two images simultaneously. Use the slider on the page to customize the image, which can hide and reveal one image. You can also set horizontal and vertical orientation.
Content
Compare Style: Set the comparison style as horizontal and vertical.
Slider Position: Adjust the divider position.
Icon: Select an icon for the divider.
Before Image: Select or upload an image via the media library.
Image Size: Select from the following image sizes, like Thumbnail, medium, large, etc.
After Image: Select or upload an image via the media library.
Image Size: Select from the following image sizes, like Thumbnail, Medium, Large, etc.
Before Text: Add label text for the Before image.
After Text: Add label text for the After image.
Style
General
Icon Size: Adjust the icon size.
Icon Color: Choose a primary color for the icon.
Slider Color: Choose the secondary color for the slider icon.
Separator Color: Select a color for the separator.
Separator Alignment: Set alignment for the separator.
Separator Width: Adjust the separator width.
Label
Position: Select a position to display the image label, like the Top or Botton position.
Typography: Set the typography options for the label text.
Color: Set the text color for the image label.
Background Color: Select the background color for the label.
Border type: Choose the type of border you need for the element.
Border radius: Set the border radius to make the label angles more smooth and round.
Padding Set the preferable custom padding for the label text.
Timeline
Create an attractive Vertical Layout to showcase your blog posts in a tiled manner using the EAE – Timeline Widget. The timeline widget can display the post’s content or custom events.
Content
Skin: Select from the different layout styles of the cards to display the Content in Timeline.
Source: Select from Custom or Post. Custom lets you manually enter data of specific events. At the same time, Post allows picking content dynamically from the blogs and custom post types.
Custom Timeline
When selecting the Custom option in Source.
Items: Add the items individually here.
Date: Add information about the date or the timing of the event.
Link: Set the URL for the button’s link. Set the link to either open in a new window or to add nofollow to the link.
Title: Give a suitable title to be displayed on the Card
Icon: Set an icon for each card in the timeline.
Type: Select the icon type like Custom Icon, Font Awesome icon, or text- select if you want to use the icon or the text to point as an icon for the Timeline card.
Content: Provide more information about the event card in the timeline.
Post Timeline
When selecting the Post option in Source, you get two more options Query and Post Element.
Query
Source: Select from where the content will be retrieved and displayed. Options include Post, page, or Custom Post Types.
Category Filter
Filter Mode: Include and exclude Categories accordingly.
Categories: Select the name of the Category to be included or excluded. Multiple categories can be selected.
Tag Filters
Filter Mode: Include and exclude Tags accordingly.
Tags: Select the name of the tags to be included or excluded.
Format Filter
Filter Mode: Enable to apply format filters.
Order & Limit:
Order By: Set the order in which the posts will be displayed. Options include Date, Title, Menu Order, or Random.
Order: DESC (descending) or ASC (ascending).
Offest: Use this setting to skip over posts.
PostCount: Sets the exact amount of posts displayed.
Post Element
Show Title: Enable to display of the title of posts in the Timeline cards Html Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or p.
Enable Link: Enable it to make the card clickable.
Open in New Tab: Choose Yes to open posts in a new tab.
Date
Show Date: Displays the post-publishing date.
Date Format: Select the format to display the date.
Featured Image
Show Image:: Enable to display of the post’s feature image in the timeline.
Excerpt
Excerpt: Choose to show or hide the excerpt.
Excerpt Length: Choose the length of the excerpt, setting the exact amount of words displayed.
Call To Action
Call To Action: Show or hide the Read More button.
Text: Customize the Read More text.
Give a default icon to all the timeline cards.
Type: Choose the icon type like FontAwesome icon, image, or text to display.
Icon: Select an icon from the FontAwesome library.
View: Choose the default icon view, or select Stacked or Framed.
Shape: If Stacked or Framed is chosen, choose Circle or Square.
Style
Layout
Alignment: Arrange the cards to the left, center, and right alignment types.
Responsive Style: Make the Timeline layout responsive for Mobile and Tablet.
Responsive Orientation: Set the Alignment for the responsive style like Left or Right.
Horizontal Spacing: Set the horizontal spacing of the cards.
Vertical Spacing: Set the vertical spacing of the cards.
Card
Alignment: Align the content inside the card to the Left, Center, and Right
Padding: Set the padding of the card’s content
Alignment: Align the image inside the card to Left, Center, and Right.
Alternate Style: Enable it to display the cards in the alternate style
Size: Set the size of the image
Spacing: Adjust the space between the content block and the image.
Radius: Set the roundness of the edges of the images
Arrow Alignment: Define the alignment of the card arrows.
..Title Color: Specify the color of the title for Normal, Hover, and Active States
Content color: Choose the color for Normal, Hover, and Active States.
Title Typography: Set the typography options for the Title.
Content Typography: Set the typography options for the Content.
Title Shadow: Add a shadow and blur to the title text.
Content Shadow: Add a shadow and blur to the content.
Background Color: Choose the background color of the timeline card. Normal, Hover, and Active States.
.Border Radius: Set the roundness of the border corners of the timeline cards
BoxShadow: Set the box-shadow options around the cards.
Call To Action
Text Color: Choose the Text color for Normal, Hover, and focused States.
Background Type: Set the background type for the call to action.
Border Type: Set the Border type for the call to action.
Border Radius: Set the roundness of the call to action border corners.
Typography: Set the typography options for the call to action.
Date
Padding: Set the padding of the Date text.
Margin: Set the margin.
Color: Specify the date color.
Text Shadow: Add a shadow and blur to the Date text.
Typography: Set the typography options for the Date.
Connector
Color: Customize the color to apply for the connector.
Progress Color: Set the preferable color to be shown when the progress moves on.
Thickness: Specify the width of the timeline line.
Icon
Primary Color: Choose the primary color of the icon.
Secondary Color: Choose the secondary color of the icon.
Icon Size: Set the size of the icon.
Padding: Set the amount of padding around the icon.
Rotate: Select the number of degrees to rotate the icon from 0 to 360.
Border Style: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Border Width: Set the width of the icon border.
Border Radius: Set the radius of the icon border to control corner roundness.
Animated Text
EAE – Animated Text widget helps you to add animated words and phrases to your website’s pages. You can add plain text to complement the animated text and customize them.
Content
General
Alignment: Specify the alignment of the text like left, center, and right.
PreText: Here, you can add the text before the animated text.
Animated Text list: Click on the button to add animated text. In the Text field, enters the text that you want to animate. You can add several items of animated text. Items will be replaced one after the other in loops.
Post Text: In this field, you must add the text after the animated text. You can also leave the field empty if you don’t want to continue animated text with plain text.
Style
Pre Text
Pre-Text Color: Choose the color of the pretext.
Typography: Set the typography options for the pretext.
Animated text element
Typography: Set the typography options for the animated text.
Animated Text Color: Choose the color of the animated text.
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius of the text.
Padding: Set the padding for the animated text.
Margin: Set the margin for the animated text.
Background Type: Choose whether you want to use a classic or gradient background.
Cursor Control
Color: Choose the color of the cursor.
Width: Set the cursor width for the animated text Post Text.
Post-Text Color: Choose the color of the post-text element.
Typography: Set the typography options for the post-text element.
Post-Text
Typography: Set the typography options for the Post-text.
Post Text Color: Set the post text color.
Dual Button
The EAE – Dual Button widget adds two attractive and flexible buttons to your web page. These buttons will make your website web page more interactive and trendy.
Content
Layout: Set Horizontal and Vertical layouts of the buttons.
Alignment: Align the button to the left, center, right, or justified with its column.
Text: Enter the button’s text.
Link: Set the URL for the button’s link. Set the link to either open in a new window or to add nofollow to the link.
Icon: Select a FontAwesome icon to display on the button.
Icon Position: Set the icon before or after the button text.
Spacing: Adjust the space between the icon and the button text.
Text: Give the connector icon text.
Icon: Choose an icon for the separator.
General
Animation: Click on the Hover tab to set a Hover Animation.
Padding: Change the padding settings of the button.
Box Shadow: Set options to apply a box shadow on the button.
Button
Typography: Change the default typography options for the button’s text.
Text Color: Select the color of the button’s text.
Icon Color: Choose a color for the icon.
Background Type: Select the button’s color for Normal and Hover states.
Border Type: Select the type of border to use around the button.
Width: Control the thickness of the border around the button.
Color: Choose the border’s color.
Border Radius: Set the border radius to control corner roundness.
Padding: Change the padding settings of the first button.
Separator
Size: Set the size of the separator icon.
Typography: Set the typography options for the separator text.
Color: Choose a color for the separator icon and text.
Background Color: Choose the background color of the separator.
Border Radius: Set the border radius to control corner roundness.
Box Shadow: Set options to apply a box shadow on the button.
Modal Popup
EAE – Modal Popup widget allows you to create small popup windows displayed on performing a certain action. Through this, you can get more content from Custom Fields and Post Archives without navigating from one page to another.
Content
Content
Content-Type: Choose the type of content you want to display in the popup window, like Custom Content, Saved Page, Saved Section, or AE Template.
Preview Modal Popup: If you want to preview the pop window, you can enable it.
Title: Give a Title to be displayed at the top of the popup window.
Content: Enter content manually or select the source of the Content-Type that you choose on the top accordingly.
Modal Setting
Modal Width: Here, you can assign the width to the pop-up window.
Modal height: You can assign the height to the pop-up window here.
Effect: Choose from the list of effects.
Overlay Color: It allows you to choose the color for the overlay.
Display settings
Button Text: Here, you can give the text to the Model Popup button.
Alignment: You can adjust the positioning of the button (left, center, right, justified).
Icon: Select an icon to be displayed along with the button text.
Icon Position: Adjust the position of an icon like before or after the text accordingly.
Icon Spacing: Adjusted the space between the icon and the text.
Style
Popup
Title
Color: Choose the popup text color
Background Color: Select the popup background-color
Padding: Adjust the padding around the popup
Typography: Set the typography settings of the title
Content
Color: Select the color for the popup text
Background Color: Select the background color
Padding: Adjust the content padding
Typography: Set the typography settings of the content
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
Border Radius: Set the border radius to control corner roundness for each side of the popup
Box Shadow: Adjust box-shadow options
Button
Typography: Set the typography options for the button’s text
Text Color: Choose the color of the button’s text
Text Shadow: Apply shadow to the button text
Background Color: Choose the background color of the button
Border Radius: Set the border radius of the button to control corner roundness
Close Button
Button Inside: Enable it to position the close button inside the popup window.
Icon: Select an icon to close the popup.
Icon Size: Adjust the icon size.
Color: Select the Close button for both the Normal and Hover states.
Position Top: Adjust the close icon position from the top.
Position Right: Adjust the close icon position from the right side.
Flip Box
The EAE – Flip box widget creates an attractive information box for your website. You can switch the box from one side to another and easily customize each box element. Icons, text, images, and buttons can easily be added to both sides of the box.
Content
Front Box
Icon: Select an icon from the FontAwesome library
View: Choose the default icon view, or select Stacked or Framed
Shape: If Stacked or Framed is chosen, choose Circle or Square
Title: Here, you need to input the title for the front-side content of the animated box.
Html Tag: Select the HTML tag to render the box title.
Text: Enter the content to be added to the front side of the box.
Back Box
Icon: Select an icon from the FontAwesome library.
View: Choose the default icon view, or select Stacked or Framed.
Shape: If Stacked or Framed is chosen, choose Circle or Square.
Title: Here, you need to input the title for the backside content of the animated box.
Html Tag: Select the HTML tag to render the box title.
Text: Enter the content to be added to the back side of the box.
Action Button
Button Text: Choose the text that appears inside the button
Link TO: Choose where the button points to. Enter the URL of the page in the link.
Style
General
Animation Style: Select the animation style for the box.
Border Type: Set a border to the entire flip box.
Border Radius: Set the radius of the border to control corner roundness.
Box Height: Set the height of the flip box.
Front Box
Background Type: Choose a Color or Gradient as the background of the front of the flip box.
Title: Choose the color of the title.
Title Typography: Set the typography settings of the title.
Description Color: Choose the color of the description.
Typography: Set the typography settings of the description.
Icon Color: Select the icon color for the front side of the box.
Icon Size: Adjust the size of the icon.
Back Box
Background Type: Choose a Color or Gradient as the background of the back side of the flip box.
Title: Choose the color of the title.
Title Typography: Set the typography settings of the title.
Description Color: Choose the color of the description.
Typography: Set the typography settings of the description.
Icon Color: Select the icon color for the back side of the box.
Icon Size: Adjust the size of the icon.
Action Button
Text Color: Choose the text color of the button.
Typography: Customize the typography of the button text.
Border Type: Choose a border for the action button None, Solid, Double, Dotted, Dashed, or Groove.
Border Radius: Control the border radius of the button.
Shape Separator
EAE – Shape Separator widget creates various graphic shapes allowing you to separate page sections. Give your website an attractive and elegant look using different shapes to divide various sections.
Content
Shape
Shape: Click the dropdown to choose your Shape Divider style.
Shape Color: Choose the appropriate color.
Shape Height: Set the height of your Shape Divider.
Split Text
The EAE – Split Text widget lets you create unique and attractive heading styles for your website. It separates the text into two different parts; each part can be styled separately by adjusting color and typography for both parts.
Content
General
Alignment: Specify the alignment of the text like left, center, and right.
Split Mode: Select the split mode like Letter or Word.
Split Count: Enter the number from where to split the text.
HTML Tag: Select the HTML tag to render the text item.
Text: Enter the text which you want to style.
Style
Parts
Text Color: Choose the color of the first part of the text.
Typography: Set the typography options for the part 1 text.
Border: Set the border type for the text block. It can be dotted, dashed, double, or solid.
Border Radius: set the border radius for the chosen border to make the border angles more round.
Padding: Set the padding for the text.
Margin: Set the padding for the text.
Background Type: Choose the background color of the content.
Google Map
The EAE – Google Map widget allows you to embed a customizable google map on your website. Incorporating a Google Map on your website page makes it easier for visitors to track your location. You need to get the Google Map API key to make this widget work.
Content
General
Markers: You can add multiple locations to be shown on the map
Longitude: Insert the longitude coordinates
Latitude: Insert the latitude coordinates
Address: Enter the text to be displayed in the Marker
Height: Set the height of the map
Zoom Set the zoom level of the map
Aminated Marker: Enable it to give animated markers
Snazzy Style: You can apply styles from Snazzy Maps and give your maps a different touch. This is an optional field. If you leave it, it will display your map in the default Google Map theme.
Price Table
The EAE – Price Table Widget allows you to display your product price and the services you offer, attractively and clearly. The widget contains various customization options to style each section of the table.
Content
Plan Heading
Heading: Enter the title of the specific price plan
Heading Html Tag: Set the Header’s Title tag, choosing from H2 – H6
Sub Heading: Enter the subtitle that appears below the main title
Sub Heading Html tag: Set the HTML tag for the subheader, choosing from H2 – H6
Price Box
Price Box Text: Set the exact pricing of your product or service.
Price Box Sub Text: Enter extra text to be displayed in the price box
Shape: Select to display the price inside a circle or a square
Features
A list of all the features you are offering. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.
Action Button
Button Text: Write the text that will appear for the button.
Link To: Choose where the button points to. Enter the URL of the page in the link.
Icon: Select an icon from the FontAwesome library.
Icon Position: Adjust the position of an icon like before or after the text accordingly.
Icon Spacing: Adjusted the space between the icon and the text.
Style
Box Style
Box Color: Choose the background color for the top section of the widget.
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius of the button to control corner roundness.
Box Shadow: Add a box shadow effect to the table.
Plan Heading
Heading Color: Choose any color for the main title.
Typography: Select the heading typography.
Sub Heading Color: Choose a subheading color.
Typography: Select the subheading typography.
Background Type: Select the background type for the heading area.
Price Box
Price Text Color: Choose any color for the main title.
Typography: Select the heading typography.
SubText Color: Choose the subheading color.
Typography: Select the subheading typography.
Background Type: Select the background type for the heading area.
Feature List
Feature Color: Choose the color of the features list text.
Typography: Set the typography options for the features list text.
Color: Choose the background color of the features list.
Image: Upload an image to be used as a background.
Alignment: Align the list to the right, left, or center.
Padding: Customize the padding of the features list.
Action Button
Section Background: set the background color for the button section
Text Color: Choose the color of the button’s text.
Typography: Set the typography options for the button’s text.
Background Color: Choose the background color of the button.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius of the button to control corner roundness.
Text Padding: Set the distance between the button text and the border.
Button Hover
Text Color: Set the button text color on hover.
Background Color: Set the button background color on hover.
Info Circle
EAE – Info Circle widget adds an interactive element to your website. It serves as a multipurpose widget, as you can add multiple items inside a single widget.
Content
Skins
Skin: Select the layout from the pre-build layout styles.
Global Icon
Type: Choose the icon type like FontAwesome icon, image, or text to display.
Icon: Select an icon from the FontAwesome library.
Custom Icon: Upload an icon image.
View: Choose the default icon view, or select Stacked or Framed.
Shape: If Stacked or Framed is chosen, choose Circle or Square.
Title: Give a title to each item of the info circle.
Icon: To give each item of the info circle a separate icon.
Content: Write a short description of the item.
Style
Content
Border Type: Set a border around the content.
Width: If a border type is chosen, set a width for the border.
Color: Select a color for the border.
Content change on mouse enter: Enable it to change on mouse enter.
Content auto change: Enable it to change automatically.
Content Alignment: Align the content Left, Center, and Right.
Content Padding: Choose the padding for the content.
Title Color: Choose any color for the title.
Content Color: Choose any color for the content.
Title Typography: Change the title typography.
Content Typography: Set content typography.
Background Type: Select the background type from Classic or Gradient.
Box Shadow: Add a box shadow effect to the circle.
Primary Color: Choose the primary color of the icon for both normal and active states.
Secondary Color: Choose the secondary color of the icon for the normal and active state.
Icon Size: Set the size of the icon.
Padding: Set the amount of padding around the icon.
Rotate: Select the number of degrees to rotate the icon from 0 to 360.
Border Style: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Border Width: Set the width of the icon border.
Border Radius: Set the radius of the icon border to control corner roundness.
Progress Bar
The EAE – Progress bar widget creates a fully functional and attractive bar for your website page.
Content
General
Skin: Select the layout style of the bar.
Skill: Enter the Title to be shown at the top of the progress bar.
Percentage: Set the completion percentage number.
Show Title: Show or hide the title of the bar.
Show Percentage: Show or hide the actual percentage number text at the end of the bar.
Style
General
Progress Color: Choose the color of the bar.
Background Color: Choose the color of the background of the bar.
Title
Color: Choose the title text color displayed above the progress bar.
Typography: Set the typography options of the title text.
Percentage
Color: Choose the color of the percentage text displayed above the progress bar.
Typography: Set the typography options of the percentage text.
Post List
The EAE – Post List widget gives you a powerful way to display your post, page, templates, and custom post types in an attractive list manner. Each post in the lists is visually represented in a separate card.
Content
Post Filters
Post Type: Choose the source from where the content will be retrieved. Select from these options Post, page, template, etc.
Category ID: Enter category id to filter posts based on certain categories.
Number of Posts: Set the exact amount of posts displayed.
Post Offset: Use this setting to skip over posts.
Order By: Set the order in which the posts will be displayed. Options include Date, Title, Menu Order, or Random.
Order: DESC (descending) or ASC (ascending).
Layout Settings
Show Image: Enable to display post feature image.
Image Size: Set the size of the image from thumbnail to full.
Image Alignment: Set the image position relative to the content. Options include Top, left, right, and none.
Image Indent: Adjust the spacing between the text and the image.
Show Title: Choose to show or hide the title.
Title On Top: Enable it to display the post title on the top.
Show Excerpt: Choose to show or hide the excerpt.
Excerpt Size: Choose the length of the excerpt, setting the exact amount of words displayed.
Show ReadMore: Show or hide the Read More button.
Readmore Text: Customize the Read More text.
Style
General
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the roundness of the border corners.
Typography
Title Color: Set the color of the titles.
Title Align: Align the title left, center, and right.
Title Typography: Set the typography of the titles.
Excerpt Color: Set the color of the excerpt.
Excerpt Align: Set the alignment for the excerpt text and select from left, center, and right.
Excerpt Typography: Set the typography of the excerpt.
Readmore Color: Set the color of the Readmore.
Read more Align: Set the alignment for the Readmore text and select from left, center, and right.
Read more Typography: Set the typography of the excerpt.
List Item Style
List Item Padding: Set the padding for the list items.
List Item Margin: Set the margin for the list items.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved, for each list item.
Border radius: Set the border radius.
Read More Button
Background Color: Set the background color for the button.
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the roundness of the border corners of the button.
Text Padding: Adjust the padding for the read-more text.
Read More Margin: Adjust the margin for the read more text.
Text Separator
Content
Title
Title: Enter the divider text.
HTML Tag: Select the HTML tag to display the title.
Alignment: Align the text to the divider’s left, center, or right.
Icon
Icon: Select an icon from the FontAwesome library
View: Choose the default icon view, or select Stacked or Framed
Icon Position: Choose the position of the text about the divider, selecting from Left, Center, or Right
Divider
Style: Choose between solid, double, dotted, and dashed.
Weight: Control the weight of the divider as a percentage from 0 to 100 percent.
Style
Title
TextColor: Select the color for the text element.
Typography Choose the typography for the text.
Divider
Divider Color: Choose the color of the divider.
Width: Control the divider length as a percentage from 0 to 100 percent.
Alignment: Set the alignment of the divider.
Icon
Primary Color: Choose the icon color
Icon Size: Set the size of the icon
Icon Rotate: Select the number of degrees to rotate the icon, from 0 to 360.
Thumbnail Slider
Using EAE-Thumbnail slider interactive sliders to your Elementor Website, with many functionalities and advanced features. Add and customize the thumbnail slides and images.
Content
Slides
Slides: By default, you will get three tabs to create slides for your slider. If you want to add more slides, click the Add Item button.
Image: Add an image to the slider. If you want to customize the image, click the Custom thumbnail option.
Content: Add custom content to the slides.
Style: Under the style option, you can give a specific styling to that particular slide.
Height: Set the height of the carousel.
Image Fit: Select how the image fits into its container, either Cover, Contain, or Auto.
Image Position: Set the image position within the slider, like center, center right, and top right, and there are many other options.
Image Size: Select the image size from Thumbnail to Full or Custom.
Slide Overlay: Enable it to add an overlay effect to the slides.
Color: Choose the overlay color.
Blend: Select the blend mode type like normal, multiply, blend, overlay, etc.
Thumbnails
Thumbs Per View: Enter the number of image thumbnails to view. By default, three thumbs are displayed.
Space Between Thumbs: Adjust the spacing between the thumbnails.
Arrow: Enable this option to add navigational arrows to the thumbnail slider.
Image Size: Set the image size within the thumbnails.
Image Fit: Choose from the following options.
Image Repeat: Choose from the following options.
Ratio: Set the image aspect ratio.
Position: Set image positioning bottom or top.
Slider Options
Effect: Choose how each slide transitions, either Slide or Fade.
Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms equals 1 second.
Autoplay: Show or hide autoplay.
Duration: Set the time it takes for each slide to appear.
Pause On Interaction: Select whether or not to pause autoplay when a user interacts with the carousel.
Pause On Hover: Select whether or not to pause autoplay when a user hovers on the carousel.
Direction: Set slider direction from the left or right.
Space Between Slides: Set the space between slides
Loops: Show the carousel in a continuous loop, infinitely.
Arrow: Choose to show or hide the navigation arrows
Icon Prev: Add the previous icon.
Icon next: Add the next icon.
Pagination: Select None, Dots, Fraction, or Progress.
Style
Slides
Space Between: Set the space between slides and thumbnails.
Border Type: Select the type of border to use around the slides. Select from none, solid, dotted, dashed, and groove.
Border Radius: Set the border radius to control corner roundness.
Padding: Set the padding.
Horizontal Position: Set the horizontal positioning of the text within the slides.
Vertical Position: Set the vertical positioning of the text within the slides.
Text Align: Align the text on the slides to the left, center, or right.
Text Shadow: Apply shadow on the text.
Content Width: Set the width of the text content in the slide.
Content Background Color: Choose a background color for the text content.
Content Padding: Set the content padding accordingly.
Heading
Text Color: Choose an appropriate color for the heading text.
Typography: Set the typography options for the heading text.
Spacing: Adjust the spacing between the heading text and description.
Description
Text Color: Choose an appropriate color for the text.
Typography: Set the typography options for the text in the description.
Spacing: Adjust the spacing between the description and the button.
Button
Typography: Set the typography options for the button text.
Text Color: Choose the color for the text.
Background Color: Choose the button’s background color.
Border Type: To give a border around the button, choose the border type from none, solid, dotted, dashed, or groove.
Width: Set the border width.
Slider Navigation
Color: Choose a color for the navigational text.
Active Color: Set the color for the slide navigation to active.
Size: Adjust the size of the navigation text.
Thumbnails
Border Type: Select the type of border to use around the thumbnails.
Border Radius: Set the border radius to control corner roundness.
Data Table
EAE – Data Table widget lets you create well-structured Data Tables for your WordPress site. It gives you more flexibility and ease in table design and has many customization options.
Content
Header
Here you can create a table header section. Every time you add a new row, that section is by default marked as ‘Row Start.’ To add the header content, click on the Add Item button.
Row/Column: Select Column to add the content inside the cell. Each item in the cell has three control tabs
Content:
Text: Enter the text for the header row.
Column Span: Enter the number of columns you want to merge.
Row Span: Enter the number of rows you want to merge.
Alignment: Set the text’s alignment in the cell, left, center, or right.
Icon: Here, you can add custom icons inside the header.
Style: Here, you can give custom styling to each item separately.
Body
Here you can add content to your table. Every time you add a new row named “Row Start, ” you will get a default Row section.” You can add a new Row by clicking on the Add Item button.
Each row consists of cells. To add cells to individual rows, click on the add item button. Each item has three tabs.
Content
Type: Choose whether to add content manually or import a Template.
Text: Enter the text in the cell.
Link: Add a URL to the text to navigate to the other page.
Column Span: Enter the number of columns you want to merge.
Row Span: Enter the number of rows you want to merge.
Alignment: Set the text’s alignment in the cell, left, center, or right.
Icon Here, you can add custom icons inside the cell.
Style Here, you can give custom styling to each item separately.
Table Settings
Width: Adjust the Width of the table.
Alignment: Align the table to the Left, Right, or Center.
Search: Enable it to add a Search box to the table.
PalceHolder: Enter the placeholder text for the Search text box.
Sorting
Sortable Table: Enable it to make table data Sortable.
Icon Type: Add a Sort icon.
Style
Table
Background Type: Select solid Color or gradient as a background type.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved
Header
Typography: Change the typography options for the header text
Color: Choose a color for the text in the header row.
Background Color: Choose a background color for the header.
Icon Color: Set the icon color
Border Type: Set the border style around the headers.
Width: Set the border width
Color: Choose the header border color.
Padding: Adjust the Padding.
Rows
Typography: Set the typography option for the row content
Striped Rows: Enable to apply Even Odd background Style to the table rows.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved
Width: Set the border thickness
Color: Choose the border color.
Padding: Set the Padding for the Rows.
Column
Typography: Set the typography option for the text in Columns
Color: Set the Color for the Column text.
Hover Color: Set the Color for the Column text on Hover
Background Color: Set the background color for the even and odd Columns.
Hover Background Color: Set the background color for the even and odd Columns on the hover state.
Icon Color: Set the icon color to a normal state
Hover Icon Color: Set the icon color on the hover state.
Search
Width: Set the Width of the search box
Alignment: Set the Alignment of the box
Bottom Spacing: Adjust the spacing between the search box and the table.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved
Typography: Set the typography option for the search text
Color: Set the Color for the text
Background Color: Choose the background color for the search box.
Position: Set the position of the Search icon as Before or After the placeholder text.
Size: Set the icon size.
Color: Choose a color for the icon
Sort
Color: Choose the Sort icon color
Hover: Choose the sort icon color on the hover.
Size: Set the Size of the icon
Filterable Gallery
EAE – Filterable Gallery widget lets you create an attractive image gallery for your website. It allows you to group images into categories and easily access them using clickable filters. This gallery widget comes with various advanced features through which you can easily represent and style your portfolios.
Content
General
Click on the ADD Item button to add filters. Give the filter a proper name, then add multiple images to the filter item.
Settings
Image Size: Set the image size from thumbnail to full , or enter a custom size.
Columns: Set how many columns will be displayed per row from 1 to 6.
Enable Image Ratio: Control the space between each image in a row.
Gutter: Adjuat the gutter margin accordingly.
Show Alt Filter tab: If set to Yes, enter the desired label. “All” is the default.
Masonry: Enable it to display images seamlessly.
Hover Tilt: Enable to get a tilted effect on hover.
LightBox: Choose to display images in a lightbox.
Hover Scale: Enable or disable the hovering scale.
OverLay Setting
Show Overlay: Select when the Overlay effect appears for the images like OnHover, Always, Hide on Hover, or Never.
Caption: Hide or Show Captions.
Icon: Select an icon to be displayed on hover.
View: Choose the default icon view, or select Stacked or Framed.
Style
General
Border Type: Choose the thickness of the border for Normal and hover state.
Border Radius: Control the corner roundness of the image border.
Item Shadow: Enable this option if you want to access the advanced shadow settings for the items and need to apply shadow for them.
Image
Opacity: Set the Opacity for the image.
CSS Filters: Set CSS Filters, selecting from Blur, Brightness, Contrast, and Saturation for Normal and Hover states.
Overlay
Background Type: Choose a classic or gradient type for the widget overlay.
Animation: Choose the overlay’s Entrance or Exit animation upon hover.
Color: Choose the Description’s color.
Typography: Set the typography options for the Caption.
Primary Color: Choose the primary color of the icon.
Secondary Color: Choose the secondary color of the icon.
Primary Color Hover: Choose the primary color of the icon on the hover state.
Secondary Color Hover: Choose the secondary color of the icon on the hover state.
Size: Choose the size of the icon.
Icon Padding: Set the amount of padding around the icon.
Rotate: Rotate the icon to any angle.
Filter
Typography: Set the typography options for the Filter bar text.
Color: Choose the color of the Filter bar text for Normal, Hover states.
Current Color: Choose the color of the Filter bar text for active states.
Background Color: Choose the background color of the Filter bar for Normal, Hover, and states.
Current Background Color: Choose the background color of the Filter bar for active states.
Border Type: Set the type of border, choosing from None, Solid, Double, Dotted, Dashed, or Groove.
Curent Border Color: Choose the border color for the active item.
Border Radius: Set the border radius, to control corner roundness.
Alignment: Align the bar to the left, right, or center.
Padding: Control the amount of space between the Filter text and the gallery images.
Spacing: Control the amount of space between Filter text items.
Background Slider
Add image slideshows as a background to your sections, columns, or inner section using the Elementor Addon Elements Background Slider feature.
To add a background slider, edit the section/ column, click the Style tab, and then go to the EAE – Background Slider option.
Style
Add Images: Click the Add Images button to select images to display. Once selected, click the Create a New Gallery button and then the Insert Gallery button.
Image Size: Select the image size from Thumbnail to Full or Custom.
Transitions: Choose from Fade, Slide Right, Slide Left, Slide Down, or Slide Up.
Animation: Select the animation style.
Custom Overlay: Enable it to add a custom overlay.
Background Type: Select the Background.
Overlay: Select overlay style.
Cover: Select True or False.
Delay: Set the delay time in milliseconds.
Timer: Select YES or No.
Animated Gradient Background
Add stunning animated background effects to the Elementor’s section and Columns to make them eye-catching and appealing using the Animated Gradient Background feature of Elementor Addon Elements.
Follow the steps to add a gradient background to your elementor section or column.
Add a section, then under the edit section settings, Go to the Style tab and then enable the EAE – Animated Gradient Background feature.
Angle: Set the gradient angle.
Color: By default, you can add three colors for the gradient effect. Click on the Add item button to add more colors for the gradient background.
Twitter Feed
Using EAE – Twitter widgets allows you to share the tweets from your Twitter account to your website page seamlessly. Through this, you can make your website more engaging, and you can also customize various elements of the widget.
Content
General
Type: Handle, Hashtag, Message, and Share. The options vary based on the type selected.
Enter UserName: Enter the Twitter account details to display its posts.
Display Mode: Select Timeline or Button mode timeline.
Height: Adjust the height of the widget.
Theme: Select the display theme, Light or Dark.
Display Link Color: Choose the color for the tweet text button.
Button Type: Select if you want a Follow button or the Mention button
Hide Name: Toggle it to hide the username.
Show Count: Enable it to display the count of followers.
Large Button: Enable to display the button in a larger size.
Language: Select the language for the post.
Particle Background Effect
Add particle background to your sections/ columns using the Particle effect feature of Elementor Addon Elements.
The particle background uses the particle.js library. Using the EAE – Particle feature, you can customize the particles.
Select the effect and then customize it as per requirement.
After completing the setup, download the JSON file from the site.
Add the JSON code to the Section/ Column.
Edit Section/Column, click the Style tab, and enable the EAE- Particle option.
Copy the JSON code from the file downloaded and paste the code into the text editor.
Advanced Heading
“EAE Advanced Heading” is an incredibly powerful widget that empowers users to create visually stunning and streamlined headings for their web pages. Users can add a range of design components, such as shadow text, icons, separators, and highlighted text, to enhance the overall aesthetics of the heading.
Moreover, the widget allows users to insert icons, images, or Lottie animations between the Separator to add an extra layer of visual appeal. The widget’s easy-to-use interface makes the process of creating headings a breeze, and the result is a stunning, professional-looking heading that will surely capture the user’s attention.
The “Advanced Heading” widget features the following controls:
Content
Heading – Enter the desired text you want to display or choose the dynamic tag option. If you want to highlight specific text within the heading, place them in between %%_%%, like, Hello %%World%%.
Link – Include a link URL in the widget by manually entering it or choosing a dynamic option.
HTML Tag – Select the HTML tag you wish to use to display your heading.
Icon type – Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source – Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop – Enable the loop option to display the animation continuously.
Reverse – Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Position – Choose the position of the Icon, either before or after the heading.
Sub Heading
Enable – Activate the option to add subheadings to your webpage.
Text – Input the desired text or select a dynamic tag option for display.
HTML Tag – Select the HTML tag you wish to use to display your sub-heading.
Shadow Text
Enable – Activate the option to add shadow text to your webpage.
Text – Input the desired text or select a dynamic tag option for display.
Icon
Icon Type: As we mentioned above, you can choose from a list of Icons, Images, or Lottie animations. Click here.
Alignment: Set the alignment of icon.
Separator
Show Separator – Enable the option to show Separator.
Type – Select the type of Separator.
Graphic Type – Select the graphic type for display between the separators, such as Image, Icon, or text.
Icon
Icon type: Select either an Icon or a Lottie animation
Icon
Icon – Select an icon from the Font Awesome library or upload an SVG
Lottie Animation
Source – Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop – Enable the loop option to display the animation continuously.
Reverse – Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Text
Text – Enter the text that you wish to appear or use a dynamic tag between the separator.
Image
Image – Upload an image.
Alignment – Choose the alignment of the Separator, whether left, right, or center.
Order
Choose the order of displaying individual elements, such as
Heading
Subheading
Separator
Icon
Note: If any of these elements have a lower priority than others, they can be placed first on the webpage. This feature gives you greater control over the visual hierarchy of your webpage.
Style
Heading
Typography: Set the typography option for the heading.
Fill Style: Select either a color or an image.
Color
Color: Select the color for the background.
Hover Color: Select the color for hover states.
Image
Background Type: Choose either a Classic or a Gradient.
Classic
Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Repeat: Specify the repeat pattern for the background image.
Display size: Choose between contain, cover, and auto options, or add custom values for the background display size.
Image Size: Choose the size of the image, from thumbnail to full.
Position: Set the position of the background image.
Attachment: Choose either scroll or fixed.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Text Shadow: Apply a shadow to the heading if desired.
Position: Choose the position of the heading, whether left, right, or center, for display.
Text-align: Choose the alignment of the heading, whether left, right, or center, for display.
Padding: Set the padding for the heading.
Margin: Set the margin for the heading.
Heading Icon
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon in degrees.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX,%, EM, or REM.
Highlighted Text
Typography: Set the typography option for the highlighted text.
FillStyle: As we mentioned above, you can select either a color or an image. Click here.
Text Shadow: Apply a shadow to the highlighted text in the heading if desired.
BackgroundType: As we mentioned above, you can select either Classic or Gradient. Click Here.
Border Radius: Set the border radius.
Padding: Set the padding.
Sub Heading
Typography: Set the typography option for the heading.
Fill Style: As we mentioned above, you can select either a color or an image. Click here.
Text Shadow: Apply a text shadow on the subheading.
Alignment: Choose the desired alignment of the Icon, whether it should be on the left, right, or center
Padding: Set the padding for the subheading.
Margin: Set the margin for the subheading.
Shadow Text
Top: Adjust the position of the shadow text from the top.
Left: Adjust the position of the shadow text from the left.
Typography: Set the typography for the shadow text.
Stroke Color: Set the stroke color.
Fill Color: Set the color to fill the text.
Stroke Width: Set the width for the stroke on shadow text.
Separator
Width: Set the width of the Separator using %, PX, EM, or REM.
Height: Set the height of the Separator using %, PX, EM, or REM.
Gap: Set the gap of Separator.
Position: Set the position of Separator.
Color: Set the color of the Separator.
Border Radius: Set the border’s radius using PX,%.
Margin: Set the margin for the Separator using PX, EM, or %.
Icon
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Text
Note: This is applicable when you select Text as Graphic Element in Separator.
Text Color: Select the separator text color.
Typography: Set the typography.
Image
Note: This is applicable when you select Image as Graphic Element in Separator.
Height: Set the height of image.
Width: Set the width of image.
Icon
As we mentioned above, Styling control for icons is under this section. Check here.
Chart
The Chart widget allows you to create amazing grahpical data charts in Elementor Page Builder. You can easily make animated charts and can customize them accordingly.
Content
Layout
Skin: Select one of the following chart layouts, Horizontal, Vertical, or Line.
Labels: Labels field allows you to give every set of bars a separate name. You must separate the names with a (, ) if there is more than one set.
DataSets: Enter the items that the bars in the chart will represent. Click on ADD Item button to create more items.
Additional Settings
Chart Height: Set the graph height in pixels
Bar Width: Set the width of the bars in case of the Horizontal and Vertical Skin options. If you select the Line chart option in the skin, you can also set the width of the line.
Bar Category Width: Control the width of the bars in the charts.
Bar Border Width: Set the border width.
X-Axis
Enable Grid Line: Enable or Disable X-Axis Grid Lines
Enable Title: Enable this option to add the text shown on the x-axis.
Enable Label: Enable this option to display labels on the x-axis.
Y-Axis
Enable Grid Line: Enable or Disable Y-Axis Grid Lines
Enable Title: Enable this option to add the text that will be shown on the y-axis.
Enable Label: Enable this option to display the label on the y-axis.
Step Scale: Enter a number to define the size of the steps.
Scale Axis Range: Set the maximum number of the scale according to your need.
Title
Enable Title: Enable or disable the chart title
Title: Enter the Chart Title
Position: Set the position to display the title, Top or Bottom
Legend
Enable Legend: Enable this option to help your readers to understand the charted data.
Position: Select the legend position from the top, right, bottom, and left.
Alignment: Set the alignment for the legend data to display
Reverse: You can enable or disable the legend data reverse option.
Tooltip
Enable Tooltip: Enable this option to add a tooltip for the chart data on hover.
Mode: You can choose to display different values when hovering. You can choose from Index or Point.
Animation
Animation: Add the animation style to the chart. Select from the different options available.
Animation Duration: Set animation duration
Style
General
Background Type: Set the background style like solid color, image, and gradient.
Overlay: Enable the option to add an overlay effect to the image background
Border Type: Set the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Control the corner roundness of the border
Margin: Set the margin parameters.
Padding: Set the paddings.
X-Axis
Grid
Color: Set the color for the grid lines on the x-axis.
Width: Set the width for the grid.
Label
Color: Set the color for the label on the x-axis
Typography: Set typography parameters for the label text
Padding: Set padding around the text
Y-Axis
Grid
Color: Set the color for the grid lines on the y-axis.
Width: Set the width for the grid.
Label
Color: Set the color for the y-axis label.
Typography: Set typography parameters for the label text.
Padding: Set padding around the text.
Title
Color: Set the color for the title of the Chart.
Typography: Set the typography options for the Title text.
Padding: Set the padding values for the title.
Legend
Color: Set the color for the legend text.
Typography: Set the typography options for the legend text.
Padding: Set padding parameters for the legend.
Tooltip
Background Color: Set the background color to display the tooltip text on hover.
Border Color: Set the border color.
Border Width: Set border width.
Border Radius: Set border radius for the roundness of corners.
Arrow Size: Set the tooltip arrow size.
Title
Color: Set the color for the tooltip title.
Typography: Set the typography options for the tooltip title.
Alignment: Set the alignment of the tooltip title.
Bottom Margin: Set the bottom margin for the tooltip title.
Body
Color: Set the color for the tooltip body.
Typography: Set the typography options for the tooltip body.
Alignment: Set the alignment of the tooltip body.
Advanced List
“EAE Advanced List” is a powerful tool that enables you to organize your list in a more efficient and visually appealing manner. This feature allows you to customize individual list items with unique styles and designs, such as adding badges to certain items.
It offers various layout options to display your list, including horizontal and vertical orientation. You can also choose to use a grid view for a more structured and organized representation.
The “Advanced List” widget features the following controls:
Content
General
List
Content
Title: Enter the title for the list.
Description: Enter the description for the list item.
Show Badge: Toggle the badge as desired.
Badge Text: Enter the text for the badge.
Link: Enter the link for applying to the list.
Icon
Icon Type- Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop: Enable the loop option to display the animation continuously.
Reverse: Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Style(for individual item)
Custom Style: Toggle the Custom Style as desired.
Normal
Background Type: Choose either a Classic or a Gradient.
Classic
Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the item box.
Counter
Color: Choose the color for the counter.
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Title
Normal
Color: Choose the color for the Title.
Text Shadow: Apply a shadow to the title if desired.
Hover
Color: Choose the color for the Title hover.
Text Shadow: Apply a shadow to the title hover if desired.
Description
Normal
Color: Choose the color for the description.
Hover
Color: Choose the color for the description.
Badge
Normal
Color: Choose the color for the badge.
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the badge.
Icon
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding.
Rotate: Set the rotation of your Icon.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
List Direction: Choose either Vertical or Horizontal.
Counter: Activate the option to add a Counter to your list.
Grid View: Enable the Grid View option if desired.
Column: Specify the number of columns to display in a single row.
Settings
Title HTML Tag: Select the html tag for the title.
Link: Select on which you want to apply the link, “Icon” or “list.”
List Item Row Gap: Specify the gap between the list item rows(applicable if you enable Grid View).
Icon
Gap: Specify the gap between the icon and the list items.
Position: Select the position of the icon, either “right” or “left.”
Alignment: Select the alignment of the icon.
Badge
Position: Select the position of the badge, either “right” or “left.”
Alignment: Select the alignment of the badge.
Gap: Specify the gap between the badge and the list items.
Counter
Note: This option is only applicable if we enable Counter in the content section.
Type: Select the type of Counter.
Suffix: Select a suffix from the options of colon, dot, or bracket.
Position: Select either Vertical or Horizontal(applicable if List Direction is selected as Horizontal).
Alignment: Select the alignment of the Counter.
Gap: Specify the gap between the counter and the list items.
Style
General
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Box Shadow: Set the box shadow.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border.
Border Radius: Set the border’s radius using PX or %.
Padding: Set the padding using PX or %.
Margin: Set the margin using PX or %.
List Item
Normal
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Box Shadow: Set the box shadow.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the list item box.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border.
Border Radius: Set the border’s radius using PX or %.
Padding: Set the padding.
Margin: Set the margin using PX or %.
Counter
Box Height: Set the box height.
Box Width: Set the box width.
Typography: Set the typography for the counter.
Normal
Color: Specify the color for the counter.
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the counter.
Border Radius: Set the border’s radius using PX or %.
Padding: Set the padding.
Title
Normal
Color: Choose the color for the Title.
Text Shadow: Apply a shadow to the title if desired.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the title.
Typography: Set the typography for the title.
Description
Normal
Color: Choose the color for the description.
Text Shadow: Apply a shadow to the title if desired.
Typography: Set the typography for the description.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the description.
Margin: Set the margin for description.
Icon
Styling controls for the Normal and hover state are available under this section. Hover settings will be applied when Someone hovers the icon. Click here.
Badge
Typography: Set the typography for the badge.
Normal
Color: Set the color for the badge text.
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Box Shadow: Set the box shadow.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the badge.
Border Radius: Set the border’s radius using PX or %.
Padding: Set the padding.
Margin: Set the margin using PX or %.
Add To Calendar
The “EAEAdd To Calendar” widget is a convenient feature available on your website that enables your users to easily add an event to their preferred calendar platform, such as Google Calendar, ICS, Outlook, or Yahoo Calendar. Users can seamlessly integrate the event into their calendar without manual data entry by simply clicking on the button.
The “Add to Calendar” widget features the following controls:
Content
Calendar
Type: Select your preferred calendar type, such as Google Calendar, ICS(iCalendar), Yahoo, or Outlook.
Title: You can either enter the event title or choose a dynamic tag.
Address: Set the event location.
Date Field: Set the event date and time using either a Date Time Picker or a dynamic string.
Date Time Start: Set the start date and time of the event.
Date Time End: Set the end date and time of the event.
Description: Enter the event description.
Button
Text: Enter the text for the button or choose the dynamic tag.
Icon Type: Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop: Enable the loop option to display the animation continuously.
Reverse: Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Position: Choose the position of the Icon, either before or after the heading.
Alignment: Choose the alignment of the button, whether left, right, center, or justified.
Style
Button
Typography: Set the typography for the button.
Text Shadow: Apply a shadow to the heading if desired.
Normal
Text Color: Select the text color of a button.
Background Type: Choose either a Classic or a Gradient.
Classic
Color: Choose the color for the background.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the button.
Border Type: Select the type of border.
Width: Set the width of the border.
Color: Set the color of the border.
Border Radius: Set the border’s radius using PX,%, or EM.
Box Shadow: Set the box shadow.
Padding: Set the padding using PX,%, or EM.
Icon
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding.
Rotate: Set the rotation of your Icon.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Radial Charts
The “EAE – Radial Charts” is an effective widget for comparing datasets of information in a visual and organized manner. It offers three different types of charts: Pie chart, Doughnut chart, and Polarchart, each with its own unique advantages.
With the ability to display a legend, the chart becomes an even more powerful tool for streamlining comparison work and achieving a higher level of accuracy in data analysis.
Whether you’re looking to highlight similarities or differences between data sets, Radial Charts can provide a clear and concise overview that is easy to interpret and understand.
The “Radial Charts” widget features the following controls:
Content
General
Type: Choose from Pie, Doughnut, or Polar charts to present your data.
Datasets: Specify the number of datasets you wish to compare.
Dataset1
Label: Enter the label of the dataset or select the dynamic tag option.
Chart Data
Content
Label: Enter the label.
Value: Enter the value.
Style(Individual item)
Background Color: Select the background color.
Background Hover Color: Select the background hover color.
Border Color: Select the border color.
Border Hover Color: Select the border hover color.
Layout
Height: Specify the height of the chart.
Circular: Enable the circular mode if desired.
Circumference: Specify the circumference of the chart.
Rotation: Indicate the rotation for the chart.
Border Radius: Set the border radius.
Cutout: Specify the cutout value(Only for Doughnut Chart).
Normal
Offset: Set the offset.
Border Width: Set the border width.
Hover
Hover Border Width: Set the border hover width.
Hover Offset: Set the offset hover.
Animation
AnimationDuration: Enter animation duration.
Animation: Choose the animation style.
Animation Scale: Enable the option for animation scale.
Legend(It will get color from Dataset 1 only)
Enable Legend: Enable the legend if desired.
Shape: Specify the shape for the legend, either Square or Circle.
Position: Specify the position of the legend
Alignment: Set the alignment of the legend.
Reverse: To view the legend in reverse order, activate the corresponding option.
Tooltip
Enable Tooltips: Enable the option if desired.
Enable Ticks: To view the ticks, enable the corresponding option(Only for Polar Chart).
Show Percentage: Enable the option to show percentage value(Only for Polar Chart).
Enable Grid Line: To view the Grid line, activate the corresponding option(Only for Polar Chart).
Style
Legend
Box Height: Set the height of the box.
Box Width: Set the width of the box.
Font Size: Specify the font size.
Font Weight: Set the font weight.
Font Color: Select the color of the text.
Tooltip
Background Color: Select the background color for the tooltip.
Title
Font Size: Specify the font size.
Font Weight: Set the font weight.
Font Color: Select the color of the text.
Body
Font Size: Specify the font size.
Font Weight: Set the font weight.
Font Color: Select the color of the text.
Polar Area
Note: This is only applicable for Polar Chart.
Ticks
Color: Select the color of the ticks.
Background Color: Select the background color of the ticks.
Padding: Set the padding.
Font Size: Set the font size.
Grid Line
Grid Color: Specify the color of the grid line.
Image Accordion
The “EAE Image Accordion” is a powerful widget for displaying a large amount of information in a compact and visually appealing way. By collapsing text, images, and icons into a single widget, it effectively saves screen space without sacrificing the user’s ability to access and understand the content.
Its ability to display content in a condensed, collapsed format allows for efficient use of screen real estate while maintaining high visual appeal.
The “Image Accordion” widget features the following controls:
Content
Content
Skin: Select the skin type, either Transparent or Panel.
Item
Content
Image: Set the background image for the Image Accordion(In Transparent Skin, it will work as Overlay).
Title: Enter the title.
Title Tag: Select the tag for the title.
Description: Enter the description.
Description Tag: Select the tag for the description.
Button Text: Enter the text for button.
Link: Enter the URL that needs to be linked upon button.
Icon: Select from the Font Awesome icon library or upload an SVG image.
Icon Position: Set the position of the Icon either before or after the link text.
Active On Load: Enable the option to display this panel upon OnLoad.
Icon
Icon Type- Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop:Enable the loop option to display the animation continuously.
Reverse: Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape– Select either Circle or Square.
Style(for individual item)
Icon
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding.
Rotate: Set the rotation of your Icon.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Panel
Background Type: Please choose between a classic or gradient background type for the panel.
Classic
Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Image Size: Choose the size of the image, from thumbnail to full.
Position: Set the position of the background image.
Attachment: Choose either scroll or fixed.
Repeat: Specify the repeat pattern for the background image.
Display size: Choose between contain, cover, and auto options, or add custom values for the background display size.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Set the border radius for a panel.
Content
Horizontal Position: Set the horizontal position of the content.
Vertical Position: Set the Vertical position of the content.
Alignment: Set the alignment
Content Width: Specify the content width.
Background Type: As we mentioned above, Choose between a classic or gradient background type. Click here.
Padding: Set the padding.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Enter the border-radius.
Spacing: Specify the gap.
Title
Text Color: Choose the text color of the title.
Typography: Set the typography.
Text Shadow: Set the text shadow for the title.
Text Stroke: Set the text stroke.
Blend Mode: Select the blend mode.
Description
Text Color: Choose the text color of the description.
Typography: Set the typography.
Text Shadow: Set the text shadow for the description.
Button
Normal
Typography: Set the typography.
Text Color: Choose the text color of the Button.
Text Shadow: Set the text shadow for the Button.
Background Type: As we mentioned above, Choose between a classic or gradient background type for the button. Click here.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Set the border-radius.
Box Shadow: Set the box shadow.
Padding: Set the padding.
Button Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the button.
Image Size: Set the size of an image.
Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
Settings
Width: Set the width of Image accordion items.
Height: Set the height of Image accordion items.
Gap: Specify the gap between the accordion items(applicable when Panel is selected as Skin).
Trigger Action: Select trigger action either hover or click.
Stacked Device: Choose a stacked device, either a phone or tablet.
Show Counter: Enable the option if desired.
Counter Style: Specify the counter style.
Style
Panel
Background Type: As we mentioned above, Choose between a classic or gradient background type for the panel. Click here.
Padding: Set the padding.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Content Options
Horizontal Position: Set the horizontal position of the content.
Vertical Position: Set the Vertical position of the content.
Alignment: Set the alignment
Content Width: Specify the content width.
Background Type: Choose between a classic or gradient background type. Click here.
Padding: Set the padding.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Enter the border-radius.
Spacing: Specify the gap.
Title
Text Color: Choose the text color of the title.
Typography: Set the typography.
Text Shadow: Set the text shadow for the title.
Text Stroke: Set the text stroke.
Blend Mode: Select the blend mode.
Description
Alignment: Set the alignment of the description.
Text Color: Choose the text color of the description.
Typography: Set the typography.
Text Shadow: Set the text shadow for the description.
Button
Typography: Set the typography.
Text Shadow: Set the text shadow for the button
Normal
Text Color: Choose the text color of the Button.
Background Type: Choose between a classic or gradient background type for the button. Click here.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the button.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Box Shadow: Set the box shadow.
Padding: Set the padding.
Counter
Note: This is applicable when Show Counter is enabled in Setting section.
Top: Adjust the position of the counter from the top.
Left: Adjust the position of the counter from the top.
Normal
Color: Set the color of the counter text.
Typography: Set the typography.
Active/Hover
Color: Set the color of text for counter Active/Hover.
Icon
Styling controls for the hover and normal state are available under this section. Hover settings will be applied when Someone hovers the icon. Click here.
Team Member
The “EAE – Team Member” widget is a versatile tool that allows users to introduce information about their team members. It enables users to display vital information such as team member names, images, designations, and descriptions in an eye-catching and organized manner.
Additionally, it provides the flexibility of adding social media links to team members’ profiles, making it easy for visitors to connect with them. The widget also includes a button feature that directs users to the full profile of a team member if they want to learn more.
With various styles available, the Team Member widget allows users to showcase their team member profiles in a visually appealing way.
The “Team Member” widget features the following controls:
Content
General
Layout: Choose either Grid or Carousel.
Style Preset: Choose a style from the various options available.
Team Members: Use Add Item to add team members.
Content
Select Image: Select the team member image.
Image Size: Set the size of an image.
Name: Enter the team member’s name.
Name HTML Tag: Select the HTML tag for name.
Designation: Enter the designation of a team member.
Description: Enter the description.
Button
Text: Enter the button text.
Link: Enter the URL to link with a button.
Social
Note: Users can add up to five social media profiles.
Social Icon: Select social icon from Icon Library or upload SVG.
Social Icon Link: Enter the URL to link with social icon.
Preview Overlay Content: Toggle the option to preview overlay content during editing mode based on the selected style preset.
Grid
Note: These options are only applicable if you select Grid as Layout in the General Section.
Column Gap: Set the item’s column gap in px.
Row Gap: Set the item’s row gap in px.
Columns: Specify the number of columns displayed in each row.
Settings
Image
Height: Enter the height of image in px.
Width: Enter the width of image in px(applicable for Style 1 only).
Image Alignment: Choose from Start, Center, or End.
Image Position: Choose from Left, Up, or Right(applicable for Style 1 only).
Content
Alignment: Choose from Left, Center, or Right.
Gap: Enter the gap between the content.
Separator: Enable the option if needed.
Separator Type: Select the type of Separator.
Separator Size: Set the size of Separator.
Separator Width: Enter the width of Separator using px or %.
Social Icon
Size: Set the size of Social Icon.
Gap: Enter the gap between social icons using px, EM, or %.
Slider Options
Note: These options are only applicable if you select Carousel as Layout in the General Section.
Loop: Activate the option to enable slide looping.
Effects: Choose from Fade, Slide, Coverflow, or Flip.
Multirow: Enable the option if needed(applicable if the above Loop option is not enabled).
Note: These options are only applicable for Slide and Coverflow effects.
Slides Per View: Specify the number of slides to be displayed in a row.
Slides Per Group: Specify how many slides should move together when navigating through the slider.
Setting
Speed: Set the transition speed when moving one slide to next in ms.
Autoplay: Activate the option to enable autoplay while onload.
Duration: Set the duration for transition.
Space Between Slides: Set the space between slides.
Auto Height: Enable the option to set the auto height.
Pause On Hover: Enable the option to pause slides during hover.
Pagination
Pagination: Set the pagination type.
Clickable: Enable the option to make arrows clickable(only applicable for Bullets Pagination type).
Keyboard Control: Activate the option to enable keyword control.
Scroll bar: Enable the option to display the scroll bar.
Prev/Next Navigation
Enable: Activate the option to display the arrows.
Position: Choose either from Outside or Inside.
Icon Prev: Set previous icon either from the library or upload SVG.
Icon Next: Set Next icon either from the library or upload SVG.
Horizontal Position: Select from Left, Center, or Right.
Vertical Position: Select from Top, Middle, or Bottom.
Style
General
Normal
Box Shadow: Set box-shadow properties.
Border Type: Select the border type.
Width: Enter the width of border.
Color: Select the color for border.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the Item Box.
Border Radius: Set border-radius properties.
Padding: Set the padding.
Margin: Set the margin.
Image
CSS Filters: Set the CSS filters properties.
Hover CSS Filters: Set the filters for hover image.
Border Type: Select the border type.
Width: Enter the width of border.
Color: Select the color for border.
Margin: Set the margin.
Overlay
Hover Direction: Select the hover direction on overlay.
Size: Set the size.
Background Type: Select either Classic or Gradient.
Classic
Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Blend Mode: Select the blend mode.
Border Radius: Set border-radius.
Content
Name
Normal
Color: Select the color for name.
Typography: Set the typography.
Text Shadow: Set the text-shadow.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the item box.
Margin: Set the Margin.
Designation
Normal
Color: Select the color for name.
Typography: Set the typography.
Text Shadow: Set the text-shadow
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the item box.
Margin: Set the Margin.
Description
Normal
Color: Select the color for name.
Typography: Set the typography.
Text Shadow: Set the text-shadow.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the item box.
Margin: Set the Margin.
Content
Box Shadow: Set the box shadow.
Border Radius: Set border radius.
Padding: Set the padding.
Margin: Set the margin.
Social Icons
Normal
Icon Color: Select the color of social icons.
Background Color: Select the background color of icon.
Border Type: Select the border type.
Width: Set the width of border.
Color: Select the color of border.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the social icon.
Box Shadow: Set box-shadow properties.
Border Radius: Set border-radius properties.
Padding: Set the padding.
Margin: Set the margin.
Button
Alignment: Select button alignment from Left, Center, or Right.
Normal
Text Color: Select the text color of button.
Background Color: Select the background color of button.
Border Type: Select the border type.
Width: Enter the width of border.
Color: Select the color for border.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the button text.
Typography: Set the typography of button text.
Border Radius: Set border-radius properties.
Padding: Set the padding.
Margin: Set the margin.
Box
Background Type: As we mentioned above, Select either Classic or Gradient. Click here.
Border Type: Select the border type.
Width: Enter the width of border.
Color: Select the color for border.
Border Radius: Set border-radius properties.
Padding: Set the padding.
Margin: Set the margin.
Carousel
Note: These options are only applicable if you select Carousel as Layout in the General Section.
Prev/Next Navigation
Normal
Color: Select the color of navigation.
Background Color: Select the background color of navigation.
Border Type: Select the border type.
Width: Enter the width of border.
Color: Select the color for border.
Border Radius: Set the border radius.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the Navigation.
Arrow Size: Set the size of arrow.
Horizontal Offset: Set the horizontal offset.
Vertical Offset: Set the Vertical offset.
Padding: Set the padding.
Note: Only applicable when enabling Scroll bar Type in Slider Options section.
Scrollbar
Scrollbar Size: Set the size of scrollbar.
Scrollbar Drag Color: Select the color for scrollbar drag.
Scrollbar Color: Select the scrollbar color.
Note: Only applicable when selecting Pagination Type in Slider Options section, Section name and features vary based on the selected Pagination Type.
Fraction
Background Color: Select the background color of pagination.
Color: Select the color of pagination.
Typography: Set the typography.
Padding: Set the padding.
Bullet
Dot Size: Set the bullet dot size.
Top Offset: Set the offset from the Top.
Active Dot Color: Select the color for active state.
Inactive Dot Color: Select the color for inactive state.
Margin: Set the margin.
Progress Bar
Progress Bar Color: Select the color of progress bar.
Progress Color: Select the color of progress.
Progress Bar Size: Enter the size of progress bar.
Margin: Set the margin.
FAQ
The “EAE – FAQ” is a powerful widget; you can effortlessly create a comprehensive and visually appealing FAQ section for your website. This widget offers you the flexibility to customize each FAQ item to suit your needs perfectly.
Stand out from the crowd with our unique feature that allows you to showcase your content from various sources, such as Content Blocks, Elementor’s Saved Container and Saved Section, or even AE template(if Anywhere Elementor Pro is installed). This flexibility allows you to showcase your FAQs in the most effective and engaging way.
One of the key features of the widget is the ability to add multiple types of graphics, which can help to make your FAQs more engaging and visually appealing.
It provides you with three different layouts to choose from – Accordion, List, or Grid – so you can choose the style that best suits your needs and preferences.
Section: Select the specific section from which you wish to display your content.
Saved Container
Container: Select the container from which you wish to display your content.
AE Template
AE Templates: Select the AE template from which you wish to display your content.
Active as Default: Activate the option to display a particular item as active during onload.
Icon
Icon Type: Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source – Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop – Enable the loop option to display the animation continuously.
Reverse – Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Layout: Select from List, Grid, or Accordion.
Grid
Columns: Specify the number of columns to be displayed in each row.
Columns Gap: Set the gap between columns.
Row Gap: Set the gap between rows.
Accordion
First FAQ Default Open: Enable the option to display the first item in open state.
Row Gap: Set the gap between rows.
Question HTML Tag: Select the HTML tag for question.
Question Icon
Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
Icon Position: Select either before or after.
FAQ Schema: Enable the option to activate the FAQ schema.
Accordion
Note: This option is only applicable if the Layout is selected as Accordion.
Toggle: Enable the option to activate the toggle.
Trigger Action: Select from Click or Hover.
Transition Speed: Set the transition speed.
Navigation
Note: This option is only applicable if the Layout is selected as Accordion.
Alignment: Select the alignment for navigation icon.
Icon
Icon Type: Select either Icon or None.
Icon: Select the icon from icon library or upload an SVG.
View: Select either Stacked or framed.
Shape: Choose either square or circle.
Active Icon
Styling controls for the hover state are available under this section. These settings will be applied when the icon is in active state.
Style
Item
Background Color: Select the background color for item box.
Border Type: Select the border type.
Width: Set the width of border.
Color: Select the color of border.
Border Radius: Set the border radius.
Box Shadow: Set the box shadow properties.
Padding: Set the padding.
Margin: Set the margin.
Question
Note: When selecting the Accordion layout, you have some different options to apply styling on both Closed and Opened states of the accordion.
Alignment: Set the alignment of question.
Typography: Set the typography.
Text Stroke: Set the text stroke.
Text Shadow: Set the text shadow properties.
Blend Mode: Select the blend mode from the given options.
Color: Select the color of question when it is in closed state.
Background Type: Select either classic or gradient.
Border Type: Select the border type.
Width: Set the width of border.
Color: Select the color of border.
Border Radius: Set the border radius.
Box Shadow: Set the box shadow properties.
Padding: Set the padding.
Margin: Set the margin.
Icon
Normal
Primary Color: Select the primary color of icon.
Secondary Color: Select the secondary color of icon.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Opened
Styling controls for the opened state are available under this section. These settings will be applied when the icon is in open state.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon in degrees.
Spacing: Set the spacing.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX,%, EM, or REM.
Answer
Typography: Set the typography.
Text Shadow: Set the text shadow.
Color: Select the color of answer.
Background Color: Select the background color of answer.
Border Type: Select the border type.
Width: Set the width of border.
Color: Select the color of border.
Border Radius: Set the border radius.
Box Shadow: Set the box shadow.
Padding: Set the padding.
Margin: Set the margin.
Navigation
Note: This option is only applicable if the Layout is selected as Accordion
Icon: As we mentioned above, Set the navigation icon styling for Normal, Hover & Opened state. Click here.
Business Hours
The “EAE – Business Hours” widget is a useful tool for companies to manage and communicate their daily operating hours efficiently. It offers two layouts: Predefined and Custom.
When selecting predefined timing, you can utilize the live business indicator feature, which allows you to display personalized opening and closing messages and real-time updates on the businesses status, whether it is currently opened or closed.
Additionally, it showcase live timing, keeping your clients well-informed and up-to-date with your company’s schedule.
The Business Hours widget features the following controls:
Content
Content
Layout: Select from either predefined or custom. Predefined option have pre-set days, while the Custom option allows you to manage days according to your needs.
Days: Add the days using Add Item button(applicable for Custom Layout).
Content
Day: Enter the text of the Day.
Closed: Enable the option, if needed.
Closed Text: Enter the text.
No. of Slots: Enter the number of slots available.
Opening Time: Set the opening time.
Closing Time: Set the closing time.
Label: Enter the label, if any.
Icon
Icon Type: Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop: Enable the loop option to display the animation continuously.
Reverse: Activate the reverse option to display the animation in reverse order.
View: Select from default, stacked, or framed display options.
Shape: Select either Circle or Square shape for the stack or frame.
Style(for individual day)
Day
Color: Select the color.
Time
Color: Select the color for time slot.
Label
Color: Select the color for label.
Icon
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon in degrees.
Border Width: Set the border’s width.
Border Radius: Set the border’s radius.
Row
Background Type: Choose either a Classic or a Gradient.
Classic
Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Image Size: Choose the size of the image, from thumbnail to full.
Position: Set the position of the background image.
Attachment: Choose either scroll or fixed.
Repeat: Specify the repeat pattern for the background image.
Display size: Choose between contain, cover, and auto options, or add custom values for the background display size.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
Show Current Day Only: Enable the option to show only current day.
Highlight Current Day: Enable the option to highlight current day.
24 Hour Format: Enable the option to display time in the 24-hour format.
Separator: Specify the Separator for displaying between slot times.
Day Format: Choose either Long or Short.
Show Business Indicator: Enable the option if needed.
Indicators
Note: This option is applicable when Show Business Indicator option is enabled in Content Section.
Title: Enter the title for Business Indicator.
Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
Date: Enable the option if needed.
DateFormat: Select the date format from the list or enter a custom date.
Time: Enable the option if wanted.
Format: Select from either 12 hours or 24 hours.
Opening Warning Text: Enable the option to display open warning text.
Minutes: Specify, How many minutes before message will display.
Opening Warning Text: Enter the warning text.
Closing Warning Text: Enable the option to display closing warning text.
Minutes: Specify, How many minutes before message will display.
Closing Warning Text: Enter the warning text.
Label: Enable the option if desired.
Opening Text: Enter the text for opened label.
Closing Text: Enter the text for the closed label.
Style
Content
Day
Color: Select the color of day.
Typography: Set the typography.
Time
Color: Select the color of Time.
Typography: Set the typography.
Slot Label
Typography: Set the typography of label.
Text Color: Set the text color of label.
Background Type: As we mentioned above, Select either classic or gradient. Click here.
Gap: Set the label gap from time.
Padding: Set the padding.
Border Radius: Set border radius.
Icon
Open
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Closed
Styling controls for the closed row icon are available under this section. These settings will be applied when Someone closed any row.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon in degrees.
Border Width: Set the border’s width.
Border Radius: Set the border’s radius.
Box
Background Type: Select either from classic or gradient. Click here.
Padding: Set the padding.
Border Type: Set the border properties.
Width: Set the width of border.
Color: Select the color of border.
Border Radius: Set border radius properties.
Box Shadow: Set the box shadow.
Row Style
Row
Typography: Set the typography of row.
Text Color: Select the text color.
Background Type: Select either Classic or Gradient. Click here.
Alternate
Alternate Color: Select the color for alternate row.
Background Type: Select either Classic or Gradient.Click here.
Text Shadow: Set the text shadow.
Box Shadow:Set the box shadow on row.
Gap: Specify the gap between the rows.
Border Type: Set the border.
Padding: Set the padding.
Border Radius: Set the border radius.
Closed Style
Background Type: As we mentioned above, Select either classic or gradient. Click here.
Day: Select the color of closed day.
Text: Select the color of closed text.
Highlighted Day
Note: This option is applicable when Highlight Current Day Option is enabled in Content section.
Color: Select the color of highlight day.
Typography: Set the typography.
Background Type: As we mentioned above, Select either from classic or gradient. Click here.
Primary Color: Choose the primary color.
Secondary Color: Choose the secondary color.
Indicators
Note: This option is applicable when the Show Business Indicator option is enabled in Content Section.
Background Type: As we mentioned above, Select either classic or gradient. Click here.
Border Type: Select the border type.
Border Radius: Set the border radius.
Box Shadow: Set the box shadow properties.
Padding: Set the padding.
Spacing: Specify the spacing.
Title
Typography: Set the typography.
Text Shadow: Set the text shadow properties.
Text Color: Select the color of title.
Background Type: Select either from classic or gradient. Click here.
Alignment: Set the alignment of title.
Padding: Set the padding.
Icon Gap: Set the gap of icon from title.
Icon
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon in degrees.
Border Width: Set the border’s width.
Border Radius: Set the border’s radius.
Date
Note: This option is applicable if Date option is enable in Indicators section.
Typography: Set the typography of date.
Text Shadow: Set the text shadow.
Text Color: Select the text color of date.
Background Type: Select from classic or gradient. Click here.
Alignment: Select from Left, Center, or Right.
Padding: Set the padding.
Time
Note: This option is applicable if Time option is enabled in Indicators section.
Typography: Set the typography of date.
Text Shadow: Set the text shadow.
Text Color: Select the color of text.
Background Type: Select either from classic or gradient. Click here.
Alignment: Select from Left, Center, or Right.
Padding: Set the padding.
Label
Note: This option is applicable when Label option is enabled in Indicators section.
Position: Select either Fixed or Relative.
Top: Set the spacing from top(applicable if Fixed position is selected).
Right: Set the spacing from right(applicable if Fixed position is selected).
Typography: Set the typography of label.
Text Shadow: Set the text shadow.
Normal
Text Color: Select the color of text.
Background Type: Select either from classic or gradient. Click here.
Closed
Styling controls for the closed day label are available under this section. These settings will be applied when someone puts a label on closed day.
Padding: Set the padding.
Border Type: Select the border type.
Border Radius: Set the border radius.
Box Shadow: Set the box shadow properties.
Opening Warning Text
Note: This option is applicable when Opening Warning Text option is enabled in Indicators section.
Typography: Set the typography of date.
Text Shadow: Set the text shadow.
Text Color: Select the color of text.
Background Type: Select either from classic or gradient. Click here.
Alignment: Select from Left, Center, or Right.
Padding: Set the padding.
Closing Warning Text
Note: This option is applicable when Closing Warning Text option is enabled in Indicators section.
Typography: Set the typography of date.
Text Shadow: Set the text shadow.
Text Color: Select the color of text.
Background Type: Select either from classic or gradient. Click here.
Alignment: Select from Left, Center, or Right.
Padding: Set the padding.
Order
Choose the order of displaying individual elements, such as
Title
Date
Time
Opening Text
Closing Text
Note: If any of these elements have a lower priority than others, they can be placed first on the Business Indicator box. This feature gives you greater control over the visual hierarchy of your webpage.
Box
Background Type: Select either from classic or gradient. Click here.
Border Type: Select the border type.
Border Radius: Set border radius properties.
Box Shadow: Set the box shadow.
Overlay Color: Select the overlay color of box.
Padding: Set the padding.
Instagram Feed
The “EAE – Instagram Feed” is a dynamic widget that allows you to seamlessly integrate your Instagram photos, videos, and albums directly onto your website. With this widget, you can effortlessly showcase your captivating visual content to your visitors.
One of its standout features is the requirement of a unique token to identify individual Instagram IDs, ensuring a secure and personalized experience. It provides a variety of layout options, allowing you to choose the perfect presentation style for your feed.
Additionally, you have the ability to display customizable caption for each post, adding depth and context to your content.
The Instagram Feed widget features the following controls:
Content
Profile
Refresh Cache: Click the option to refresh the generated cache.
Token: Enter the token provided by us.
Post Count: Specify the desired number of posts you would like to be displayed.
Image: Enable the option to display posts that include images.
Video: Enable the option to display posts that include videos.
Album: Enable the option to show posts that include albums.
Profile Link: Enable the option to show your profile link.
Cache Timeout: Specify the time when you want to cache timeout.
Layout
Layout: Select the layout from options available.
Grid/Masonry
Columns: Specify the number of columns in each row.
Column Gap: Specify the gap between columns.
Row Gap: Specify the gap between rows.
Enable Image Ratio: Enable the option if needed.
Image Ratio: Enter the value for ratio.
Show Caption:
Caption Size: Specify the size for caption.
Caption Style: Select from Below, On Hover, or always.
Caption Overlay Full: Enable the option to show caption as overlay.
Enable Link: Enable the option if needed.
Lightbox: Activate the option If you would like to enable the lightbox feature.
Post Icon: Activate the option to display the post icon.
Profile Link
Note: This option is applicable if the Profile Link option is enabled under Profile section.
Position: Select either below or above.
Text: Enter the text for profile link.
Link: Specify the URL to link with profile.
Icon: Select the icon.
Icon Position: Choose either before or after.
Alignment: Select the alignment of icon.
Flex
Note: This option is applicable if Layout is selected as Flex.
Items
Direction: Select the flex direction for post.
Justify Content: Specify the justify content property.
Align Items: Specify the align items property.
Gap: Specify the gap between the posts.
Wrap: Select either wrap or No wrap.
Carousel
Note: This option is applicable if Layout is selected as Carousel.
Loop: Enable the option to display posts in loop.
Effects: Select the effect from the given options.
Multirow: Activate the option to display multiple rows (applicable when Loop is disabled).
Slide Per View: Specify the number of slides to display per view.
Slide Per Group: Specify the number of slides to display per group.
Setting
Speed: Set the speed.
Autoplay: Enable the option to play the carousel automatically.
Duration: Set the duration.
Space Between Slides: Specify the space between slides.
Auto Height: Enable the option if needed.
Pause On Hover: Activate the option to pause slides on hover.
Pagination
Pagination Type: Select the type of pagination from bullets, Progress Bar, and Fraction.
Clickable: Enable the option to make pagination clickable(applicable for Bullets Pagination type).
Keyboard Control: Activate the option to enable keyboard control on pagination.
Scroll Bar: Enable the option to display scroll bar.
Prev/Next Navigation
Enable: Enable the option if needed.
Position: Select either inside or outside.
Icon Prev: Select the icon for previous navigation.
Icon Next: Select the icon for Next navigation.
Horizontal Position: Select the horizontal position of navigation(applicable if navigation position is selected as inside).
Vertical Position: Select the horizontal position of navigation(applicable if navigation position is selected as inside).
LightBox
Note: This option is applicable if Lightbox is enabled in Layout Section.
Slide Show
Loop: Enable the option to display posts in loop upon the lightbox.
Speed: Set the speed.
Slide Delay: Specify the value to delay the slide.
Arrows: Enable the option to display arrows.
Full Screen: Activate the option to display lightbox in fullscreen.
Zoom: Enable the option to show lighbox in zoom mode upon page load.
Counter: Enable the option to display counter.
Download: Activate the option to enable download.
Media Overlap: Activate the option to enable the overlap.
Close On Tap: Enable the option to close the gallery while tap on black area.
Hide Bar Delay: Set the hide delay duration.
Video
Autoplay: Enable the option to autoplay the video on slide change.
Navigation
Enable Drag: Activate the option to enable dragging.
Enable Swipe: Activate the option to enable swipe(only for screen touch devices).
Keyboard: Activate the option to enable keyboard control.
Mouse Wheel: Activate the option to enable mouse wheel feature.
Esc: Enable the option to close the lightbox gallery by pressing Esc key.
Next HTML: Enter the HTML for navigation next icon.
Previous HTML: Enter the HTML for navigation previous icon.
Rotate
Speed: Set the speed of rotation.
Rotate Left: Activate the option to displayed in Lightbox.
Rotate Right: Activate the option to displayed in Lightbox.
Flip Horizontal: Activate the option to displayed in Lightbox.
Flip Vertical: Activate the option to displayed in Lightbox.
Thumbnail
Alignment: Select the alignment of thumbnail.
Toggle Thumb: Enable the option if needed(not applicable if Media Overlap is false).
Width: Set the width of thumbnail.
Height: Set the height of thumbnail.
Margin: Set the margin.
Hash URL
Note: Custom Slider Name will work as url if Hash Url plugin is installed.
Custom Slider Name: Enable the option to give unique name.
Gallery ID: Enter the unique id.
Share
Facebook
Facebook Text: Enter the text for facebook share option.
Twitter
Twitter Text: Enter the text for Twitter share option.
Pinterest
Pinterest Text: Enter the text for Pinterest share option.
Style
Profile Link
Note: This option is applicable if the Profile Link option is enabled under Profile section.
Typography: Set the typography.
Normal
Text Color: Select the text color of profile text.
Background Color: Select the background color of profile link.
Border Type: Select the border type.
Width: Enter the width of border.
Color: Enter the color of border.
Border Radius: Set the border radius.
Hover
Styling for hover state are available under this section. It will be applied when someone hovers the profile link button.
Padding: Set the padding.
Margin: Set the margin.
Icon
Spacing: Set the spacing between icon and text.
Images
Normal
Background Type: Select either classic or gradient.
GrayScale: Enable the option to display images in grayscale mode.
Border Type: Select the border type.
Width: Enter the width of border.
Color: Enter the color of border.
Hover
Styling for hover state are available under this section. It will be applied when someone hovers the image.
Border Radius: Set the border radius properties.
Box Shadow: Set the box shadow properties.
Padding: Set the padding.
Icon Color: Select the color for post icon(applicable if Post icon option is enabled).
Caption
Note: This option is applicable if Show Caption option is enabled in Layout Section.
Background Type: Select either classic or gradient.
Typography: Set the typography.
Color: Select the color of caption.
Horizontal Align: Select the horizontal alignment.
Padding: Set the padding.
Overlay
Entrance Animation: Select the animation from available options.
Animation Duration: Select the duration of animation.
Carousel
Note: This option is applicable if Layout is selected as Carousel.
Prev/Next Navigation
Normal
Color: Select the color of navigation.
Background Color: Select the background color of navigation.
Border Type: Select the border type.
Border Radius: Set the border radius.
Hover
Styling for hover state are available under this section. It will be applied when someone hovers the navigation.
Arrow Size: Set the size of arrow.
Arrow Gap: Set the gap between navigation icon and post.
Padding: Set the padding.
Scrollbar
Note: Only applicable when enabling Scroll bar Type in Slider Options section.
Scrollbar Size: Set the size of scrollbar.
Scrollbar Drag Color: Select the color for scrollbar drag.
Scrollbar Color: Select the scrollbar color.
Note: Only applicable when selecting Pagination Type in Carousel section. Section name and features vary based on the selected Pagination Type.
Fraction
Background Color: Select the background color of pagination.
Color: Select the color of pagination.
Typography: Set the typography.
Padding: Set the padding.
Dots
Dot Size: Set the bullet dot size.
Top Offset: Set the offset from the Top.
Active Dot Color: Select the color for active state.
Inactive Dot Color: Select the color for inactive state.
Margin: Set the margin.
Progress Bar
Progress Bar Color: Select the color of progress bar.
Progress Color: Select the color of progress.
Progress Bar Size: Enter the size of progress bar.
Margin: Set the margin.
Video Box
The “EAE – Video Box” widget is a powerful tool for displaying videos on your website. It supports five different video platforms: YouTube, Vimeo, Dailymotion, Wistia, and Self-Hosted, each with its own set of exclusive customization features. With this widget, you can add details about the video and choose whether or not to display the YouTube logo.
Additionally, you can use the mask image and overlay feature to add a custom design to the video player. It also offers advanced options, such as the ability to display sticky videos. In addition, you have full control over the video’s start and end time.
It includes video schema for all video types, improving SEO and helping search engines to understand the video’s content. With its versatile features, the Video Box widget makes it easy to showcase videos on your website in a professional and engaging way.
The “Video Box” widget features the following controls:
Content
Video
Video Type: Choose from Youtube, Vimeo, Dailymotion, Wistia, or Self-Hosted.
Youtube
Link: Enter the youtube video link.
Start time: Enter the video’s start time in seconds.
End Time: Enter the video’s end time in seconds.
Autoplay: Enable the option to autoplay the video while onload.
Related Videos From: Select either from Current Video Channel or Any Random Video.
Player Control: Enable the option to display player controls like play, pause, volume and more.
Modest Branding: Enable the option to disable the YouTube logo from displaying in the control bar.
Mute: Allow the option to mute the video.
Privacy Mode: Enabling this feature prevents YouTube from storing visitor information on your website until they play the video.
Vimeo
Link: Enter the video link.
Start time: Enter the start time of a video.
Autoplay: Enable the option to autoplay the video while onload.
Loop: Enable the option to play video continuously.
Mute: Allow the option to mute the video.
Intro Title: Display video’s Title.
Intro Portrait: Display author’s profile image.
Intro Byline: Display the video’s author’s name.
Controls Color: Select the color for video player controls.
Wistia
Link & Thumbnail Text: Enter the link & Thumbnail text from the respective wistia’s video.
Autoplay: Enable the option to autoplay the video while onload.
Mute: Allow the option to mute the video.
Loop: Enable the option to play video continuously.
Show Playbar: Enable the option to display the progress bar of the video.
Dailymotion
Link: Enter the link of video.
Start Time: Set the video’s start time.
Autoplay: Enable the option to autoplay the video while onload.
Mute: Allow the option to mute the video.
Player Control: Enable the option to display player controls like play, pause, volume and more.
Enable Sharing: Activate the option to display the share button.
Self Hosted
External URL: If you have an external URL of the video, you can enable this option.
URL: Insert an URL of the video
Choose File: If there is no external link of the video, you can upload the video.
Start time: Set the start time of video.
End Time: Set the end time of video.
Autoplay: Enable the option to autoplay the video while onload.
Loop: Enable the option to play video continuously.
Player Control: Enable the option to display player controls like play, pause, volume and more.
Mute: Allow the option to mute the video.
Download Button: Activate the option to enable video downloading(display if Lighbox option is disabled).
Video Options
Note: Autoplay will not work in Lightbox.
Aspect Ratio: Select the aspect ratio for video.
Lightbox: Enable the option to apply Lightbox settings.
FullScreen: Activate the option to display the lightbox in fullscreen.
Enable Share: Enable the option to display share button on lightbox.
Hash URL: Enable the option to give a unique id to lightbox.
Gallery ID: Enter the unique id for lightbox.
Video Details
Enable Video Details: Enable the option to show video details if needed.
Title: Enter the title of video.
Description: Enter the description of video.
Preview Video Details: Enable the option to display video details layout properly. It will work in editor mode only.
Mask
Enable Mask: Activate the option to enable the mask.
Mask Shape: Select the mask image.
Thumbnail & Overlay
Thumbnail Size: Select the size of thumbnail(Only for Youtube Video type).
Custom Thumbnail: Enable the option to set the thumbnail to the video.
Select Image: Select the image for thumbnail.
Image Size: Select the size of the Image.
Play Button
Icon Type: Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source – Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop – Enable the loop option to display the animation continuously.
Reverse – Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Sticky Video
Enable Sticky Video:
Preview Sticky Video: Enable the option to display preview details of sticky video.
Video Width: Enter the sticky video width in px.
Horizontal Position: Select from Left, Center, or Right.
Vertical Position: Select from Top, Middle, or Bottom.
Horizontal Offset: Enter the horizontal offset using px or %(Display when horizontal position is set to Left or Right).
Vertical Offset: Enter the vertical offset using px or %(Displaywhen vertical position is set to Top or Bottom).
Background Space: Set the background space to video.
Close Button
Enable: Display the close button on sticky video.
Video Details
Note: This option is only applicable if the Video Details option is enabled in Video Section.
Enable: Display the video details under sticky video.
VideoSchema
Schema Support: Enable the option to set schema for video.
Video Title: Enter the title of video.
Video Description: Enter the description of video.
Video Thumbnail: Select the thumbnail image for video schema(applicable if Custom Thumbnail option is not enabled in Thumbnail & Overlay section).
Video Upload Date & Time: Enter the upload date & time of video.
Style
General
Background: Select the background color of the box.
Spacing: Set the spacing between box to video.
Border Type: Select the border type.
Width: Set the width of border.
Color: Select the color of border.
Box Shadow: Set the box shadow properties.
Border Radius: Set the border radius.
Skew: Enter the value to skew(Max Value is 2).
Rotate: Enter the value to rotate.
Scale: Enter the value to scale(Max Value is 2).
Overlay
Background Type: Select either Classic or Gradient.
Classic
Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Mask
Note: This option is only applicable if the Mask option is enabled in Video Section.
Background Position: Select the background position of mask image.
Background Size: Select background size from Auto, Cover, or Contain.
Background Repeat: Select the background repeat property.
Info Bar
Note: This option is only applicable if the Video Details option is enabled in Video Section.
Title Color: Select the color of title.
Title Typography: Set the typography of title.
Description Color: Select the color of description.
Description Typography: Set the typography of description.
Background Color: Select the background color for info bar.
Padding: Set the padding.
Play Icon
Normal
Primary Color: Select the primary color of icon.
Secondary Color: Select the secondary color of icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon in degrees.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX,%, EM, or REM.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the play button.
Sticky Video
Note: This option is only applicable if the Sticky Video option is enabled under Sticky Video Section.
Background Color: Select the background color for sticky video.
Border Radius: Set the border radius.
Close Button Color: Select the color for close button.
Close Button BG Color: Select the background color of close button.
Info Bar
This option is only applicable if the Video Details option is enabled in Video and Sticky Video Sections.It toggles previously mentioned details pertaining to video details.
Color: Select the color of title.
Title Typography: Set the typography of title.
Color: Select the color of description.
Description Typography: Set the typography of description.
Background Color: Select the background color for info bar.
Padding: Set the padding.
How to Upgrade Frontend Product Editor License
You have the flexibility to upgrade your Frontend Product Editor license at any time you want. The upgrade charges will be calculated on a prorated basis, ensuring you are charged accurately for the remaining duration of your current license.
Navigate to the License option and select the plugin for which you wish to upgrade the license; you will find all the details associated with the selected plugin displayed in that section.
Next, Click on the “Upgrade To” dropdown.
After clicking on the dropdown menu, simply select the desired upgrade plan, and you will redirect to the Checkout page, where you can proceed to make the payment for the selected upgrade.
Once your payment is confirmed, your subscription will be upgraded accordingly.
How is the Proration Discount Calculated?
When users upgrade a plan that was initially purchased as a subscription, they will receive a proration discount. This discount is calculated based on the remaining unused portion of their previous plan.
After you’ve logged in, go to the “Downloads” section. There, you’ll see a plugin file you can add to your website. Click the “Download” button to start downloading.
Using a Plugin on Localhost or Development Site
We provide support for staging and local development websites. To ensure compatibility, your site URL should match one of the following patterns.
TLDs that are considered as dev or staging:
*.dev
*.dev.cc (DesktopServer)
*.test
*.local
*.staging
*.example
*.invalid
*.myftpupload.com (GoDaddy)
*.cloudwaysapps.com (Cloudways)
*.wpsandbox.pro (WPSandbox)
*.ngrok.io (tunneling)
Subdomains that are considered as dev or staging:
local.*
dev.*
test.*
stage.*
staging.*
stagingN.* (SiteGround; N is an unsigned int)
*.wpengine.com (WP Engine)
dev-*.pantheonsite.io (Pantheon)
test-*.pantheonsite.io (Pantheon)
staging-*.kinsta.com (Kinsta)
staging-*.kinsta.cloud (Kinsta)
*.mystagingwebsite.com' (Pressable)
Moreover, if your domain includes “localhost” (with any port), it will also be recognized as a local host domain.
If you wish to use a license on a dev site that doesn’t match the criteria listed above, you can deactivate the license from the Account page in your WordPress Admin dashboard. Once deactivated, you can then reuse the license for another site.
Migrating License From One Site to Another
To migrate the license of Order Feedback For WooCommerce from one site to the new one, follow the below steps.
Go to the “Website” section to see the list of websites where the license is currently being used.
Select the website for which you want to deactivate the license.
After you select the website, find the “Deactivate” option for that site. Click on it to remove the license from the selected site. Then, proceed to activate the license on your live website.
Upgrade Order Feedback For WooCommerce License
You can upgrade Order Feedback For WooCommerce license whenever you want. When you upgrade, the charges will be calculated on a prorated basis, so you’ll only pay for the time left on your current license, ensuring you are charged accurately.
To upgrade your Order Feedback For WooCommerce License, follow these steps:
Find the “License” option in the menu. Once you’re there, look for the plugin you want to upgrade. Click on it, and you’ll see all the details about that plugin right there on the screen.
Then, click on the “Upgrade To” dropdown.
Once you’ve clicked the dropdown menu, choose the upgrade plan you want. After that, you’ll be taken to the Checkout page. There, you can pay for the upgrade you selected.
Once your payment is confirmed, your subscription will be upgraded accordingly.
How is the Proration Discount Calculated?
When users upgrade a plan that was initially purchased as a subscription, they will receive a proration discount. This discount is calculated based on the remaining unused portion of their previous plan.
Once you purchase the Order Feedback For WooCommerce plugin, you’ll get an email confirming your purchase sent to the email address associated with your account. This email is important because it proves you bought the plugin and contains important details.
It has all the key details you need, like your Username and Password, a license key, and a temporary download link for plugin installation files. Plus, you can easily manage details like downloads, checking your license key, and managing which websites you’re using the plugin on through our website.
To access your account on our website, use the login details sent to you in the confirmation email.
Once you’ve logged in, you’ll navigate to the Dashboard and then click on the “Downloads” button.
When you go to the Downloads section, a window will pop up. It lets you easily copy the license key for the product and download the zip file straight from there.
After downloading the zip file, go to your WordPress website dashboard. Then, navigate to Plugins ➝ Add New ➝ Upload Plugin, and upload the file you downloaded from the store.
After you’ve uploaded the plugin, it will ask you for the license key. Just enter the license key and click to activate it.
Order Feedback For WooCommerce Settings Page
The settings page lets you control many advanced options for the Order Feedback For WooCommerce. You can change settings to make it work just how you want it to.
When you install & activate order feedback for WooCommerce pro plugin on your website, a new menu, Order Feedback, will be displayed in the WordPress menu bar. To access the Order Feedback For WooCommerce Settings page, follow the steps below:
Navigate to Order Feedback ➝ Settings.
There, you can find three sections, General, Appearance, and Email, to manage the settings of Order Feedback For WooCommerce effectively.
General
Show Feedback Form: Select the option to display the feedback form on the Thank You page, Order details page, both pages or none.
Form Type: Select the form type from Floating, Embedded, or Popup (coming soon).
When you select Embedded as a form type, it will ask for some details
Embed Position(Thankyou Page): Select the position to display the feedback form on thank you page.
Embed Position(Order Details): Select the position to display the feedback form on the order details page.
Enter Hook Name: Enter the hook name where you want to display the feedback form on the website.
Priority: Set the priority for displaying the form on webpage.
Manage Form: Manage the form fields.
Visible: Enable the option to display the particular field on feedback form.
Label: Enter the label.
Placeholder: Enter the placeholder text for a particular field.
Required: You can make any field a required field in the form.
Rating Style: Choose rating styles from Number, Stars, or Smiley(applicable for Rating Form Field).
Rating Scale: Choose a rating scale from 5 or 10(applicable for number rating style)
Labels & Messages
Form Title: Enter the form title.
Form Description: Enter the description to display in form.
Submit Button Text: Enter the text for submit button.
Success Message: Specify the message that shows when the user submits the form.
Error Message: Specify the message that shows when there is some issue with form.
Appearance
Form Style
Enable Custom Style: Activate the option to enable the custom styling for form.
Container
Background Color: Select the background color of box.
Border: Set the border.
Width: Specify the width of box.
Margin: Set the margin.
Padding: Set the padding.
Heading/Top Bar
Typography: Set the typography.
Color: Select the heading color of top bar.
Background Color: Select the background color of top bar.
Border: Set the border.
Margin: Set the margin.
Padding: Set the padding.
Icon Color: Select the icon color of top bar.
Align: Select text alignment from left, right, or center.
Label
Typography: Set the typography.
Color: Select the label color.
Input
Input Typography: Set the input text typography.
Color: Select the color of text.
Background Color: Select the background color of input area.
Button
Typography: Set the typography of button.
Color: Select the button’s text color.
Border: Set the border.
Background Color: Select the background color of button.
Hover Color: Choose the text color of button when hover.
Hover Background Color: Select the background color of button when hover.
Hover Border Color: Select the border color when hover.
Align: Choose alignment from left, right, center, or full width.
Messages
Info Message
Typography: Set the typography of form description.
Color: Choose the color of form description.
Success Message
Typography: Set the typography of success message.
Color: Select the color of success message.
Error Message
Typography: Set the typography of error message.
Color: Select the color of error message.
Email
Emails
Enable Customer Email: Enable the option to email customers after they fill out the feedback form.
Customer Email Subject: Enter the customer email subject.
Customer Email Message: Enter the email content to send to customers.
Enable Admin Email: Enable the option to email store owners after customers fill out the feedback form.
Admin Email Subject: Enter the admin email subject.
Admin Email Message: Specify the email content to send to store owners.
Check out a detailed article on How you can use Order Feedback For WooCommerce in your online store.
View All Customer Feedback in WooCommerce
The Order Feedback For WooCommerce page lets you view all the feedback from your customers. When you install and activate the Order Feedback for WooCommerce Pro plugin on your website, a new menu called “Order Feedback” will appear in the WordPress menu bar.
Navigate to WordPress Dashboard Menubar ➝ Order Feedback ➝ Order Feedback.
Here, you can see all the feedback customers leave on your website about their shopping experience.
You can also sort the feedback by various criteria. For example, you can filter it based on the rating value given by the customers, the specific order ID associated with the feedback, the date range within which the feedback was received, or the style in which the rating was provided.
Filter Based on Rating Value & Date Range
Filter Based on Order ID
Filter Based on Rating Style
View Your Feedback
To read what customers wrote in their feedback, click the “View” button. This will open a popup window displaying the detailed feedback.
After you’ve logged in, go to the “Downloads” section. There, you’ll see a plugin file you can add to your website. Click the “Download” button to start downloading.
Using a Plugin on Localhost or Development Site
We provide support for staging and local development websites. To ensure compatibility, your site URL should match one of the following patterns.
TLDs that are considered as dev or staging:
*.dev
*.dev.cc (DesktopServer)
*.test
*.local
*.staging
*.example
*.invalid
*.myftpupload.com (GoDaddy)
*.cloudwaysapps.com (Cloudways)
*.wpsandbox.pro (WPSandbox)
*.ngrok.io (tunneling)
Subdomains that are considered as dev or staging:
local.*
dev.*
test.*
stage.*
staging.*
stagingN.* (SiteGround; N is an unsigned int)
*.wpengine.com (WP Engine)
dev-*.pantheonsite.io (Pantheon)
test-*.pantheonsite.io (Pantheon)
staging-*.kinsta.com (Kinsta)
staging-*.kinsta.cloud (Kinsta)
*.mystagingwebsite.com' (Pressable)
Moreover, if your domain includes “localhost” (with any port), it will also be recognized as a local host domain.
If you wish to use a license on a dev site that doesn’t match the criteria listed above, you can deactivate the license from the Account page in your WordPress Admin dashboard. Once deactivated, you can then reuse the license for another site.
Content Ticker
EAE-Content Ticker is an attractive option to viewyour trending news feeds and trending posts with amazing animation effects.
Content
Heading Icon: Set the icon for the heading of the content ticker.
Icon Position: Set the position either before or after the icon.
Enable arrow: Enable next and previous arrows.
Stack on mobile: Enable it to stack the content ticker on mobile.
Content List
Text: Set the content of the content ticker.
Link: Set the link of the content ticker.
Speed: Set the speed of the slider in milliseconds.
Show Autoplay: Enable/Disable to show or hide.
Direction: Set the direction of the slider vertically or horizontally.
Loop: Enable/Disable to give loop effect.
Keyboard Control: Enable/Disable to show or hide.
Transition Effect: Choose the transition from the following effects.
Navigation: Enable navigation to navigate on either slide.
Prev Icon: Choose an icon from the options.
Next Icon: Choose an icon from the options.
Navigation position: Enable navigation to set position.
Top: Set the position from the top for the icon.
Right: Set the position from the right for the icon.
Style
Heading
Typography: Set the typography of the heading.
Icon Size: Set the size of the icon.
Rotate: Rotate the navigation in degrees.
Icon Color: Set the color of the icon.
Text Color: Set the color of the text.
Color: Set the color of the heading.
Background Type: Choose the background type of the heading.
Border radius: Set the border radius of the heading.
Slider
Typography: Set the typography of the slider on normal and hover state.
Text Color: Set the color of the text.
Background Type: Choose the background type of the heading.
Navigation
Icon Size: Set the size of the icon.
Icon Gap: Increase or decrease the icon gap.
Icon Color: Set the color of the icon.
Background Type: Set the background for the navigation.
Color: Set the color for the navigation.
Padding: Set the padding of the navigation.
Border radius: Set the border radius of navigation.
Rotate: Rotate the navigation in degrees.
Box
Border radius: Set the border radius of the box.
Border Type: Choose from the following options available.
Box Shadow: Set the box-shadow of box.
How to Edit External & Affiliate Products on Frontend
External or Affiliate Products in WooCommerce are used to redirect your user to external websites or platforms. Instead of purchasing the product directly from your website, customers are redirected to another website/platform to complete the purchase. This allows you to promote and earn a commission from affiliate products or showcase products from other sellers. These types of products can be edited using the pro version of our Frontend Product Editor plugin.
Once you click on the edit button, you will have access to a set of settings that allow you to edit the product details. Here, you will learn about How to Edit Products On Frontend?
General
Product Name: Enter the name of a product.
Description: Set the description for a product.
Short Description: Enter the short description of a product.
Catalog Visibility: Select the catalog visibility from the available options.
Is Featured: Enable the option if needed.
Categories: Select the categories for a product.
Tags: Add the tags for a product, if any.
Product Image: Add an image of a product.
Product Gallery: Add a gallery of product images, if needed.
Product URL: Enter the link from where users can purchase a product.
Buy Text: Change the Add To Cart button text to your preferred text.
Price
Regular Price: Set the price of a product.
Sale Price: Enter the sale price.
Schedule Sale: Enable the option if you wish to allow the sale of a product.
Inventory
SKU: Enter the unique SKU for that product.
Linked Products
Upsell Products: These products in WooCommerce are displayed on the product details page as recommendations for users to consider as upgrades to the product they are currently viewing. For example, if a user is browsing the WordPress Pennant, you can display the album on that same page as an up-sell.
Please check our detailed article on Upsell & Cross-sell. It will provide you with a deeper understanding of these techniques and how they can be effectively implemented in your business.
Attributes
To add custom attributes, you can click on the “Add Attribute” option, which will be displayed in the Additional Information section of the product. You can also hide the attribute on the frontend by keeping the “Visible on Product Page” option disabled.
Migrate License from One Site to Another
To migrate license of Frontend Product Editor from the old site to the new one, follow the steps below:
Go to plugins and search for Elementor Addon Elements or click on this link: https://wordpress.org/plugins/addon-elements-for-elementor-page-builder/ and click Download.
In the WordPress dashboard, click Plugins → Add New.
Now click on the upload plugin option, xa dialog box will open. Here choose the zip file you have downloaded from the site,
Click on install now and activate the plugin.
How to Enable / Disable Modules
Elementor Addon Elements allows you to enable/disable modules as per your choice. This feature allows you to disable widgets not used on your website.
Thus this will help you in managing the page builder interface and will also reduce the server load.
Navigate to the WordPress Dashboard>> Elementor Addon Elements.
Under the Modules tab, Deactivate or Activate the widgets individually.
You can use Bulk Action option to apply the action on all elements.
Widgets
Content Ticker
EAE-Content Ticker is an attractive option to viewyour trending news feeds and trending posts with amazing animation effects.
Content
Heading Icon: Set the icon for the heading of the content ticker.
Icon Position: Set the position either before or after the icon.
Enable arrow: Enable next and previous arrows.
Stack on mobile: Enable it to stack the content ticker on mobile.
Content List
Text: Set the content of the content ticker.
Link: Set the link of the content ticker.
Speed: Set the speed of the slider in milliseconds.
Show Autoplay: Enable/Disable to show or hide.
Direction: Set the direction of the slider vertically or horizontally.
Loop: Enable/Disable to give loop effect.
Keyboard Control: Enable/Disable to show or hide.
Transition Effect: Choose the transition from the following effects.
Navigation: Enable navigation to navigate on either slide.
Prev Icon: Choose an icon from the options.
Next Icon: Choose an icon from the options.
Navigation position: Enable navigation to set position.
Top: Set the position from the top for the icon.
Right: Set the position from the right for the icon.
Style
Heading
Typography: Set the typography of the heading.
Icon Size: Set the size of the icon.
Rotate: Rotate the navigation in degrees.
Icon Color: Set the color of the icon.
Text Color: Set the color of the text.
Color: Set the color of the heading.
Background Type: Choose the background type of the heading.
Border radius: Set the border radius of the heading.
Slider
Typography: Set the typography of the slider on normal and hover state.
Text Color: Set the color of the text.
Background Type: Choose the background type of the heading.
Navigation
Icon Size: Set the size of the icon.
Icon Gap: Increase or decrease the icon gap.
Icon Color: Set the color of the icon.
Background Type: Set the background for the navigation.
Color: Set the color for the navigation.
Padding: Set the padding of the navigation.
Border radius: Set the border radius of navigation.
Rotate: Rotate the navigation in degrees.
Box
Border radius: Set the border radius of the box.
Border Type: Choose from the following options available.
Box Shadow: Set the box-shadow of box.
Comparison Table
EAE-comparison Table is an effective way to display your product features. This widget makes it easy for the customers to compare various products and thus make decisions.
Content
General
Plan: Enter the number of Product tables you want to display.
Feature box
Heading: Enter the title for the feature box content.
Enable Tooltip: Enable or disable the tooltip.
Type: Select the tooltip type like Link or the Icon.
Features: Enter the list of all the features you are offering. Click on the Add Item button to add another item to the list.
Plan
Title: Enter the title of the specific price plan
Currency: Give a custom currency symbol.
Price: Set the pricing of your product.
Offering Discount: Enable it if you want to display the discounted price.
Duration: Enter the period for each payment that appears under the price.
Ribbon: Enable or disable the corner ribbon.
Ribbon Text: Enter the text to be displayed on the ribbon
Position: Display the ribbon on the Top, Left, and Right of the table
Button text: Write the text that will appear for the button
Link: Enter the URL for the item’s link. Click the setting icon to either add nofollow to the link or to open the link in a new window
Feature: Add a list of all the features you offer for the particular product.
Override Styles: Enable this option to style a particular plan. It contains option for styling(Heading, Price, Features, Button).
Button
Heading: Assign a title to the Call to Action row.
Settings
Hide Title Row: Enable to hide titles of the plans.
Hide Bottom Row: Enable to hide the bottom row of the plan.
Hide Price Row: Enable to hide the price row for plans.
Style
General
Odd Row Color: Choose a background color for the odd row.
Even Row Color: Choose a background color for the even row.
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Width: Set the thickness of the border.
Color: Select the border color.
Feature box
Color: Set the color for the feature box text.
Primary Background Color: Choose a primary background color.
Secondary Row Color: Choose Secondary Color.
Typography: Set the typography options for the feature box text.
Alignment: Align the text to the right, left, or center.
Tooltip Icon
Size: Set the size of the tooltip icon.
Color: Set the color for the Tooltip icon.
Background Color: Choose a background color for the tooltip icon.
Hover Color: Set the color for the Tooltip icon.
Hover Background Color: Choose a background color for the tooltip on hover.
Tooltip Text
Size: Set the size of the tooltip text.
Color: Set the color for the Tooltip text.
Background Color: Choose a background color for the tooltip.
Hover Color: Set the color for the Tooltip text.
Hover Background Color: Choose a background color for the tooltip on hover.
Ribbon
Distance: Control the distance between the ribbon and the corner
Color: Set the color for the Ribbon.
Background Color: Choose the background color of the ribbon
Typography: Set the typography options for the ribbon’s text
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved
Heading
Tab Format: choose from the list of Formats available.
Active Tab Color: Set the background color for the active heading tab.
Color: Set the heading text color.
Active Tab Text Color: Set the text color for the active heading.
Background Color: Choose the background color of the header row.
Height: Adjust the height of the header row.
Typography: Set the typography options for the heading text.
Alignment: Align the heading to the right, left, or center.
Price
Original Price
Color: Choose the color of the price.
Text decorationColor: Choose the text decoration color of the price.
Typography: Set the typography options for the pricing area.
Currency
Color: Set the color of the currency symbol.
Typography: Set the typography options for the currency.
Vertical Alignment: Set the currency symbol to display at the price’s top, middle, or bottom.
Price
Color: Choose the color of the price.
Typography: Set the typography options for the pricing area.
Fractional
Color: Choose the color of the fractional part.
Typography: Set the typography options for the fractional part.
Duration
Color: Choose the color of the duration text.
Typography: Set the typography options for the duration text.
Background Color: Choose a background color for the pricing area.
Alignment: Set the alignment of the duration.
Features
Color: Choose the color of the features list text.
Check Icon Color: Choose the icon color.
Close Icon Color: Choose the close icon color.
Typography: Set the typography options for the features list text.
Alignment: Align the list to the right, left, or center.
Padding: Customize the padding of the features list.
Button
Text Color: Choose the color of the button’s text.
Background Color: Choose the background color of the button.
Column Background Color: Select the background color for the button row.
Typography: Set the typography options for the button’s text.
Text shadow: Set the text-shadow of the button.
Box shadow: Set the Box shadow of the button.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius of the button to control corner roundness.
Content Switcher
The EAE-Content Switcher widget allows you to switch between multiple content options in one place. You can also use Elementor templates, AE – Templates, and sections inside the content section.
Content
Skins
Skin: Select the layout from the preset layout skins.
Content
Title: Give a suitable title for each list item
Type: Select existing Elementor templates and Sections, AE – Templates, or add your content directly in the Richtext editor. In the editor, you can edit the text visually and add images from the Media Library.
Icon: Set an icon for each item in the switcher
Icon Position: Adjust the position of the icon like left or right
Active: Toggle the switch to set the content active on load.
Display Settings
Switch Alignment: Set the alignment for the switcher button, and select from left, right, or center.
Space: Set the space between the switcher and the content section.
Animation Speed: Set the animation duration in milliseconds.
Style
Switch
Typography: Set the typography options for the text inside the switch button
Color: Choose the background color of the switcher for Normal and Active States
Icon Color: Set the icon color
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
Border-radius: Set the border radius of a switch.
Box-shadow: Set the box shadow of the switch.
Icon Spacing: Adjust the space between the icon and the text.
Box Style
Box Color: Set the Box color.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Border-radius: Set the border radius of a switch.
Section Padding: Set the padding parameters for the switcher container section.
Background Color: Set the background color for the container.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius around the container to control corner roundness.
content
Padding: Set the padding for the content
Background Color: Choose the background color of the content section
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
Width: Set the width of the border around the content section
Color: Choose a color for the border
Border Radius: Set the radius of the border to control corner roundness
After/Before Image
The image comparison widget gives you the ability to compare two images simultaneously. Use the slider on the page to customize the image, which can hide and reveal one image. You can also set horizontal and vertical orientation.
Content
Compare Style: Set the comparison style as horizontal and vertical.
Slider Position: Adjust the divider position.
Icon: Select an icon for the divider.
Before Image: Select or upload an image via the media library.
Image Size: Select from the following image sizes, like Thumbnail, medium, large, etc.
After Image: Select or upload an image via the media library.
Image Size: Select from the following image sizes, like Thumbnail, Medium, Large, etc.
Before Text: Add label text for the Before image.
After Text: Add label text for the After image.
Style
General
Icon Size: Adjust the icon size.
Icon Color: Choose a primary color for the icon.
Slider Color: Choose the secondary color for the slider icon.
Separator Color: Select a color for the separator.
Separator Alignment: Set alignment for the separator.
Separator Width: Adjust the separator width.
Label
Position: Select a position to display the image label, like the Top or Botton position.
Typography: Set the typography options for the label text.
Color: Set the text color for the image label.
Background Color: Select the background color for the label.
Border type: Choose the type of border you need for the element.
Border radius: Set the border radius to make the label angles more smooth and round.
Padding Set the preferable custom padding for the label text.
Timeline
Create an attractive Vertical Layout to showcase your blog posts in a tiled manner using the EAE – Timeline Widget. The timeline widget can display the post’s content or custom events.
Content
Skin: Select from the different layout styles of the cards to display the Content in Timeline.
Source: Select from Custom or Post. Custom lets you manually enter data of specific events. At the same time, Post allows picking content dynamically from the blogs and custom post types.
Custom Timeline
When selecting the Custom option in Source.
Items: Add the items individually here.
Date: Add information about the date or the timing of the event.
Link: Set the URL for the button’s link. Set the link to either open in a new window or to add nofollow to the link.
Title: Give a suitable title to be displayed on the Card
Icon: Set an icon for each card in the timeline.
Type: Select the icon type like Custom Icon, Font Awesome icon, or text- select if you want to use the icon or the text to point as an icon for the Timeline card.
Content: Provide more information about the event card in the timeline.
Post Timeline
When selecting the Post option in Source, you get two more options Query and Post Element.
Query
Source: Select from where the content will be retrieved and displayed. Options include Post, page, or Custom Post Types.
Category Filter
Filter Mode: Include and exclude Categories accordingly.
Categories: Select the name of the Category to be included or excluded. Multiple categories can be selected.
Tag Filters
Filter Mode: Include and exclude Tags accordingly.
Tags: Select the name of the tags to be included or excluded.
Format Filter
Filter Mode: Enable to apply format filters.
Order & Limit:
Order By: Set the order in which the posts will be displayed. Options include Date, Title, Menu Order, or Random.
Order: DESC (descending) or ASC (ascending).
Offest: Use this setting to skip over posts.
PostCount: Sets the exact amount of posts displayed.
Post Element
Show Title: Enable to display of the title of posts in the Timeline cards Html Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or p.
Enable Link: Enable it to make the card clickable.
Open in New Tab: Choose Yes to open posts in a new tab.
Date
Show Date: Displays the post-publishing date.
Date Format: Select the format to display the date.
Featured Image
Show Image:: Enable to display of the post’s feature image in the timeline.
Excerpt
Excerpt: Choose to show or hide the excerpt.
Excerpt Length: Choose the length of the excerpt, setting the exact amount of words displayed.
Call To Action
Call To Action: Show or hide the Read More button.
Text: Customize the Read More text.
Give a default icon to all the timeline cards.
Type: Choose the icon type like FontAwesome icon, image, or text to display.
Icon: Select an icon from the FontAwesome library.
View: Choose the default icon view, or select Stacked or Framed.
Shape: If Stacked or Framed is chosen, choose Circle or Square.
Style
Layout
Alignment: Arrange the cards to the left, center, and right alignment types.
Responsive Style: Make the Timeline layout responsive for Mobile and Tablet.
Responsive Orientation: Set the Alignment for the responsive style like Left or Right.
Horizontal Spacing: Set the horizontal spacing of the cards.
Vertical Spacing: Set the vertical spacing of the cards.
Card
Alignment: Align the content inside the card to the Left, Center, and Right
Padding: Set the padding of the card’s content
Alignment: Align the image inside the card to Left, Center, and Right.
Alternate Style: Enable it to display the cards in the alternate style
Size: Set the size of the image
Spacing: Adjust the space between the content block and the image.
Radius: Set the roundness of the edges of the images
Arrow Alignment: Define the alignment of the card arrows.
..Title Color: Specify the color of the title for Normal, Hover, and Active States
Content color: Choose the color for Normal, Hover, and Active States.
Title Typography: Set the typography options for the Title.
Content Typography: Set the typography options for the Content.
Title Shadow: Add a shadow and blur to the title text.
Content Shadow: Add a shadow and blur to the content.
Background Color: Choose the background color of the timeline card. Normal, Hover, and Active States.
.Border Radius: Set the roundness of the border corners of the timeline cards
BoxShadow: Set the box-shadow options around the cards.
Call To Action
Text Color: Choose the Text color for Normal, Hover, and focused States.
Background Type: Set the background type for the call to action.
Border Type: Set the Border type for the call to action.
Border Radius: Set the roundness of the call to action border corners.
Typography: Set the typography options for the call to action.
Date
Padding: Set the padding of the Date text.
Margin: Set the margin.
Color: Specify the date color.
Text Shadow: Add a shadow and blur to the Date text.
Typography: Set the typography options for the Date.
Connector
Color: Customize the color to apply for the connector.
Progress Color: Set the preferable color to be shown when the progress moves on.
Thickness: Specify the width of the timeline line.
Icon
Primary Color: Choose the primary color of the icon.
Secondary Color: Choose the secondary color of the icon.
Icon Size: Set the size of the icon.
Padding: Set the amount of padding around the icon.
Rotate: Select the number of degrees to rotate the icon from 0 to 360.
Border Style: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Border Width: Set the width of the icon border.
Border Radius: Set the radius of the icon border to control corner roundness.
Animated Text
EAE – Animated Text widget helps you to add animated words and phrases to your website’s pages. You can add plain text to complement the animated text and customize them.
Content
General
Alignment: Specify the alignment of the text like left, center, and right.
PreText: Here, you can add the text before the animated text.
Animated Text list: Click on the button to add animated text. In the Text field, enters the text that you want to animate. You can add several items of animated text. Items will be replaced one after the other in loops.
Post Text: In this field, you must add the text after the animated text. You can also leave the field empty if you don’t want to continue animated text with plain text.
Style
Pre Text
Pre-Text Color: Choose the color of the pretext.
Typography: Set the typography options for the pretext.
Animated text element
Typography: Set the typography options for the animated text.
Animated Text Color: Choose the color of the animated text.
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius of the text.
Padding: Set the padding for the animated text.
Margin: Set the margin for the animated text.
Background Type: Choose whether you want to use a classic or gradient background.
Cursor Control
Color: Choose the color of the cursor.
Width: Set the cursor width for the animated text Post Text.
Post-Text Color: Choose the color of the post-text element.
Typography: Set the typography options for the post-text element.
Post-Text
Typography: Set the typography options for the Post-text.
Post Text Color: Set the post text color.
Dual Button
The EAE – Dual Button widget adds two attractive and flexible buttons to your web page. These buttons will make your website web page more interactive and trendy.
Content
Layout: Set Horizontal and Vertical layouts of the buttons.
Alignment: Align the button to the left, center, right, or justified with its column.
Text: Enter the button’s text.
Link: Set the URL for the button’s link. Set the link to either open in a new window or to add nofollow to the link.
Icon: Select a FontAwesome icon to display on the button.
Icon Position: Set the icon before or after the button text.
Spacing: Adjust the space between the icon and the button text.
Text: Give the connector icon text.
Icon: Choose an icon for the separator.
General
Animation: Click on the Hover tab to set a Hover Animation.
Padding: Change the padding settings of the button.
Box Shadow: Set options to apply a box shadow on the button.
Button
Typography: Change the default typography options for the button’s text.
Text Color: Select the color of the button’s text.
Icon Color: Choose a color for the icon.
Background Type: Select the button’s color for Normal and Hover states.
Border Type: Select the type of border to use around the button.
Width: Control the thickness of the border around the button.
Color: Choose the border’s color.
Border Radius: Set the border radius to control corner roundness.
Padding: Change the padding settings of the first button.
Separator
Size: Set the size of the separator icon.
Typography: Set the typography options for the separator text.
Color: Choose a color for the separator icon and text.
Background Color: Choose the background color of the separator.
Border Radius: Set the border radius to control corner roundness.
Box Shadow: Set options to apply a box shadow on the button.
Modal Popup
EAE – Modal Popup widget allows you to create small popup windows displayed on performing a certain action. Through this, you can get more content from Custom Fields and Post Archives without navigating from one page to another.
Content
Content
Content-Type: Choose the type of content you want to display in the popup window, like Custom Content, Saved Page, Saved Section, or AE Template.
Preview Modal Popup: If you want to preview the pop window, you can enable it.
Title: Give a Title to be displayed at the top of the popup window.
Content: Enter content manually or select the source of the Content-Type that you choose on the top accordingly.
Modal Setting
Modal Width: Here, you can assign the width to the pop-up window.
Modal height: You can assign the height to the pop-up window here.
Effect: Choose from the list of effects.
Overlay Color: It allows you to choose the color for the overlay.
Display settings
Button Text: Here, you can give the text to the Model Popup button.
Alignment: You can adjust the positioning of the button (left, center, right, justified).
Icon: Select an icon to be displayed along with the button text.
Icon Position: Adjust the position of an icon like before or after the text accordingly.
Icon Spacing: Adjusted the space between the icon and the text.
Style
Popup
Title
Color: Choose the popup text color
Background Color: Select the popup background-color
Padding: Adjust the padding around the popup
Typography: Set the typography settings of the title
Content
Color: Select the color for the popup text
Background Color: Select the background color
Padding: Adjust the content padding
Typography: Set the typography settings of the content
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
Border Radius: Set the border radius to control corner roundness for each side of the popup
Box Shadow: Adjust box-shadow options
Button
Typography: Set the typography options for the button’s text
Text Color: Choose the color of the button’s text
Text Shadow: Apply shadow to the button text
Background Color: Choose the background color of the button
Border Radius: Set the border radius of the button to control corner roundness
Close Button
Button Inside: Enable it to position the close button inside the popup window.
Icon: Select an icon to close the popup.
Icon Size: Adjust the icon size.
Color: Select the Close button for both the Normal and Hover states.
Position Top: Adjust the close icon position from the top.
Position Right: Adjust the close icon position from the right side.
Flip Box
The EAE – Flip box widget creates an attractive information box for your website. You can switch the box from one side to another and easily customize each box element. Icons, text, images, and buttons can easily be added to both sides of the box.
Content
Front Box
Icon: Select an icon from the FontAwesome library
View: Choose the default icon view, or select Stacked or Framed
Shape: If Stacked or Framed is chosen, choose Circle or Square
Title: Here, you need to input the title for the front-side content of the animated box.
Html Tag: Select the HTML tag to render the box title.
Text: Enter the content to be added to the front side of the box.
Back Box
Icon: Select an icon from the FontAwesome library.
View: Choose the default icon view, or select Stacked or Framed.
Shape: If Stacked or Framed is chosen, choose Circle or Square.
Title: Here, you need to input the title for the backside content of the animated box.
Html Tag: Select the HTML tag to render the box title.
Text: Enter the content to be added to the back side of the box.
Action Button
Button Text: Choose the text that appears inside the button
Link TO: Choose where the button points to. Enter the URL of the page in the link.
Style
General
Animation Style: Select the animation style for the box.
Border Type: Set a border to the entire flip box.
Border Radius: Set the radius of the border to control corner roundness.
Box Height: Set the height of the flip box.
Front Box
Background Type: Choose a Color or Gradient as the background of the front of the flip box.
Title: Choose the color of the title.
Title Typography: Set the typography settings of the title.
Description Color: Choose the color of the description.
Typography: Set the typography settings of the description.
Icon Color: Select the icon color for the front side of the box.
Icon Size: Adjust the size of the icon.
Back Box
Background Type: Choose a Color or Gradient as the background of the back side of the flip box.
Title: Choose the color of the title.
Title Typography: Set the typography settings of the title.
Description Color: Choose the color of the description.
Typography: Set the typography settings of the description.
Icon Color: Select the icon color for the back side of the box.
Icon Size: Adjust the size of the icon.
Action Button
Text Color: Choose the text color of the button.
Typography: Customize the typography of the button text.
Border Type: Choose a border for the action button None, Solid, Double, Dotted, Dashed, or Groove.
Border Radius: Control the border radius of the button.
Shape Separator
EAE – Shape Separator widget creates various graphic shapes allowing you to separate page sections. Give your website an attractive and elegant look using different shapes to divide various sections.
Content
Shape
Shape: Click the dropdown to choose your Shape Divider style.
Shape Color: Choose the appropriate color.
Shape Height: Set the height of your Shape Divider.
Split Text
The EAE – Split Text widget lets you create unique and attractive heading styles for your website. It separates the text into two different parts; each part can be styled separately by adjusting color and typography for both parts.
Content
General
Alignment: Specify the alignment of the text like left, center, and right.
Split Mode: Select the split mode like Letter or Word.
Split Count: Enter the number from where to split the text.
HTML Tag: Select the HTML tag to render the text item.
Text: Enter the text which you want to style.
Style
Parts
Text Color: Choose the color of the first part of the text.
Typography: Set the typography options for the part 1 text.
Border: Set the border type for the text block. It can be dotted, dashed, double, or solid.
Border Radius: set the border radius for the chosen border to make the border angles more round.
Padding: Set the padding for the text.
Margin: Set the padding for the text.
Background Type: Choose the background color of the content.
Google Map
The EAE – Google Map widget allows you to embed a customizable google map on your website. Incorporating a Google Map on your website page makes it easier for visitors to track your location. You need to get the Google Map API key to make this widget work.
Content
General
Markers: You can add multiple locations to be shown on the map
Longitude: Insert the longitude coordinates
Latitude: Insert the latitude coordinates
Address: Enter the text to be displayed in the Marker
Height: Set the height of the map
Zoom Set the zoom level of the map
Aminated Marker: Enable it to give animated markers
Snazzy Style: You can apply styles from Snazzy Maps and give your maps a different touch. This is an optional field. If you leave it, it will display your map in the default Google Map theme.
Price Table
The EAE – Price Table Widget allows you to display your product price and the services you offer, attractively and clearly. The widget contains various customization options to style each section of the table.
Content
Plan Heading
Heading: Enter the title of the specific price plan
Heading Html Tag: Set the Header’s Title tag, choosing from H2 – H6
Sub Heading: Enter the subtitle that appears below the main title
Sub Heading Html tag: Set the HTML tag for the subheader, choosing from H2 – H6
Price Box
Price Box Text: Set the exact pricing of your product or service.
Price Box Sub Text: Enter extra text to be displayed in the price box
Shape: Select to display the price inside a circle or a square
Features
A list of all the features you are offering. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.
Action Button
Button Text: Write the text that will appear for the button.
Link To: Choose where the button points to. Enter the URL of the page in the link.
Icon: Select an icon from the FontAwesome library.
Icon Position: Adjust the position of an icon like before or after the text accordingly.
Icon Spacing: Adjusted the space between the icon and the text.
Style
Box Style
Box Color: Choose the background color for the top section of the widget.
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius of the button to control corner roundness.
Box Shadow: Add a box shadow effect to the table.
Plan Heading
Heading Color: Choose any color for the main title.
Typography: Select the heading typography.
Sub Heading Color: Choose a subheading color.
Typography: Select the subheading typography.
Background Type: Select the background type for the heading area.
Price Box
Price Text Color: Choose any color for the main title.
Typography: Select the heading typography.
SubText Color: Choose the subheading color.
Typography: Select the subheading typography.
Background Type: Select the background type for the heading area.
Feature List
Feature Color: Choose the color of the features list text.
Typography: Set the typography options for the features list text.
Color: Choose the background color of the features list.
Image: Upload an image to be used as a background.
Alignment: Align the list to the right, left, or center.
Padding: Customize the padding of the features list.
Action Button
Section Background: set the background color for the button section
Text Color: Choose the color of the button’s text.
Typography: Set the typography options for the button’s text.
Background Color: Choose the background color of the button.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius of the button to control corner roundness.
Text Padding: Set the distance between the button text and the border.
Button Hover
Text Color: Set the button text color on hover.
Background Color: Set the button background color on hover.
Info Circle
EAE – Info Circle widget adds an interactive element to your website. It serves as a multipurpose widget, as you can add multiple items inside a single widget.
Content
Skins
Skin: Select the layout from the pre-build layout styles.
Global Icon
Type: Choose the icon type like FontAwesome icon, image, or text to display.
Icon: Select an icon from the FontAwesome library.
Custom Icon: Upload an icon image.
View: Choose the default icon view, or select Stacked or Framed.
Shape: If Stacked or Framed is chosen, choose Circle or Square.
Title: Give a title to each item of the info circle.
Icon: To give each item of the info circle a separate icon.
Content: Write a short description of the item.
Style
Content
Border Type: Set a border around the content.
Width: If a border type is chosen, set a width for the border.
Color: Select a color for the border.
Content change on mouse enter: Enable it to change on mouse enter.
Content auto change: Enable it to change automatically.
Content Alignment: Align the content Left, Center, and Right.
Content Padding: Choose the padding for the content.
Title Color: Choose any color for the title.
Content Color: Choose any color for the content.
Title Typography: Change the title typography.
Content Typography: Set content typography.
Background Type: Select the background type from Classic or Gradient.
Box Shadow: Add a box shadow effect to the circle.
Primary Color: Choose the primary color of the icon for both normal and active states.
Secondary Color: Choose the secondary color of the icon for the normal and active state.
Icon Size: Set the size of the icon.
Padding: Set the amount of padding around the icon.
Rotate: Select the number of degrees to rotate the icon from 0 to 360.
Border Style: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Border Width: Set the width of the icon border.
Border Radius: Set the radius of the icon border to control corner roundness.
Progress Bar
The EAE – Progress bar widget creates a fully functional and attractive bar for your website page.
Content
General
Skin: Select the layout style of the bar.
Skill: Enter the Title to be shown at the top of the progress bar.
Percentage: Set the completion percentage number.
Show Title: Show or hide the title of the bar.
Show Percentage: Show or hide the actual percentage number text at the end of the bar.
Style
General
Progress Color: Choose the color of the bar.
Background Color: Choose the color of the background of the bar.
Title
Color: Choose the title text color displayed above the progress bar.
Typography: Set the typography options of the title text.
Percentage
Color: Choose the color of the percentage text displayed above the progress bar.
Typography: Set the typography options of the percentage text.
Post List
The EAE – Post List widget gives you a powerful way to display your post, page, templates, and custom post types in an attractive list manner. Each post in the lists is visually represented in a separate card.
Content
Post Filters
Post Type: Choose the source from where the content will be retrieved. Select from these options Post, page, template, etc.
Category ID: Enter category id to filter posts based on certain categories.
Number of Posts: Set the exact amount of posts displayed.
Post Offset: Use this setting to skip over posts.
Order By: Set the order in which the posts will be displayed. Options include Date, Title, Menu Order, or Random.
Order: DESC (descending) or ASC (ascending).
Layout Settings
Show Image: Enable to display post feature image.
Image Size: Set the size of the image from thumbnail to full.
Image Alignment: Set the image position relative to the content. Options include Top, left, right, and none.
Image Indent: Adjust the spacing between the text and the image.
Show Title: Choose to show or hide the title.
Title On Top: Enable it to display the post title on the top.
Show Excerpt: Choose to show or hide the excerpt.
Excerpt Size: Choose the length of the excerpt, setting the exact amount of words displayed.
Show ReadMore: Show or hide the Read More button.
Readmore Text: Customize the Read More text.
Style
General
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the roundness of the border corners.
Typography
Title Color: Set the color of the titles.
Title Align: Align the title left, center, and right.
Title Typography: Set the typography of the titles.
Excerpt Color: Set the color of the excerpt.
Excerpt Align: Set the alignment for the excerpt text and select from left, center, and right.
Excerpt Typography: Set the typography of the excerpt.
Readmore Color: Set the color of the Readmore.
Read more Align: Set the alignment for the Readmore text and select from left, center, and right.
Read more Typography: Set the typography of the excerpt.
List Item Style
List Item Padding: Set the padding for the list items.
List Item Margin: Set the margin for the list items.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved, for each list item.
Border radius: Set the border radius.
Read More Button
Background Color: Set the background color for the button.
Border Type: Select the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the roundness of the border corners of the button.
Text Padding: Adjust the padding for the read-more text.
Read More Margin: Adjust the margin for the read more text.
Text Separator
Content
Title
Title: Enter the divider text.
HTML Tag: Select the HTML tag to display the title.
Alignment: Align the text to the divider’s left, center, or right.
Icon
Icon: Select an icon from the FontAwesome library
View: Choose the default icon view, or select Stacked or Framed
Icon Position: Choose the position of the text about the divider, selecting from Left, Center, or Right
Divider
Style: Choose between solid, double, dotted, and dashed.
Weight: Control the weight of the divider as a percentage from 0 to 100 percent.
Style
Title
TextColor: Select the color for the text element.
Typography Choose the typography for the text.
Divider
Divider Color: Choose the color of the divider.
Width: Control the divider length as a percentage from 0 to 100 percent.
Alignment: Set the alignment of the divider.
Icon
Primary Color: Choose the icon color
Icon Size: Set the size of the icon
Icon Rotate: Select the number of degrees to rotate the icon, from 0 to 360.
Thumbnail Slider
Using EAE-Thumbnail slider interactive sliders to your Elementor Website, with many functionalities and advanced features. Add and customize the thumbnail slides and images.
Content
Slides
Slides: By default, you will get three tabs to create slides for your slider. If you want to add more slides, click the Add Item button.
Image: Add an image to the slider. If you want to customize the image, click the Custom thumbnail option.
Content: Add custom content to the slides.
Style: Under the style option, you can give a specific styling to that particular slide.
Height: Set the height of the carousel.
Image Fit: Select how the image fits into its container, either Cover, Contain, or Auto.
Image Position: Set the image position within the slider, like center, center right, and top right, and there are many other options.
Image Size: Select the image size from Thumbnail to Full or Custom.
Slide Overlay: Enable it to add an overlay effect to the slides.
Color: Choose the overlay color.
Blend: Select the blend mode type like normal, multiply, blend, overlay, etc.
Thumbnails
Thumbs Per View: Enter the number of image thumbnails to view. By default, three thumbs are displayed.
Space Between Thumbs: Adjust the spacing between the thumbnails.
Arrow: Enable this option to add navigational arrows to the thumbnail slider.
Image Size: Set the image size within the thumbnails.
Image Fit: Choose from the following options.
Image Repeat: Choose from the following options.
Ratio: Set the image aspect ratio.
Position: Set image positioning bottom or top.
Slider Options
Effect: Choose how each slide transitions, either Slide or Fade.
Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms equals 1 second.
Autoplay: Show or hide autoplay.
Duration: Set the time it takes for each slide to appear.
Pause On Interaction: Select whether or not to pause autoplay when a user interacts with the carousel.
Pause On Hover: Select whether or not to pause autoplay when a user hovers on the carousel.
Direction: Set slider direction from the left or right.
Space Between Slides: Set the space between slides
Loops: Show the carousel in a continuous loop, infinitely.
Arrow: Choose to show or hide the navigation arrows
Icon Prev: Add the previous icon.
Icon next: Add the next icon.
Pagination: Select None, Dots, Fraction, or Progress.
Style
Slides
Space Between: Set the space between slides and thumbnails.
Border Type: Select the type of border to use around the slides. Select from none, solid, dotted, dashed, and groove.
Border Radius: Set the border radius to control corner roundness.
Padding: Set the padding.
Horizontal Position: Set the horizontal positioning of the text within the slides.
Vertical Position: Set the vertical positioning of the text within the slides.
Text Align: Align the text on the slides to the left, center, or right.
Text Shadow: Apply shadow on the text.
Content Width: Set the width of the text content in the slide.
Content Background Color: Choose a background color for the text content.
Content Padding: Set the content padding accordingly.
Heading
Text Color: Choose an appropriate color for the heading text.
Typography: Set the typography options for the heading text.
Spacing: Adjust the spacing between the heading text and description.
Description
Text Color: Choose an appropriate color for the text.
Typography: Set the typography options for the text in the description.
Spacing: Adjust the spacing between the description and the button.
Button
Typography: Set the typography options for the button text.
Text Color: Choose the color for the text.
Background Color: Choose the button’s background color.
Border Type: To give a border around the button, choose the border type from none, solid, dotted, dashed, or groove.
Width: Set the border width.
Slider Navigation
Color: Choose a color for the navigational text.
Active Color: Set the color for the slide navigation to active.
Size: Adjust the size of the navigation text.
Thumbnails
Border Type: Select the type of border to use around the thumbnails.
Border Radius: Set the border radius to control corner roundness.
Data Table
EAE – Data Table widget lets you create well-structured Data Tables for your WordPress site. It gives you more flexibility and ease in table design and has many customization options.
Content
Header
Here you can create a table header section. Every time you add a new row, that section is by default marked as ‘Row Start.’ To add the header content, click on the Add Item button.
Row/Column: Select Column to add the content inside the cell. Each item in the cell has three control tabs
Content:
Text: Enter the text for the header row.
Column Span: Enter the number of columns you want to merge.
Row Span: Enter the number of rows you want to merge.
Alignment: Set the text’s alignment in the cell, left, center, or right.
Icon: Here, you can add custom icons inside the header.
Style: Here, you can give custom styling to each item separately.
Body
Here you can add content to your table. Every time you add a new row named “Row Start, ” you will get a default Row section.” You can add a new Row by clicking on the Add Item button.
Each row consists of cells. To add cells to individual rows, click on the add item button. Each item has three tabs.
Content
Type: Choose whether to add content manually or import a Template.
Text: Enter the text in the cell.
Link: Add a URL to the text to navigate to the other page.
Column Span: Enter the number of columns you want to merge.
Row Span: Enter the number of rows you want to merge.
Alignment: Set the text’s alignment in the cell, left, center, or right.
Icon Here, you can add custom icons inside the cell.
Style Here, you can give custom styling to each item separately.
Table Settings
Width: Adjust the Width of the table.
Alignment: Align the table to the Left, Right, or Center.
Search: Enable it to add a Search box to the table.
PalceHolder: Enter the placeholder text for the Search text box.
Sorting
Sortable Table: Enable it to make table data Sortable.
Icon Type: Add a Sort icon.
Style
Table
Background Type: Select solid Color or gradient as a background type.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved
Header
Typography: Change the typography options for the header text
Color: Choose a color for the text in the header row.
Background Color: Choose a background color for the header.
Icon Color: Set the icon color
Border Type: Set the border style around the headers.
Width: Set the border width
Color: Choose the header border color.
Padding: Adjust the Padding.
Rows
Typography: Set the typography option for the row content
Striped Rows: Enable to apply Even Odd background Style to the table rows.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved
Width: Set the border thickness
Color: Choose the border color.
Padding: Set the Padding for the Rows.
Column
Typography: Set the typography option for the text in Columns
Color: Set the Color for the Column text.
Hover Color: Set the Color for the Column text on Hover
Background Color: Set the background color for the even and odd Columns.
Hover Background Color: Set the background color for the even and odd Columns on the hover state.
Icon Color: Set the icon color to a normal state
Hover Icon Color: Set the icon color on the hover state.
Search
Width: Set the Width of the search box
Alignment: Set the Alignment of the box
Bottom Spacing: Adjust the spacing between the search box and the table.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved
Typography: Set the typography option for the search text
Color: Set the Color for the text
Background Color: Choose the background color for the search box.
Position: Set the position of the Search icon as Before or After the placeholder text.
Size: Set the icon size.
Color: Choose a color for the icon
Sort
Color: Choose the Sort icon color
Hover: Choose the sort icon color on the hover.
Size: Set the Size of the icon
Filterable Gallery
EAE – Filterable Gallery widget lets you create an attractive image gallery for your website. It allows you to group images into categories and easily access them using clickable filters. This gallery widget comes with various advanced features through which you can easily represent and style your portfolios.
Content
General
Click on the ADD Item button to add filters. Give the filter a proper name, then add multiple images to the filter item.
Settings
Image Size: Set the image size from thumbnail to full , or enter a custom size.
Columns: Set how many columns will be displayed per row from 1 to 6.
Enable Image Ratio: Control the space between each image in a row.
Gutter: Adjuat the gutter margin accordingly.
Show Alt Filter tab: If set to Yes, enter the desired label. “All” is the default.
Masonry: Enable it to display images seamlessly.
Hover Tilt: Enable to get a tilted effect on hover.
LightBox: Choose to display images in a lightbox.
Hover Scale: Enable or disable the hovering scale.
OverLay Setting
Show Overlay: Select when the Overlay effect appears for the images like OnHover, Always, Hide on Hover, or Never.
Caption: Hide or Show Captions.
Icon: Select an icon to be displayed on hover.
View: Choose the default icon view, or select Stacked or Framed.
Style
General
Border Type: Choose the thickness of the border for Normal and hover state.
Border Radius: Control the corner roundness of the image border.
Item Shadow: Enable this option if you want to access the advanced shadow settings for the items and need to apply shadow for them.
Image
Opacity: Set the Opacity for the image.
CSS Filters: Set CSS Filters, selecting from Blur, Brightness, Contrast, and Saturation for Normal and Hover states.
Overlay
Background Type: Choose a classic or gradient type for the widget overlay.
Animation: Choose the overlay’s Entrance or Exit animation upon hover.
Color: Choose the Description’s color.
Typography: Set the typography options for the Caption.
Primary Color: Choose the primary color of the icon.
Secondary Color: Choose the secondary color of the icon.
Primary Color Hover: Choose the primary color of the icon on the hover state.
Secondary Color Hover: Choose the secondary color of the icon on the hover state.
Size: Choose the size of the icon.
Icon Padding: Set the amount of padding around the icon.
Rotate: Rotate the icon to any angle.
Filter
Typography: Set the typography options for the Filter bar text.
Color: Choose the color of the Filter bar text for Normal, Hover states.
Current Color: Choose the color of the Filter bar text for active states.
Background Color: Choose the background color of the Filter bar for Normal, Hover, and states.
Current Background Color: Choose the background color of the Filter bar for active states.
Border Type: Set the type of border, choosing from None, Solid, Double, Dotted, Dashed, or Groove.
Curent Border Color: Choose the border color for the active item.
Border Radius: Set the border radius, to control corner roundness.
Alignment: Align the bar to the left, right, or center.
Padding: Control the amount of space between the Filter text and the gallery images.
Spacing: Control the amount of space between Filter text items.
Background Slider
Add image slideshows as a background to your sections, columns, or inner section using the Elementor Addon Elements Background Slider feature.
To add a background slider, edit the section/ column, click the Style tab, and then go to the EAE – Background Slider option.
Style
Add Images: Click the Add Images button to select images to display. Once selected, click the Create a New Gallery button and then the Insert Gallery button.
Image Size: Select the image size from Thumbnail to Full or Custom.
Transitions: Choose from Fade, Slide Right, Slide Left, Slide Down, or Slide Up.
Animation: Select the animation style.
Custom Overlay: Enable it to add a custom overlay.
Background Type: Select the Background.
Overlay: Select overlay style.
Cover: Select True or False.
Delay: Set the delay time in milliseconds.
Timer: Select YES or No.
Animated Gradient Background
Add stunning animated background effects to the Elementor’s section and Columns to make them eye-catching and appealing using the Animated Gradient Background feature of Elementor Addon Elements.
Follow the steps to add a gradient background to your elementor section or column.
Add a section, then under the edit section settings, Go to the Style tab and then enable the EAE – Animated Gradient Background feature.
Angle: Set the gradient angle.
Color: By default, you can add three colors for the gradient effect. Click on the Add item button to add more colors for the gradient background.
Twitter Feed
Using EAE – Twitter widgets allows you to share the tweets from your Twitter account to your website page seamlessly. Through this, you can make your website more engaging, and you can also customize various elements of the widget.
Content
General
Type: Handle, Hashtag, Message, and Share. The options vary based on the type selected.
Enter UserName: Enter the Twitter account details to display its posts.
Display Mode: Select Timeline or Button mode timeline.
Height: Adjust the height of the widget.
Theme: Select the display theme, Light or Dark.
Display Link Color: Choose the color for the tweet text button.
Button Type: Select if you want a Follow button or the Mention button
Hide Name: Toggle it to hide the username.
Show Count: Enable it to display the count of followers.
Large Button: Enable to display the button in a larger size.
Language: Select the language for the post.
Particle Background Effect
Add particle background to your sections/ columns using the Particle effect feature of Elementor Addon Elements.
The particle background uses the particle.js library. Using the EAE – Particle feature, you can customize the particles.
Select the effect and then customize it as per requirement.
After completing the setup, download the JSON file from the site.
Add the JSON code to the Section/ Column.
Edit Section/Column, click the Style tab, and enable the EAE- Particle option.
Copy the JSON code from the file downloaded and paste the code into the text editor.
Advanced Heading
“EAE Advanced Heading” is an incredibly powerful widget that empowers users to create visually stunning and streamlined headings for their web pages. Users can add a range of design components, such as shadow text, icons, separators, and highlighted text, to enhance the overall aesthetics of the heading.
Moreover, the widget allows users to insert icons, images, or Lottie animations between the Separator to add an extra layer of visual appeal. The widget’s easy-to-use interface makes the process of creating headings a breeze, and the result is a stunning, professional-looking heading that will surely capture the user’s attention.
The “Advanced Heading” widget features the following controls:
Content
Heading – Enter the desired text you want to display or choose the dynamic tag option. If you want to highlight specific text within the heading, place them in between %%_%%, like, Hello %%World%%.
Link – Include a link URL in the widget by manually entering it or choosing a dynamic option.
HTML Tag – Select the HTML tag you wish to use to display your heading.
Icon type – Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source – Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop – Enable the loop option to display the animation continuously.
Reverse – Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Position – Choose the position of the Icon, either before or after the heading.
Sub Heading
Enable – Activate the option to add subheadings to your webpage.
Text – Input the desired text or select a dynamic tag option for display.
HTML Tag – Select the HTML tag you wish to use to display your sub-heading.
Shadow Text
Enable – Activate the option to add shadow text to your webpage.
Text – Input the desired text or select a dynamic tag option for display.
Icon
Icon Type: As we mentioned above, you can choose from a list of Icons, Images, or Lottie animations. Click here.
Alignment: Set the alignment of icon.
Separator
Show Separator – Enable the option to show Separator.
Type – Select the type of Separator.
Graphic Type – Select the graphic type for display between the separators, such as Image, Icon, or text.
Icon
Icon type: Select either an Icon or a Lottie animation
Icon
Icon – Select an icon from the Font Awesome library or upload an SVG
Lottie Animation
Source – Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop – Enable the loop option to display the animation continuously.
Reverse – Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Text
Text – Enter the text that you wish to appear or use a dynamic tag between the separator.
Image
Image – Upload an image.
Alignment – Choose the alignment of the Separator, whether left, right, or center.
Order
Choose the order of displaying individual elements, such as
Heading
Subheading
Separator
Icon
Note: If any of these elements have a lower priority than others, they can be placed first on the webpage. This feature gives you greater control over the visual hierarchy of your webpage.
Style
Heading
Typography: Set the typography option for the heading.
Fill Style: Select either a color or an image.
Color
Color: Select the color for the background.
Hover Color: Select the color for hover states.
Image
Background Type: Choose either a Classic or a Gradient.
Classic
Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Repeat: Specify the repeat pattern for the background image.
Display size: Choose between contain, cover, and auto options, or add custom values for the background display size.
Image Size: Choose the size of the image, from thumbnail to full.
Position: Set the position of the background image.
Attachment: Choose either scroll or fixed.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Text Shadow: Apply a shadow to the heading if desired.
Position: Choose the position of the heading, whether left, right, or center, for display.
Text-align: Choose the alignment of the heading, whether left, right, or center, for display.
Padding: Set the padding for the heading.
Margin: Set the margin for the heading.
Heading Icon
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon in degrees.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX,%, EM, or REM.
Highlighted Text
Typography: Set the typography option for the highlighted text.
FillStyle: As we mentioned above, you can select either a color or an image. Click here.
Text Shadow: Apply a shadow to the highlighted text in the heading if desired.
BackgroundType: As we mentioned above, you can select either Classic or Gradient. Click Here.
Border Radius: Set the border radius.
Padding: Set the padding.
Sub Heading
Typography: Set the typography option for the heading.
Fill Style: As we mentioned above, you can select either a color or an image. Click here.
Text Shadow: Apply a text shadow on the subheading.
Alignment: Choose the desired alignment of the Icon, whether it should be on the left, right, or center
Padding: Set the padding for the subheading.
Margin: Set the margin for the subheading.
Shadow Text
Top: Adjust the position of the shadow text from the top.
Left: Adjust the position of the shadow text from the left.
Typography: Set the typography for the shadow text.
Stroke Color: Set the stroke color.
Fill Color: Set the color to fill the text.
Stroke Width: Set the width for the stroke on shadow text.
Separator
Width: Set the width of the Separator using %, PX, EM, or REM.
Height: Set the height of the Separator using %, PX, EM, or REM.
Gap: Set the gap of Separator.
Position: Set the position of Separator.
Color: Set the color of the Separator.
Border Radius: Set the border’s radius using PX,%.
Margin: Set the margin for the Separator using PX, EM, or %.
Icon
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Text
Note: This is applicable when you select Text as Graphic Element in Separator.
Text Color: Select the separator text color.
Typography: Set the typography.
Image
Note: This is applicable when you select Image as Graphic Element in Separator.
Height: Set the height of image.
Width: Set the width of image.
Icon
As we mentioned above, Styling control for icons is under this section. Check here.
Chart
The Chart widget allows you to create amazing grahpical data charts in Elementor Page Builder. You can easily make animated charts and can customize them accordingly.
Content
Layout
Skin: Select one of the following chart layouts, Horizontal, Vertical, or Line.
Labels: Labels field allows you to give every set of bars a separate name. You must separate the names with a (, ) if there is more than one set.
DataSets: Enter the items that the bars in the chart will represent. Click on ADD Item button to create more items.
Additional Settings
Chart Height: Set the graph height in pixels
Bar Width: Set the width of the bars in case of the Horizontal and Vertical Skin options. If you select the Line chart option in the skin, you can also set the width of the line.
Bar Category Width: Control the width of the bars in the charts.
Bar Border Width: Set the border width.
X-Axis
Enable Grid Line: Enable or Disable X-Axis Grid Lines
Enable Title: Enable this option to add the text shown on the x-axis.
Enable Label: Enable this option to display labels on the x-axis.
Y-Axis
Enable Grid Line: Enable or Disable Y-Axis Grid Lines
Enable Title: Enable this option to add the text that will be shown on the y-axis.
Enable Label: Enable this option to display the label on the y-axis.
Step Scale: Enter a number to define the size of the steps.
Scale Axis Range: Set the maximum number of the scale according to your need.
Title
Enable Title: Enable or disable the chart title
Title: Enter the Chart Title
Position: Set the position to display the title, Top or Bottom
Legend
Enable Legend: Enable this option to help your readers to understand the charted data.
Position: Select the legend position from the top, right, bottom, and left.
Alignment: Set the alignment for the legend data to display
Reverse: You can enable or disable the legend data reverse option.
Tooltip
Enable Tooltip: Enable this option to add a tooltip for the chart data on hover.
Mode: You can choose to display different values when hovering. You can choose from Index or Point.
Animation
Animation: Add the animation style to the chart. Select from the different options available.
Animation Duration: Set animation duration
Style
General
Background Type: Set the background style like solid color, image, and gradient.
Overlay: Enable the option to add an overlay effect to the image background
Border Type: Set the border type from none, solid, double, dotted, dashed, or grooved.
Border Radius: Control the corner roundness of the border
Margin: Set the margin parameters.
Padding: Set the paddings.
X-Axis
Grid
Color: Set the color for the grid lines on the x-axis.
Width: Set the width for the grid.
Label
Color: Set the color for the label on the x-axis
Typography: Set typography parameters for the label text
Padding: Set padding around the text
Y-Axis
Grid
Color: Set the color for the grid lines on the y-axis.
Width: Set the width for the grid.
Label
Color: Set the color for the y-axis label.
Typography: Set typography parameters for the label text.
Padding: Set padding around the text.
Title
Color: Set the color for the title of the Chart.
Typography: Set the typography options for the Title text.
Padding: Set the padding values for the title.
Legend
Color: Set the color for the legend text.
Typography: Set the typography options for the legend text.
Padding: Set padding parameters for the legend.
Tooltip
Background Color: Set the background color to display the tooltip text on hover.
Border Color: Set the border color.
Border Width: Set border width.
Border Radius: Set border radius for the roundness of corners.
Arrow Size: Set the tooltip arrow size.
Title
Color: Set the color for the tooltip title.
Typography: Set the typography options for the tooltip title.
Alignment: Set the alignment of the tooltip title.
Bottom Margin: Set the bottom margin for the tooltip title.
Body
Color: Set the color for the tooltip body.
Typography: Set the typography options for the tooltip body.
Alignment: Set the alignment of the tooltip body.
Advanced List
“EAE Advanced List” is a powerful tool that enables you to organize your list in a more efficient and visually appealing manner. This feature allows you to customize individual list items with unique styles and designs, such as adding badges to certain items.
It offers various layout options to display your list, including horizontal and vertical orientation. You can also choose to use a grid view for a more structured and organized representation.
The “Advanced List” widget features the following controls:
Content
General
List
Content
Title: Enter the title for the list.
Description: Enter the description for the list item.
Show Badge: Toggle the badge as desired.
Badge Text: Enter the text for the badge.
Link: Enter the link for applying to the list.
Icon
Icon Type- Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop: Enable the loop option to display the animation continuously.
Reverse: Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Style(for individual item)
Custom Style: Toggle the Custom Style as desired.
Normal
Background Type: Choose either a Classic or a Gradient.
Classic
Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the item box.
Counter
Color: Choose the color for the counter.
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Title
Normal
Color: Choose the color for the Title.
Text Shadow: Apply a shadow to the title if desired.
Hover
Color: Choose the color for the Title hover.
Text Shadow: Apply a shadow to the title hover if desired.
Description
Normal
Color: Choose the color for the description.
Hover
Color: Choose the color for the description.
Badge
Normal
Color: Choose the color for the badge.
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the badge.
Icon
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding.
Rotate: Set the rotation of your Icon.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
List Direction: Choose either Vertical or Horizontal.
Counter: Activate the option to add a Counter to your list.
Grid View: Enable the Grid View option if desired.
Column: Specify the number of columns to display in a single row.
Settings
Title HTML Tag: Select the html tag for the title.
Link: Select on which you want to apply the link, “Icon” or “list.”
List Item Row Gap: Specify the gap between the list item rows(applicable if you enable Grid View).
Icon
Gap: Specify the gap between the icon and the list items.
Position: Select the position of the icon, either “right” or “left.”
Alignment: Select the alignment of the icon.
Badge
Position: Select the position of the badge, either “right” or “left.”
Alignment: Select the alignment of the badge.
Gap: Specify the gap between the badge and the list items.
Counter
Note: This option is only applicable if we enable Counter in the content section.
Type: Select the type of Counter.
Suffix: Select a suffix from the options of colon, dot, or bracket.
Position: Select either Vertical or Horizontal(applicable if List Direction is selected as Horizontal).
Alignment: Select the alignment of the Counter.
Gap: Specify the gap between the counter and the list items.
Style
General
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Box Shadow: Set the box shadow.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border.
Border Radius: Set the border’s radius using PX or %.
Padding: Set the padding using PX or %.
Margin: Set the margin using PX or %.
List Item
Normal
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Box Shadow: Set the box shadow.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the list item box.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border.
Border Radius: Set the border’s radius using PX or %.
Padding: Set the padding.
Margin: Set the margin using PX or %.
Counter
Box Height: Set the box height.
Box Width: Set the box width.
Typography: Set the typography for the counter.
Normal
Color: Specify the color for the counter.
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the counter.
Border Radius: Set the border’s radius using PX or %.
Padding: Set the padding.
Title
Normal
Color: Choose the color for the Title.
Text Shadow: Apply a shadow to the title if desired.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the title.
Typography: Set the typography for the title.
Description
Normal
Color: Choose the color for the description.
Text Shadow: Apply a shadow to the title if desired.
Typography: Set the typography for the description.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the description.
Margin: Set the margin for description.
Icon
Styling controls for the Normal and hover state are available under this section. Hover settings will be applied when Someone hovers the icon. Click here.
Badge
Typography: Set the typography for the badge.
Normal
Color: Set the color for the badge text.
Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Box Shadow: Set the box shadow.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the badge.
Border Radius: Set the border’s radius using PX or %.
Padding: Set the padding.
Margin: Set the margin using PX or %.
Add To Calendar
The “EAEAdd To Calendar” widget is a convenient feature available on your website that enables your users to easily add an event to their preferred calendar platform, such as Google Calendar, ICS, Outlook, or Yahoo Calendar. Users can seamlessly integrate the event into their calendar without manual data entry by simply clicking on the button.
The “Add to Calendar” widget features the following controls:
Content
Calendar
Type: Select your preferred calendar type, such as Google Calendar, ICS(iCalendar), Yahoo, or Outlook.
Title: You can either enter the event title or choose a dynamic tag.
Address: Set the event location.
Date Field: Set the event date and time using either a Date Time Picker or a dynamic string.
Date Time Start: Set the start date and time of the event.
Date Time End: Set the end date and time of the event.
Description: Enter the event description.
Button
Text: Enter the text for the button or choose the dynamic tag.
Icon Type: Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop: Enable the loop option to display the animation continuously.
Reverse: Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.
Position: Choose the position of the Icon, either before or after the heading.
Alignment: Choose the alignment of the button, whether left, right, center, or justified.
Style
Button
Typography: Set the typography for the button.
Text Shadow: Apply a shadow to the heading if desired.
Normal
Text Color: Select the text color of a button.
Background Type: Choose either a Classic or a Gradient.
Classic
Color: Choose the color for the background.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the button.
Border Type: Select the type of border.
Width: Set the width of the border.
Color: Set the color of the border.
Border Radius: Set the border’s radius using PX,%, or EM.
Box Shadow: Set the box shadow.
Padding: Set the padding using PX,%, or EM.
Icon
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding.
Rotate: Set the rotation of your Icon.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Radial Charts
The “EAE – Radial Charts” is an effective widget for comparing datasets of information in a visual and organized manner. It offers three different types of charts: Pie chart, Doughnut chart, and Polarchart, each with its own unique advantages.
With the ability to display a legend, the chart becomes an even more powerful tool for streamlining comparison work and achieving a higher level of accuracy in data analysis.
Whether you’re looking to highlight similarities or differences between data sets, Radial Charts can provide a clear and concise overview that is easy to interpret and understand.
The “Radial Charts” widget features the following controls:
Content
General
Type: Choose from Pie, Doughnut, or Polar charts to present your data.
Datasets: Specify the number of datasets you wish to compare.
Dataset1
Label: Enter the label of the dataset or select the dynamic tag option.
Chart Data
Content
Label: Enter the label.
Value: Enter the value.
Style(Individual item)
Background Color: Select the background color.
Background Hover Color: Select the background hover color.
Border Color: Select the border color.
Border Hover Color: Select the border hover color.
Layout
Height: Specify the height of the chart.
Circular: Enable the circular mode if desired.
Circumference: Specify the circumference of the chart.
Rotation: Indicate the rotation for the chart.
Border Radius: Set the border radius.
Cutout: Specify the cutout value(Only for Doughnut Chart).
Normal
Offset: Set the offset.
Border Width: Set the border width.
Hover
Hover Border Width: Set the border hover width.
Hover Offset: Set the offset hover.
Animation
AnimationDuration: Enter animation duration.
Animation: Choose the animation style.
Animation Scale: Enable the option for animation scale.
Legend(It will get color from Dataset 1 only)
Enable Legend: Enable the legend if desired.
Shape: Specify the shape for the legend, either Square or Circle.
Position: Specify the position of the legend
Alignment: Set the alignment of the legend.
Reverse: To view the legend in reverse order, activate the corresponding option.
Tooltip
Enable Tooltips: Enable the option if desired.
Enable Ticks: To view the ticks, enable the corresponding option(Only for Polar Chart).
Show Percentage: Enable the option to show percentage value(Only for Polar Chart).
Enable Grid Line: To view the Grid line, activate the corresponding option(Only for Polar Chart).
Style
Legend
Box Height: Set the height of the box.
Box Width: Set the width of the box.
Font Size: Specify the font size.
Font Weight: Set the font weight.
Font Color: Select the color of the text.
Tooltip
Background Color: Select the background color for the tooltip.
Title
Font Size: Specify the font size.
Font Weight: Set the font weight.
Font Color: Select the color of the text.
Body
Font Size: Specify the font size.
Font Weight: Set the font weight.
Font Color: Select the color of the text.
Polar Area
Note: This is only applicable for Polar Chart.
Ticks
Color: Select the color of the ticks.
Background Color: Select the background color of the ticks.
Padding: Set the padding.
Font Size: Set the font size.
Grid Line
Grid Color: Specify the color of the grid line.
Image Accordion
The “EAE Image Accordion” is a powerful widget for displaying a large amount of information in a compact and visually appealing way. By collapsing text, images, and icons into a single widget, it effectively saves screen space without sacrificing the user’s ability to access and understand the content.
Its ability to display content in a condensed, collapsed format allows for efficient use of screen real estate while maintaining high visual appeal.
The “Image Accordion” widget features the following controls:
Content
Content
Skin: Select the skin type, either Transparent or Panel.
Item
Content
Image: Set the background image for the Image Accordion(In Transparent Skin, it will work as Overlay).
Title: Enter the title.
Title Tag: Select the tag for the title.
Description: Enter the description.
Description Tag: Select the tag for the description.
Button Text: Enter the text for button.
Link: Enter the URL that needs to be linked upon button.
Icon: Select from the Font Awesome icon library or upload an SVG image.
Icon Position: Set the position of the Icon either before or after the link text.
Active On Load: Enable the option to display this panel upon OnLoad.
Icon
Icon Type- Choose from a list of Icons, Images, or Lottie animations.
Icon
Icon: Select from the Font Awesome icon library or upload an SVG image.
Image
Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.
Lottie Animation
Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop:Enable the loop option to display the animation continuously.
Reverse: Activate the reverse option to display the animation in reverse order.
View – Select from default, stacked, or framed display options.
Shape– Select either Circle or Square.
Style(for individual item)
Icon
Normal
Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.
Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding.
Rotate: Set the rotation of your Icon.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Panel
Background Type: Please choose between a classic or gradient background type for the panel.
Classic
Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Image Size: Choose the size of the image, from thumbnail to full.
Position: Set the position of the background image.
Attachment: Choose either scroll or fixed.
Repeat: Specify the repeat pattern for the background image.
Display size: Choose between contain, cover, and auto options, or add custom values for the background display size.
Gradient
Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
Radial
Position: Set the position.
Linear
Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Set the border radius for a panel.
Content
Horizontal Position: Set the horizontal position of the content.
Vertical Position: Set the Vertical position of the content.
Alignment: Set the alignment
Content Width: Specify the content width.
Background Type: As we mentioned above, Choose between a classic or gradient background type. Click here.
Padding: Set the padding.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Enter the border-radius.
Spacing: Specify the gap.
Title
Text Color: Choose the text color of the title.
Typography: Set the typography.
Text Shadow: Set the text shadow for the title.
Text Stroke: Set the text stroke.
Blend Mode: Select the blend mode.
Description
Text Color: Choose the text color of the description.
Typography: Set the typography.
Text Shadow: Set the text shadow for the description.
Button
Normal
Typography: Set the typography.
Text Color: Choose the text color of the Button.
Text Shadow: Set the text shadow for the Button.
Background Type: As we mentioned above, Choose between a classic or gradient background type for the button. Click here.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Set the border-radius.
Box Shadow: Set the box shadow.
Padding: Set the padding.
Button Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the button.
Image Size: Set the size of an image.
Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
Settings
Width: Set the width of Image accordion items.
Height: Set the height of Image accordion items.
Gap: Specify the gap between the accordion items(applicable when Panel is selected as Skin).
Trigger Action: Select trigger action either hover or click.
Stacked Device: Choose a stacked device, either a phone or tablet.
Show Counter: Enable the option if desired.
Counter Style: Specify the counter style.
Style
Panel
Background Type: As we mentioned above, Choose between a classic or gradient background type for the panel. Click here.
Padding: Set the padding.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Set the border’s radius using PX, %, EM, or REM.
Content Options
Horizontal Position: Set the horizontal position of the content.
Vertical Position: Set the Vertical position of the content.
Alignment: Set the alignment
Content Width: Specify the content width.
Background Type: Choose between a classic or gradient background type. Click here.
Padding: Set the padding.
Border Type: Select the type of border.
Width: Enter the width for the border.
Color: Specify the color of the border
Border Radius: Enter the border-radius.
Spacing: Specify the gap.
Title
Text Color: Choose the text color of the title.
Typography: Set the typography.
Text Shadow: Set the text shadow for the title.
Text Stroke: Set the text stroke.
Blend Mode: Select the blend mode.
Description
Alignment: Set the alignment of the description.
Text Color: Choose the text color of the description.
Typography: Set the typography.
Text Shadow: Set the text shadow for the description.