Do you receive errors after submitting forms?
Example error messages:
Server_error This error is not visible for site visitorsAn error occurredA red X
You may have empty Field IDs in one or more of your form fields. Please open the settings for your form, select each of the fields and then switch to the Advanced tab. If you notice that the ID option is blank, please try typing in a value (this needs to be a unique ID value that isn』t used anywhere else inside the form).
In order to view the websites connected to your Teams subscription, you need to connect via the Elementor template library.
To learn more about Teams click here.
Elementor』s Paypal Button widget enables you to collect payments of any kind. Sell a single product like an E-book, create a fundraiser campaign, or sell a subscription-based service and seamlessly collect your fees.
Pricing & Payments
Paypal Account: Fill in the details of your merchant account. Transactions made through your PayPal button will be registered under this account.Transaction Type: Choose between Checkout, Donation, and Subscription.
Checkout Type
Item Name: Enter your item name (that will appear when the user is redirected to Paypal).SKU: Enter your item』s SKU.Price: Set your price.Currency: Choose between multiple currencies.Quantity: Set your quantity.Shipping Price: Set your shipping price.Tax: Choose between None or PercentageTax Percentage: Set your tax percentage.
Donation Type
Item Name: Enter your item name (that will appear when the user is redirected to Paypal).SKU: Enter your item』s SKU.Donation Amount: Choose between Fixed and Any Amount.– If Fixed is selected set your Amount and Currency.– If Any Amount is selected set your Currency.
Subscription Type
Item Name: Enter your item name (that will appear when the user is redirected to Paypal).SKU: Enter your item』s SKU.Price: Set your price.Currency: Choose between multiple currencies.Billing Cycle: Choose between Daily, Weekly, Monthly, or Yearly.Auto Renewal: Switch On/Off to enable auto renewal for the subscription.
Button
Text: Type your button』s text.Alignment: Align the button to the left, center, right, and justified.Icon: Choose between not display an icon, upload SVG, or add an icon from the icon library.Icon Position: Display the icon Before or After the text.Icon Spacing: Set the space between the icon and the text.Button ID: Add an ID to the button.
Additional Options
Redirect After Submit: Enter a URL to redirect after submit.Sandbox: Test out the functionality on a sandbox to ensure everything works properly. Switch On/Off. Click to learn more about setting up a Paypal sandboxSandbox Email Account: This is the address given to you by PayPal when you set up a sandbox with your developer account.Open Paypal In New Tab: Switch to Yes to open Paypal in a new tab.Custom Messages: Switch to Yes to type your own custom error message and Paypal not connected error message.
The Dynamic Request Parameter can populate a value that was transferred via:
Post Request (e.g. after a user is registered in an external CRM, a custom function could be coded to populate the user』s name onto the page.)Get Request (e.g a URL parameter could populate the value of the parameter onto the page)Query Vars Request (e.g can populate a field with data from any of the WordPress default Query Variables, such as the attachment ID.)
Note: WordPress maintains a list of reserved words that should not be used as request parameters. Doing so would result in a 404 Not Found error being returned. This is a WordPress function and is outside of Elementor』s control. See Reserved Terms list from WordPress.org documentation.
Advanced
Dynamic Widget Element (e.g. Subject Form Field)
Click on the Dynamic icon Site > Request Parameter: Selecting this will add Request Parameter in the Subject form field.Click in the Default Value field
Settings
Type: Select from Get, Post, or Query VarParameter Name: Enter your custom parameter (e.g. the_subject)
Advanced
Before: Optionally add static content before the dynamic elementAfter: Optionally add static content after the dynamic elementFallback: Optionally add default static content if the parameter does not exist.Use custom parameter as desired (e.g. Add custom parameter to button』s link)
The Footer Site Part section of the Theme Builder lists all Footers you』ve created, if any, giving quick access to add, edit, or delete any footer.
If no footers have been created yet, you will need to create one. Click Add New in the upper right corner of the Footer Site Part screen.
Once you』ve created at least one footer, you will be able to manage them here.
Edit An Existing Footer』s Design
To edit an existing Footer, click the Footer label in the sidebar. This will open the Footer』s details dashboard.Click the Edit link in the upper right corner of the specific Footer you wish to edit. This will open the Elementor editor for that Footer.
Edit An Existing Footer』s Conditions
Click the Edit Conditions link in the bottom left corner of the Footer you wish to edit. This will directly open the Display Conditions editor for that Footer.
Note: The Dot Display in the upper left corner of the Footer indicates which site parts are live (has Display Conditions assigned to it), and which are merely drafts (no Display Conditions have been assigned). A Green Dot indicates a live Footer, while a Gray Dot indicates a draft Footer.
Note: The Instances label in the lower left corner of the Footer displays the specific instances in which this template is being used on the site.
Export A Footer
Click the Three Horizontal Dots in the upper right of the Footer you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.
Delete A Footer
Click the Three Horizontal Dots in the upper right of the Footer you wish to delete. Choose Delete which will open a Delete Part confirmation dialog box. Click Cancel if you change your mind and decide you don』t want to delete the Footer, or click Delete to confirm that you do wish to delete this Footer.
Rename A Footer
Click the Three Horizontal Dots in the upper right of the Footer you wish to rename. Choose Rename which will open a Rename Part dialog box. Enter the new name and click Change to complete the rename process, or click Cancel if you change your mind and decide you don』t want to rename this Footer.
In order to improve performance, we continue to focus on making fonts loading adjustments, and allow you to modify the default way Elementor loads Google Fonts.
Font-display property defines how font files are loaded and displayed by the browser. You can choose the loading method you wish using a designated control in your Elementor dashboard settings screen.
Google Font Loading Method Options
Go to Elementor > Settings > Advanced tab and change the Google Fonts Load to one of the options. From the dropdown menu, select from the following loading options:
Default – The font display strategy is defined by the browser.Blocking – Hides the text until the font has fully loaded.Swap – Use a fallback-font to display, until the font has fully loaded.Fallback – Hides the text for a minimal period and will use the font only if loaded within a few seconds.Optional – Hides the text for a minimal period and will use the fallback-font unless the font is already fully loaded.
Note: Font Awesome libraries loading options – In v3.1 we updated Font Awesome libraries to include font-display: block property by default as Font Awesome recommends to eliminate the effect of render-blocking processes.
The Elementor Mask Option allows you to add a mask to any element. Create stylish designs for any element you want like an image, video, Google Maps, and more using the preset shapes. Create your own masks in PNG or SVG formats and upload them for even more possibilities.
Option Controls
The mask options are found in the Advanced Tab of compatible widgets
Mask – Toggle this to enable the mask featuresShape – Choose one of the preset shapes– Circle– Flower– Sketch– Triangle– Blob– Hexagon– Custom (Upload a custom SVG path file)Image (When Custom is selected) – You may upload a custom mask to the media library using .PNG or .SVG format and apply the custom shape presetFit – From the dropdown menu, select from the following options:– Fit– Fill– CustomPosition – Select the mask position from the following options in the dropdown menu:– Center Center– Center Left– Center Right– Top Center– Top Left– Top Right– Bottom Center– Bottom Left– Bottom RightRepeat – Choose from the following repeat opinions for your mask:– No Repeat– Repeat– Repeat-X– Repeat-Y– Round– Space
By using the Text Path Widget you can attach your text to any shape! select from a predefined list of shapes or upload your own SVG shape, customize and style it as you want.
Widget Controls
The text path widget features the following controls:
Text – Enter the text you wish to be displayed or use the dynamic optionsPath Type – From the dropdown list, choose the path type. You may select from the following options:– Wave– Arc– Circle– Line– Oval– Spiral– Custom (Upload your own SVG path file)SVG (When Custom is selected) – You may upload a custom path to the media library using .SVG format and apply this to the text pathLink – Add your link URL or chose from the dynamic optionsAlignment – Chose the alignment for your textText Direction – Choose the orientation of your text Default, RTL, or LTRShow Path – Toggle this option to show your path
Style Options
Text Path
The text path has the following style controls. These control the container of your path:
Size – Set the size of the text path container using % or PXRotate – Set the rotation your container in degrees
Text Options
Typography – Set the font family, sizes, and style, or use the global typography controlWord Spacing – Use the slider to set the word spacing in %Starting Point – Use the slider to set the start point of your text on the pathColor – Choose the color for your text using the color picker or dynamic functions. Colors may be set for Normal and Hover classes.
Path
Control the appearance of the path using the following options. These options can be set for Normal and Hover classes:
Color – Choose the background color of your path using the color picker or global options
Stroke
Color – Choose the background color of your stroke using the color picker or global optionsWidth – Use the slider to set the stroke width in PX
What Are Post Types
Post Types are 「types of content」, grouped together in a structured way within WordPress.
The Default WordPress Post Types
Currently, there are eight default WordPress post types.
PostPageAttachmentRevisionNavigation MenuCustom CSSChangesetsUser Data Request
Most users are familiar with the two most common post types: Posts and Pages. Although similar, Posts are time-based listings while Pages are hierarchical in structure, with Parent > Child relationships. In addition, Posts make use of taxonomies such as Categories and Tags, while Pages do not, and Pages use Page Templates for display, while Posts do not.
What Are Custom Post Types
WordPress allows users to create their own Custom Post Types, often referred to as CPTs.
Some of the more common Custom Post Types you』ve probably come across include:
MoviesTestimonialsReviewsProductsEventsPortfolios
Each of these defines a 「type of content」.
The editing screen will look very similar to the default Post and Page editors, as shown in this example of a Movie Custom Post Type.
When might you need a custom post type?
A common use of a CPT is an e-commerce website. Products are a specific type of content that don』t fit into the Posts or Pages default post types. Products need to include many extra pieces of information, such as Price, Size, and Color.
Custom Taxonomies
Just as the Post Type uses Categories and Tags taxonomies to help organize posts, a Custom Post Type can use its own custom taxonomies. A movie review CPT, for example, might use Genre as a custom taxonomy, to categorize movies into groups such as SciFi, Romance, etc.
Because CPTs are separate from Posts and Pages, they can be displayed separately, organized by their own taxonomy categorizations, and filters
Creating Custom Post Types
To create custom post types in WordPress, you can write the code manually in your functions.php file (Example shown below).
Or, you can use one of the popular plugins designed to make creating Custom Post Types much easier such as:Custom Post Type UI
By utilizing the Theme Builder, you can create Single Post Templates and Archive Templates for your Custom Post Types and then set the display conditions accordingly.
Note: When creating Custom Post Types the option for 「Has Archive」 must be set to 「True」 in order to create Archive Templates in the Theme Builder.
Creating Custom Fields
Custom fields store extra information about the content. Just as a blog post has an Author field, and an Excerpt field, a Post or Custom Post Type might have several custom fields assigned to it.
With Elementor and custom fields you can create dynamic pages without the use of code. You can use one of the following most popular plugins designed to make the process much easier:
Advanced Custom FieldsToolset TypesPods
Elementor integrates directly with each of these plugins. Read more about each in the following articles:
Elementor and ACFElementor and ToolsetElementor and PODS
You can easily select your custom fields from any Dynamic Content list to display them anywhere you wish.
Note: If the Single Post template is not being loaded for your CPT, and it looks as though the Display Conditions are set up properly, check the template you are using for your CPT posts. Make sure the posts are using the Default template. If they aren』t, change them to Default and you may find that this solves the problem, allowing the Single Post Template to load properly for your CPT posts.
Read the full blog post
Introduction
When using the Text Path Widget, you have the option to select a custom SVG path. In this document you will learn how to create the custom path and upload it to your project. SVG paths can be created in one of the following ways covered below:
Create a path with design software such as Adobe Illustrator.Create a path with an online SVG path generator.
Guidelines for creating paths
When creating paths, you need to remember three ground rules:
The path you are creating needs to be a Path (not line, polyline, or circle…)Every path needs a starting pointThe path should be created from LTR (Clockwise)
Note: When creating a path from RTL, the text will be upside down.
Creating an SVG path with Adobe Illustrator
The process for creating an SVG path with Adobe Illustrator can be found below.
Create a New Artboard
Create a new Artboard in Ai from the File menu (For example, Artboard size – 250X250 px)
Create an Open Path
Create any path shape you would like by using the Pen tool (For example, the wave shape shown below)
Make sure the Stroke color is solid black (#000) and the Fill is set to noneCreate your path using the Pen tool. To create curves, click and hold down the left mouse button while dragging the Pen tool. You may adjust the curves by using the handlesClick the Esc button to end the path
Create a Closed Path
The steps for creating a closed path are the same as above with the exception of the following:
Create a Closed circle path by using the Ellipse tool.Select the closed path and decide on a starting point with the Direct selection tool.Choose a point and then click on the 「Cut path on selected anchor points」. This action will create a break at the desired place.Make sure the path is left open.
Reduce the Artboard
Reduce the unnecessary space, and make sure the Artboard size is the same as the path, using the following steps:
Click on the path using the Selection toolFrom the primary menu, find and select Object > Artboards > Fit to Artwork Bounds
The Artboard should look like the following example:
Export the Path
Export the completed path as an SVG file to your computer using the following SVG Options settings:
Style – Internal CSSFont – SVGImages – LinkObject IDs – UniqueDecimal – 4Minify – SelectedResponsive – Unselected
Creating a path using an online SVG generator
If unable to have access to design software, you can use an online generator to create your path. Follow the instructions provided by the source.
Example Resources
https://yqnn.github.io/svg-path-editor/
https://mavo.io/demos/svgpath/
Clean the Path
When creating a SVG path, the design software or online generator, may add unnecessary styles and attributes. You can remove these attributes with an online SVG cleanup tool. The reduction of attributes also reduces the SVG file size.
Example Resources
https://jakearchibald.github.io/svgomg/
Important: After cleaning the desired attributes, ensure the path is still correct / working. Sometimes after reducing too many attributes, the path will no longer work. Please use this cleanup method with caution.
Upload the Path File
Upload the finished SVG file to your text path widget. Add your text and styles as needed for your project.
