Renewing the Elementor Templates Library

Renewing the Elementor Templates Library

We will be updating the Elementor library on 12/08/2021

As part of this update we will be renewing and uploading new and improved templates for you to use. These templates will include some dedicated Pro templates alongside templates that will be available to all users.

We will also be removing some old and irrelevant ones – please see a list of deprecated templates below. You may click the link to see an archive mockup of the template for design reference. Note that these templates will be available on our library until 12/30/2021

Those of you that already downloaded them and have them in use, will not be affected by this at all and can keep using them.

About

About — ArchitectureAbout — CVAbout — InteriorAbout — StartupAbout — Delivery CompanyAbout — Cake ShopAbout — Construction CompanyAbout — Plants ShopAbout — ArchitectAbout — Ski Resort 

Black Friday

Black Friday — 80』s styleBlack Friday — Retail SetBlack Friday — Nature Set Black Friday — Pop-Styled SetBlack Friday — Software Product Set

Blog Post

Blog Post — Launch

Christmas

Christmas — Design ConferenceChristmas — Snowboard CompetitionChristmas — Tree ShopChristmas — Interior DesignChristmas — Gift ShopChristmas – Car Agency

Contact

Contact — InteriorContact  — RestaurantContact — ModernContact — HotelContact — Cake ShopContact — Delivery CompanyContact — Construction Company Contact — Architect 

Halloween

Halloween Pack

Hero

Hero UI Kit

Homepage

Homepage — AgencyHomepage — StudyHomepage — Law firmHomepage — FitnessHomepage — InteriorHomepage — Delivery CompanyHomepage — Coffee ShopHomepage — CopywriterHomepage — AppHomepage — RestaurantHomepage — Creative AgencyHomepage — Cake ShopHomepage — Luxury HotelHomepage — Interior DesignHomepage — ProductHomepage — Goodness meal servicesHomepage — Construction Company Homepage — Plants ShopHomepage — Ski Resort 

Portfolio

Portfolio — Fashion PhotographerPortfolio — Graphic Designer

Pricing

Pricing — SoftwarePricing — App

Product

Product — CleanProduct — AppProduct — Speakers

Projects

Projects — Architect 

Services

Services — ConsultingServices — MovingServices — FunServices — Cake Shop MenuServices — Coffee Shop MenuServices — InteriorServices — Delivery CompanyServices — Ski Resort

Shop

Shop — Sweets

Custom Code (Pro)

Custom Code (Pro)

The Custom Code feature allows you to add CSS and snippets of code such as Google Analytics code or Facebook Pixel code and assign it to load in the location of your choice, with the priority you set. There is no need to edit your theme』s files.

To add a new Custom Code, go to Elementor > Custom Code and click the button to add new code.

Here, you』ll be able to add your custom code snippet into a smart code editor, select the location with the page』s structure to include it  (e.g. either in the page』s head element, or at the beginning or end of the body tag), and set its run priority. If you register two scripts in the same location, the priority you set will determine which one of them will load first (1 is the most important, to 10, the least important). Finally, you can assign display conditions just as you would for any Elementor Site Part (Header, Footer, etc). Once you』ve finished, publish your code and it will be live on your site.

Getting Started

Title: Enter a title to help you identify this code snippet in the futureLocation: Select the location for the script, to be applied either in the page or at the beginning of the page』s body ( – Start) or at the end of the page』s body ( – End)Priority: Select the priority level (1 – 10) for this script to run. If multiple scripts are assigned to the same location, the priority levels will determine the order in which they are run. Note that lower numbers indicate higher priority. So a script with a priority of 1 will have a higher priority than a script with a priority of 5.

Adding Scripts

Enter or paste the code snippet in the text area. The text area includes an internal code linter, which is a code analysis tool, that checks for errors or problems and notifies you of any it finds. This allows you to correct the problems before saving.

Adding CSS

In addition to scripts, you may also add CSS to your website by wrapping it between the HTML style tag. This allows you to only include the CSS based on the conditions you set. Example below:

Setting Conditions

Click the Edit link next to Conditions in the Publish block to add conditions to determine where your code snippet is used throughout the site. Select Entire Site if you want it to be used everywhere, or limit it to certain pages, archives, etc. You can also add conditions to exclude it from certain areas of your site. Learn more about conditions here.

You can either Save this custom code as a Draft or Publish it. Either way, you can always return to Elementor > Custom Code in the future to see and manage all custom codes you』ve created.

Connect & Activate your license key

Connect & Activate your license key

After installing Elementor Pro, you need to activate your license. To activate your license key, and get automatic updates, go to Elementor > License. Click Connect & Activate

You』ll be redirected to log in to your account. Click Connect. After you log in, your license will be activated automatically. 

If the license key was installed correctly, the message on the top of your dashboard should disappear.

If you get an 「Invalid redirect URI. Try to reconnect」 error, or any similar 「Error Occurred」 message, when attempting to activate Pro, please go to Settings > General and check the URLs that are listed there as your WordPress Address (URL) and Site Address (URL). Both URLs should be exactly the same. If they are different, you can get this error. 

If you are still having issues with activating your license key, check to see you haven』t copied any spaces or other characters.

For any other issues contact our customer experience team by using the form on the support page.

Note: Elementor Pro is an extension of Elementor. It means that Elementor Pro will not work if you do not install the free version of Elementor.

As of version 2.9, Elementor Pro widgets are not draggable unless your Elementor license has been activated. Please see this document for more information.

Using Elementor Pro On Local or Staging Sites

When building a website using a local machine or on specific staging sites, Elementor Pro doesn』t register as an install, meaning you can install Elementor Pro on your local machine or staging site and on your online website at the same time, without making use of an additional license.

For instance, if your site is example.com, then installing Elementor Pro on staging.example.com will not be considered an additional license use.

TLD (Top-level Domain) that are not considered as a license: 

*.dev (example.dev)

*.local (example.local)

*.staging (example.staging)

*.test (example.test)

*.example (example.example)

*.invalid (example.invalid)

Subdomains that are not considered as a license:

dev.* (dev.example.com)

local.* (local.example.com)

test.* (test.example.com)

staging.* (staging.example.com)

 See more information about using local and staging sites here.

Hosted Elementor Website: Purchasing and Registering a Domain

Hosted Elementor Website: Purchasing and Registering a Domain

In order to use a custom domain on your Hosted Elementor Website, you must have a name registered with a third party. Elementor does not offer registration services at this time. Commonly used registrars are:

GodaddyNamecheapGoogle DomainsDomain.comHover

Note: For this document, we will be using GoDaddy as our example. Other providers will be similar steps.

Picking a domain name

Choose your name carefully, as it is often the easiest way for people to recognize, and find you. Your domain should be as short as possible but use specific terms. For example freds.com is short but does not describe you in any way. Using fredsbarbershop.com would be much better in terms of visitors finding you.

 

Buying your name

You can expect to pay about $15 USD for a domain name per year. Some of this money goes to ICANN for the actual registration and the rest to the company for DNS services. Most companies offer a discounted rate for multi-year contracts. Choose the plan best for you or your client.

Using your name

Once purchased, it may take a few minutes to be added to the system. You may then visit your account page and set up the DNS to be pointed to your Hosted Elementor Website. Learn more about connecting your domain here.

Scroll Snap

Scroll Snap

The Scroll Snap feature allows you to stop the scroll of your page when the section reaches a defined point in the viewport. This is useful in full height sections where you wish to pause the user before they scroll to the next section similar to a slide.

Enabling Scroll Snap

The Scroll Snap feature may be enabled on any page in the Page Settings. Click the gear icon in the bottom corner of your editor panel and navigate to the Advanced tab. 

Note: Scroll snap is currently an experiment. To activate it, navigate to Dashboard > Elementor > Settings > Experiments

Controls

Scroll Snap: Toggle to enable the feature on the pageSnap Position: From the dropdown menu select the position you wish to stop the scroll from the following options: Top, Center, or BottomScroll Padding: Set the distance in PX you wish to offset the section from the position above (example: adjust to accommodate for a sticky header)Scroll Snap Stop: From the dropdown menu choose the behavior of the scroll snap from Normal, which is the default value and allows an element to be scrolled past without snapping, or Always which will force the browser to snap to this element, even if the scroll would normally go past this element.

Note: Scroll Snap only works with Pages edited with Elementor. It does not currently function with Templates, or Theme Builder site parts.

Update And Verify Account Email Address

Update And Verify Account Email Address

When contacting support, all responses will be delivered to the verified email address in your account. You will need to verify this address information and/or update it if it has changed. To do so, you will need to login to your account.

If you have not yet verified your email, you will see a reminder notification here. Click the Edit Account Details link to change the name or email address associated with your account. Click the Save button when done.

Note: Changing an email address will require verification. Check your email for notifications. Be sure to also look in junk mail folders as it may have been directed there.

Sticky Scrolling Effect (Pro)

Sticky Scrolling Effect (Pro)

The Sticky Scrolling Effect lets you set a Section/Widget as sticky, so that it sticks to the top or bottom of the screen. 

Watch a video of a cool example of a sticky scrolling effect.

Scrolling Effect

Edit the Section/Widget by clicking its handle Click the Advanced tab in the panel Open the Motion Effects sectionSticky: Choose to set your section to 「stick」 to the Top or Bottom of the screen, when scrollingSticky On: Select on which devices your section will be sticky, Desktop, Tablet, or MobileOffset: Pushes the sticky element up or down by pixelsEffects Offset: The number of pixels the user must scroll before the sticky effect begins

Note: Effects Offset affects only if CSS was added to the sticky element. Learn more here.

Learn more about Sticky

Update Issues

Update Issues

Before You Update:

We strongly recommend that you follow these procedures before you update any WordPress plugin, theme, or even WordPress itself.

Verify that you do not have the WordPress automatic update option on. Some hosts, including wordpress.com, may implement automatic updates by default. Please check with your host to verify, and request that this option be disabled if you want to ensure that you don』t update anything without first checking that it will be compatible with your site settings.Make a manual backup! You should also automatically backup your websites on a regular basis to avoid pitfalls. Updates are always tested on our end and by BETA testers but we cannot guarantee that there won』t be issues with some specific environments. Read more about backing up your site here.Before updating, please read the documentation on the new release, including any blog posts, changelogs, and community announcements, when possible. These may include instructions and information to help you decide if you should update now or wait. You can check the plugin changelogs here (Core) and here (Pro).Check if your addons for Elementor are compatible with Elementor. You may need to check with the addons』 developers for more information. The developers of the addons are contacted weeks before each update to ensure they can test the compatibility of their plugins with Elementor. Sometimes however, the plugins are still not compatible when the update is released. Test the update on a staging site first, before updating your live, production site. There are several options for using a staging site.a. The best option is when a host has a staging site already available for you, as this will very closely duplicate the exact system settings of your live site. Ask your host if this is available to you. If so, you will need to temporarily deactivate your Elementor Pro license from the live site to activate it on the staging site, unless you have multiple licenses available from your Plus or Expert plan. If your host does not offer a staging site to you, there are other options, and although the system settings won』t be exactly the same as your live site, they will be very similar.b. Another option is to create a staging site on your own computer (this is called localhost) by using a solution such as Local by Flywheel. When building a staging website using a local machine, Elementor Pro doesn』t register as an install, meaning you can run Elementor Pro on your local machine and on your online website at the same time. This works on .local, .dev, and .test domains.c. As an alternative to localhost, you can use an external staging site service such as WP Stagecoach or WP-Staging.You can read our blog post on staging here.

Issues After Updating Your Staging Site:

While some issues following updates may be actual code bugs, many more tend to be issues with specific, individual environments (e.g. installs with conflicting plugins and themes or with server settings which prevent Elementor from working properly). Occasionally, bugs may be related to specific settings that are not active by default, and are discovered once those settings are turned on. In all cases, there are steps you can take to quickly troubleshoot the problem.

Activate Safe Mode. If the problem disappears, you will know that the issue is either with your theme or with one of your plugins. At that point, you can debug Safe Mode to rectify the issue. This may involve contacting the plugin or theme developers for support.Clear all cache, multiple times if necessary, which includes browser cache, WordPress caching plugins, and server caches. Even if you aren』t using a caching plugin, your host may be caching your site server-side. Contact your host to have them clear all cache as well. Also test your site in an incognito browser to be sure your cache isn』t taking control.Contact Elementor support if any bugs seem to be strictly linked to Elementor.Once everything is working well on your staging site, only then should you update your live, production site. Follow these same procedures if anything goes wrong there. Of course, if all else fails, if you created a backup before updating, you can always restore from your backup to immediately get back to the way it was working before you updated.

Common Scenarios:

I don』t see any notifications to update to the newest version

There are several ways to force the newest update to become available. 

Please go to 「Dashboard > Updates」 and click the Check Again button. This will usually make the latest version available to you.If that didn』t work, you can try to deactivate your plugins (besides Elementor and Elementor Pro) temporarily, wait a few minutes, and then check to see if latest versions become available for updating. Once you get the update, you can reactivate the plugins.Of course, if neither of those work, you always have the ability to download the newest version of Elementor Core via our website or from wordpress.com, and you can download the newest version of Elementor Pro via your account at my.elementor.com. Once downloaded, simply upload it to 「Plugins」 on your WordPress Dashboard (after deleting the previous version).

I receive an error message when I try to update Elementor Pro

Some errors with updates occur when you try to update Elementor or Elementor Pro on your localhost installation. A possible fix can be found by installing the plugin: https://wordpress.org/plugins/fix-windows-compatibility/

When you receive an error message while updating Elementor Pro, you have to upload the latest version via your account on my.elementor.com, then upload it to 「Plugins」 on your WordPress Dashboard. Alternatively, you can also upload it via FTP. Please note that you have to delete your current version of Elementor Pro before uploading a new one manually. 

We have solutions for some of these error messages in this guide which will avoid you needing to upload Elementor Pro manually after each update.

Note: To avoid pitfalls, disable your optimization and caching plugins before updating Elementor or Elementor Pro. Please note also that some server cache can affect the update process of Elementor and Elementor Pro. This is rare but it can happen. You may need to ask your host to temporarily disable server cache so you can run the update.

My layout has been lost since the latest update

If the styling of your website is missing after updating Elementor, please try the following: https://docs.elementor.com/article/204-my-changes-do-not-appear-online

If this happens each time that you update, that means that the server cache of your website is preventing Elementor from rewriting to your CSS files. In this case, you have to flush the cache from your cPanel. You can also ask your hosting company to create a plugin for you which can flush the server cache automatically. This will avoid the hassle of going to each page and saving them again with Elementor. If you could not fix the issue, please contact your hosting company. 

Sometimes, it will be enough to click on the 」 Regenerate CSS」 button and/or to switch the CSS Print Method > Internal Embedding  in the settings and tools of Elementor on your WordPress Dashboard.

Elementor keeps loading or does not work properly since I updated the plugin

Plugin conflicts are a common thing on WordPress. We cannot guarantee that our plugin will play well with all the plugins installed on WordPress (more than 50,000) so If you cannot edit or if you experience any issue following an update, please try these troubleshooting tips.

If you could not solve the issue with the aforementioned troubleshooting procedure, you can contact us for further assistance. If your issue is due to a plugin conflict, please inform us and also report the issue to the support team of the conflicting plugin, as they will likely need to update their plugin themselves.

Also make sure that your server meets the requirements of Elementor (to avoid white screens of death, responsive issues, performance issues and PHP errors): Requirements

Elementor Pro Is deactivated when I rollback the Free Version

If you rollback the free version of Elementor for troubleshooting, the Pro version will automatically deactivate. This is intentionally done by the developers in case the two versions are incompatible. Simply reactivate the Pro version from Dashboard > Plugins and check for any errors. You may sometimes need to re-save permalinks and regenerate your CSS due to class changes.

Tip: Known bugs related to specific versions can be found here.

Note: If you do not want to troubleshoot by deactivating your plugins and switching to a default theme of WordPress or by following any of the previous troubleshooting steps, you can temporarily rollback the plugin in 「Elementor > Tools > Version Control」 on your WordPress Dashboard. Keep in mind that this Rollback functionality is a last resort, and while it is a useful tool for a quick fix, it is not a permanent solution. At some point, in order to upgrade, you will need to make sure all troubleshooting has been followed and fixes are in place. So it is best to rule out other issues such as caching issues (including server cache) and plugin conflicts before rolling back.

Posts Widget (Pro)

Posts Widget (Pro)

With the Posts Widget you can display a list of any post types, including custom post types, in various layouts and ways. This practical widget can be used to display posts from a particular category or other taxonomy, recent posts, and more.

Layout Skins

Select the layout skin best suited for your design from the following options:

Classic Skin

The Classic skin is a fully customizable layer template that gets applied to the Posts widget, giving your posts a traditional design style.

Content

Layout

Columns: Set how many columns will be displayed, from 1 to 6Posts Per Page: Set the exact amount of posts displayedImage Position: Set the image position, relative to the content. Options include: Top / left / right / none. *See Note below for instructions to set image position on mobile.Masonry: Slide on or offImage Size: Set the size of the image, from thumbnail to fullImage Ratio: Set the exact ratio of the imagesImage Width: Set the exact width of the imagesTitle: Choose to show or hide the titleTitle HTML Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or pExcerpt: Choose to show or hide the excerptExcerpt Length: Choose the length of the excerpt, setting the exact amount of words displayedMeta Data: Select the meta data to be displayed in the widget. A click on the field opens the list of options. The options include author, date, time and commentsSeparator Between: Choose the separator you want to use between the meta dataRead More: Show or hide the Read More buttonRead More Text: Customize the Read More textOpen In New Window: Toggle the selector if you wish posts to open in a new tab

Cards Skin

The Cards Skin is a customizable pre-designed layer template that gets applied to the Posts widget, giving your posts a trendy material design style.

Content

Layout

Columns: Set how many columns will be displayed, from 1 to 6Posts Per Page: Set the exact amount of posts displayedShow Image: Choose to show or hide the featured imageMasonry: Slide on or offImage Size: Set the size of the image, from thumbnail to fullImage Ratio: Set the exact ratio of the imagesTitle: Choose to show or hide the titleTitle HTML Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or pExcerpt: Choose to show or hide the excerptExcerpt Length: Choose the length of the excerpt, setting the exact amount of words displayedMeta Data: Select the meta data to be displayed in the widget. A click on the field opens the list of options. The options include author, date, time and commentsSeparator Between: Choose the separator you want to use between the meta dataRead More: Show or hide the Read More buttonRead More Text: Customize the Read More textOpen In New Window: Toggle the selector if you wish posts to open in a new tabBadge: Show or hide the Badge. The badge lets you show the category, tag or other taxonomy inside the cardAvatar: Show or hide the user avatar of the post』s author

Read more about the Cards skin

Full Content Skin

The Full Content Skin allows you to display the entire post』s content on your post list pages.

Content

Layout

Posts Per Page: Set the exact amount of posts displayedShow Thumbnail: Choose Yes or No to show or hide the featured imageImage Size: Set the size of the featured image, from thumbnail to fullImage Ratio: Set the exact ratio of the featured imageImage Width: Set the width of the featured imageTitle: Choose to show or hide the titleTitle HTML Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or pMeta Data: Select the meta data to be displayed in the widget. A click on the field opens the list of options. The options include author, date, time and commentsSeparator Between: Enter the separator character(s) you wish to use between the meta dataOpen In New Window: Toggle the selector if you wish posts to open in a new tab

Note: In regards to the Posts Per Page option, please be aware that the Posts widget will load all sticky posts + the number of posts per page that you set in the Posts Per Page option. This is how WordPress fundamentally treats sticky posts. For example, if you set Posts Per Page = 1 but you have 5 sticky posts, then the total number of posts loaded on the front end would be 6 (1+5=6}.

Note: When Elementor displays a post, if it has no excerpt, Elementor automatically generates an excerpt from the post』s content. The Excerpt Length option allows you to control the length of this auto-generated excerpt. However, the excerpt length only applies to posts in which no manual excerpt has been entered. The length specified in the Elementor widget is ignored if a manually-generated excerpt exists for a post. 

Query

Source: Select the source from which the widget will display the content. Options include Posts, Pages, Custom post types if available, Manual Selection, Current Query, and Related. Depending upon which source you』ve chosen for the query, you』ll be given options which allow you to filter the results.

Include

Include By: Term or Author, then use Search and Select to choose which ones to use. Terms include all of the items in a taxonomy. The available taxonomies are: categories, tags, formats and custom taxonomies.Date: Select from All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates) Order By: Set the order in which the posts will be displayed. Options include: Date, Title, Menu Order, or RandomOrder: DESC (descending) or ASC (ascending)Ignore Sticky Posts: Yes or No (Sticky Posts option works only if zero terms have been selected)Query ID: Give your Query a custom unique ID to allow server side filtering

Exclude

Exclude By: Current Post, Manual Selection, Term, or Author, then use Search and Select for Manual,Term, or Author choicesAvoid Duplicates: Yes or No – Choose Yes to avoid displaying duplicate posts on the frontend only. Elementor looks for duplicates at the page level (not at the widget level) given that there cannot be duplicates in a Posts widget.Offset: Use this setting to skip over posts (e.g. 「2」 to skip over 2 posts).Date: All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates)Order By: Date, Title, Menu Order, or RandomOrder: DESC (descending) or ASC (ascending)Ignore Sticky Posts: Yes or No (Sticky Posts option works only if zero terms have been selected)Query ID: Give your Query a custom unique ID to allow server side filtering. See the developer docs for more information on how to use this advanced feature.

Note: Choosing Related as the Source and Category as the Include By term will display posts related to the category assigned to the current post being displayed. So if the user is viewing a post in the Travel category, for example, the page will show Related posts which are also in the Travel category. If the post currently displayed has multiple categories assigned to it, the Related posts will pull posts from the FIRST category (alphabetically) assigned to the post. Important Exception: Keep in mind that if you set a Fallback for Related Posts, it will not take the query into account. Once you select a fallback as shown below, it will pull and display all the latest posts.

Pagination and AJAX Load More

Pagination Options: From the dropdown selector choose how you wish to paginate the results. Options include None, Numbers, Previous/Next, Numbers + Previous/Next, Load On Click, or Infinite Scroll.

AJAX Load More is the ultimate design technique to display large amounts of content in an intuitive and appealing way either by loading more posts on click or enabling infinite scroll. Infinite scroll is a web design technique that loads content seamlessly as the user scrolls down a page. Content is automatically and continuously loaded at the bottom of the page, eliminating the need for pagination. You can use this on the posts widget by selecting the Load on Click or Infinite Scroll pagination options.

If Numbers Is Selected

Page Limit: Enter the number of post you wish to displayShorten: Toggle the selector if you wish to shorten the displayAlignment: Choose between Right, Center, and Left

If Previous / Next Is Selected

Page Limit: Enter the number of post you wish to displayPrevious Label: Enter the text you would like to display after the caratNext Label: Enter the text you would like to display before the caratAlignment: Choose between Right, Center, and Left

If Numbers + Previous / Next Is Selected

Page Limit: Enter the number of post you wish to displayPrevious Label: Enter the text you would like to display after the caratNext Label: Enter the text you would like to display before the caratShorten: Toggle the selector if you wish to shorten the displayAlignment: Choose between Right, Center, and Left

If Load On Click Is Selected

Spinner: Choose to display a loading spinner by ticking the iconsButton Text: Enter the text you wish to display on the buttonAlignment: Choose the alignment options by selecting the iconIcon: Choose an Icon for your button from the library or upload your ownIcon Spacing: Use the slider or enter a value in the field

If Infinite Scroll Is selected

Spinner: Choose to display a loading spinner by ticking the icons

Style

Box

Border Width: Set the thickness of the border around the boxBorder Radius: Set the roundness of the border corners of the boxPadding: Set the padding of the entire boxContent Padding: Set the padding of just the box』s contentBox Shadow: Choose Yes to apply a pre-defined box shadow to the boxBackground Color: Select a box color, for Normal and Hover statesBorder Color: Choose the border color of the box for Normal and Hover states

Image

Border Radius: Set the roundness of the corners for the featured imageSpacing: Set the exact spacing between the featured image and the contentCSS Filters: Adjust the featured image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings

Content

Title

Color: Set the color of the titlesTypography: Set the typography of the titlesSpacing: Set the spacing between the title and the content

Meta

Color: Set the color of the meta dataSeparator Color: Set the color of the meta data separatorTypography: Set the typography for the meta dataSpacing: Set the spacing between the meta data and the excerpt

Pagination

Typography: Choose the font family, size, and styles in the optionsColors: Select the color for Normal, Hover, and Active Styles by using the color picker toolSpace Between: Use the slider or manually enter the desired value in the fieldSpacing: Use the slider or manually enter the desired value in the field

If Load on Click is Selected You may style the button with the following options

Typography: Choose the Typography style in the optionsText Shadow: Apply a shadow to the button text if desired

The following options may be set for Normal and Hover States of the button

Text Color: Set the color of the font by using the color pickerBackground Type: Select a solid color or gradient from the iconsColor: Select the color or gradient colors from the color picker options

Border Style (Button)

Border Type: Select the border type from the dropdown menuBorder Width: Change the values in the fields as desiredColor: Change the color of the border by using the color pickerBorder Radius: Change the values in the fields as desired

Box Shadow: Set a box shadow for the button using the controls

Padding: Change the values in the fields as desired for the padding of the button