Error 404 Site Part

Error 404 Site Part

The Error 404 Site Part section of the Theme Builder lists all Error 404 Templates you』ve created, if any, giving quick access to add, edit, or delete any Error 404 Template.

If no Error 404 Templates have been created yet, you need to create one. Click Add New in the upper right corner of the Error 404 Site Part screen.

Once you』ve created at least one Error 404 Template, you will be able to manage them here.

Edit An Existing Error 404 Design

To edit an existing Error 404 Template, click the Error 404 label in the sidebar. This will open the Error 404 Template』s details dashboard.Click the Edit link in the upper right corner of the specific Error 404 Template you wish to edit. This will open the Elementor editor for that Error 404 Template.

Edit An Existing Error 404』s Conditions

Click the Edit Conditions link in the bottom left corner of the Error 404 Template you wish to edit. This will directly open the Display Conditions editor for that Error 404 Template.

Note: The Dot Display in the upper left corner of the Error 404 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 Error 404 Template, while a Gray Dot indicates a draft Error 404 Template. 

Note: The Instances label in the lower left corner of the Error 404 displays the specific instances in which this template is being used on the site. 

Export An Error 404 Site Part

Click the Three Horizontal Dots in the upper right of the Error 404 Template you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.

Delete An Error 404 Site Part

Click the Three Horizontal Dots in the upper right of the Error 404 Template 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 theError 404 Template, or click Delete to confirm that you do wish to delete this Error 404 Template.

Rename An Error 404 Site Part

Click the Three Horizontal Dots in the upper right of the Error 404 Template 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 Error 404 Template.

Allowed URI Protocols

Allowed URI Protocols

From version 2.9.11 and on, Elementor will use the use wp_allowed_protocols() function to handle allowed URI protocols in links. These protocols are often used to create a deep-link (i.e. a direct link to an app via unique protocol) to a 3rd party application (such as mailto: or tel:)

If you add a custom link or a dynamic link (in any URL field) with a URI protocol that is not supported by WordPress such as waze:// etc., it will no longer work.

For more information, see the developers doc.

Single Product Site Part

Single Product Site Part

The Single Product Site Part section of the Theme Builder lists all WooCommerce Single Product Templates you』ve created, if any, giving quick access to add, edit, or delete any Single Product Template.

If no Single Product templates have been created yet, you need to create one. Click Add New in the upper right corner of the Single Product Site Part screen.

Once you』ve created at least one Single Product template, you will be able to manage them here.

Edit An Existing Single Product Template』s Design

To edit an existing Single Product Template, click the Single Product Template label in the sidebar. This will open the Single Product Template』s details dashboard.Click the Edit link in the upper right corner of the specific Single Product template you wish to edit. This will open the Elementor editor for that Single Product Template.

Edit An Existing Single Product Template』s Conditions

Click the Edit Conditions link in the bottom left corner of the Single Product template you wish to edit. This will directly open the Display Conditions editor for that Single Product template.

Note: The Dot Display in the upper left corner of the Single Product template 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 Single Product template, while a Gray Dot indicates a draft Single Product template. 

Note: The Instances label in the lower left corner of the Single Product Template displays the specific instances in which this template is being used on the site. 

Export A Single Product Template

Click the Three Horizontal Dots in the upper right of the Single Product template you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.

Delete A Single Product Template

Click the Three Horizontal Dots in the upper right of the Single Product template 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 Single Product template, or click Delete to confirm that you do wish to delete this Single Product template.

Rename A Single Product Template

Click the Three Horizontal Dots in the upper right of the Single Product template 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 Single Product template.

Product Archives Site Part

Product Archives Site Part

The Products Archive Site Part section of the Theme Builder lists all Products Archive Templates you』ve created, if any, giving quick access to add, edit, or delete any Products Archive Template.

If no Products Archive Templates have been created yet, you need to create one. Click Add New in the upper right corner of the Products Archive Site Part screen.

Once you』ve created at least one Products Archive Template, you will be able to manage them here.

Edit An Existing Products Archive』s Design

To edit an existing Products Archive Template, click the Products Archive label in the sidebar. This will open the Products Archive Template』s details dashboard.Click the Edit link in the upper right corner of the specific Products Archive Template you wish to edit. This will open the Elementor editor for that Products Archive Template.

Edit An Existing Products Archive』s Conditions

Click the Edit Conditions link in the bottom left corner of the Products Archive Template you wish to edit. This will directly open the Display Conditions editor for that Products Archive Template.

Note: The Dot Display in the upper left corner of the Products Archive 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 Products Archive Template, while a Gray Dot indicates a draft Products Archive Template. 

Note: The Instances label in the lower left corner of the Products Archive displays the specific instances in which this template is being used on the site. 

Export A Products Archive

Click the Three Horizontal Dots in the upper right of the Products Archive Template you wish to export. Choose Export to open a Save dialog which will save a .json file to your computer.

Delete A Products Archive

Click the Three Horizontal Dots in the upper right of the Products Archive Template 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 Products Archive Template, or click Delete to confirm that you do wish to delete this Products Archive Template.

Rename A Products Archive

Click the Three Horizontal Dots in the upper right of the Products Archive Template 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 Products Archive Template.

Elementor 3.0 FAQ

Elementor 3.0 FAQ

Elementor 3.0 is a major version and includes some substantial infrastructure changes. 

Before you upgrade to v3.0 (currently Elementor Core v3.0.11 and Elementor Pro v3.0.5), please make sure you backup your site, and if you』re using any 3rd party addon for Elementor, make sure it has compatibility for Elementor 3.0. Check the 3rd party addon』s changelog for any notes that indicate they』ve made it compatible or speak with the addon』s support channel if uncertain.

______

Q: What are the Free version features?

Site Settings, Global Fonts and Colors, as well as performance improvements, are all free features. For the full list, check out our changelog for the Free version.

Q: What are the Pro version features? 

There are several improvements beyond the Theme Builder, which are Pro-only features, check out our latest Pro changelog.

Q: Where can I find more information about the new Theme Builder?

The new Theme Builder documents and many others can be found on our Docs website.

Q: What is the difference between Theme Style and Global Colors?

Theme Style sets fallback style definitions for HTML tags like

, ,

How To Create a Link In Bio Landing Page for Instagram With Elementor

How To Create a Link In Bio Landing Page for Instagram With Elementor

The following is a transcript of the video shown above.

Hey there, it』s Aviva from Elementor. Today we』ll learn how to create a customized Link In Bio landing page for Instagram. 

As an Instagram user, you know how challenging it is not to be able to link from your individual Instagram posts and to be allotted just one link for your entire account. Instead of updating your Link In Bio manually every time you create a new post, why not use Elementor to create a customized Link In Bio landing page on your own site? This way you can customize the page to be consistent with your branding, and at the same time, keep the look and feel of Instagram. And by adding this link to your Instagram bio, you』ll bring more traffic to your own website. In addition, you can use your existing analytics to monitor specific stats such as how many visitors viewed your posts and other statistics about your audience. 

Although the majority of Instagram users access it via mobile, Instagram does have a desktop version as well, as some users prefer to access it from desktop. Similarly, we will create both desktop and mobile versions, paying special attention to optimizing the mobile version for the majority of users. 

In the WordPress dashboard, go to Pages and click Add New. Type in a title. I』ll use Link In Bio. Click Edit with Elementor. To access the page settings, click the gear icon on the lower left. For Page Layout, choose Elementor Canvas to remove the header and footer and start with a blank page. We』ll be creating a new header for our landing page and we don』t need a footer here at all. 

In Style, click the Color Picker and choose a light color for the page background. Now click the Plus icon to add a new section and choose a three-column section. 

Set the Content Width to Boxed > 940. This will keep the site width trimmed down similar to Instagram on desktop. 

In Style, change the Background Color to white. And under Border, click Solid and unlink the width so we can set just the Bottom Border to 1. 

In Color, choose a light grey to keep it subtle. 

In Widgets, drag in an Image Widget and click to choose an image. I』ll use the website logo and align it to the left. In Link, select Custom URL. Click the Dynamic Tags icon and select Site URL to link it to the home page. The image is pretty large so under Style, set the width to 65 pixels. 

For the second column, we』ll drag in another Image widget and choose the wordmark logo. We』ll also align this one to the left, and in Style, set the width to 180 pixels. 

For the last column, drag in the Button widget. Use your call to action text here. 

In Link, start typing the name of the destination page. Select it when it pops up. Then align the button to the right. 

In Style, set the Typography and Text Color. You may want to use the same typography and heading color that you use on your website to keep with your branding. 

Choose white for the Background and set the Border Type to Solid. Set the Border Width to one. To get sharp corners, set the Border Radius to zero. 

Now set the Button Hover state. Keep in mind that this will only function on our desktop site since there』s no hover state in mobile. Our Text Color, we』ll swap it to white. And choose a color for the Background Color. 

Now go to the first column and vertically align it to the middle. To apply this to the other two columns, just Right click, Copy and on each of the other two columns Right click, Paste Style. 

Go back to the first column and change the Column Width to 10% so that the image widgets are nicely aligned. Now we』ll hop over to mobile preview to make sure things are looking great on the mobile end. The logo and button are a little close to the edge so you can add some padding. Go to the Section Settings and in Advanced, unlink the padding and add 5% padding on the right and left. 

Since we don』t want to crowd the limited space available on mobile, select the second column not to display on mobile. In Advanced > Responsive click Hide on Mobile. The faded column and gray lines tell us that it won』t display on mobile. 

Now we need to bump the button up to the top so it will be horizontally aligned with the logo. Select the first column and change the width to 30% and then set the second column width to 70%. 

Click the arrow on the left side to hide the panel and preview our design. So far, looking good. Now it』s all packaged neatly at the top. 

Okay, let』s jump back to desktop. Right-click the section and Duplicate it. Go to Style and change the Background Color to Transparent. 

Right-click the second column and Delete it. Do the same for the last column. 

Now we are left with just one column. Select it and in Advanced, set the Padding to zero. Later when we add the posts, this will bring all the images to the edge of the column. Go ahead and delete the Image widget since we won』t be needing it in this section. 

Drag in a Heading widget and paste in some text about the site. You can use the same text as in your Instagram bio or other text if you prefer. Align it to the center. In Style, click the color picker and choose a color for the text. Set the Typography and as before you can use the same styling as on your website. 

Duplicate the first heading. Change the text to the site』s url and for the link click the Dynamic icon and choose Site Url. We』ll make a few changes to the styling. Change the Color and in Typography, the weight. Now go back to the first heading and add some padding to the top and sides. Everything is looking good in desktop. 

Now let』s head over to mobile to make some adjustments there. Select the column. Since we copied it from the first section, it kept the column width settings which we don』t need here. Delete the width to set it back to the default. Although it doesn』t display in the panel the padding for the heading is retaining the desktop settings, as you can see in the editor. Change it to better suit a mobile device. 

Let』s preview. Looks good so far. Now back to the desktop. 

Here』s where we can take advantage of the space we have on our desktop site and show off a large striking colorful image. We』ll highlight the most recent post here as a large number of followers are likely coming to find out more about it. In Widgets, start typing 「posts」 and select the Posts widget when it pops up. Drag it in. 

We only want to display one post here so change Columns to 1 and Posts Per Page to 1. 

We』ll edit the Image Ratio to crop the image a bit. We want to focus on the image so we』ll remove most of the text. 

Hide the title and remove the date and comments from the metadata. Also hide Read More. 

Now we』ll set which posts we see here. In Query Select > Term. Begin typing 「Link In Bio」 and select Categories > Link In Bio. Choosing the category ensures that only our Link In Bio posts will display on our Instagram landing page. 

Speaking of categories, here』s how to set them up in WordPress. In the WordPress dashboard, click Posts > Categories. In the Name field, type Link In Bio, then click Add New Category, and just like that, we』ve created our Link In Bio category. 

Click on any post to open it. For a photo grid to work properly on our Link In Bio page, we need to make sure that each of our Link In Bio posts has its own featured image. You can also update the category from here in any post. 

Okay let』s get back to our landing page. Now let』s style the Excerpt Text. We』ll align it to the center, change the color, and update the typography. 

Go back to Widgets and add a Divider. Choose the same light gray as the first sections border. We』ll need the Posts widget again to display our Instagram grid. To save us some work, Right-click > Copy on the Posts widget and Right-click > Paste on the Divider. This will insert it below. 

Now we just need to make a few adjustments. Instead of setting everything from the beginning, change Columns to three and choose a multiple of three for the Posts Per Page so we』ll always display a full grid. To get square images, change the Image Ratio to 1. Hide the excerpt. Now we only see the photos. 

Bring the images closer together in Style by adjusting the Columns and Rows Gap as well as the Image Spacing. 

Let』s preview our desktop version. It』s customized with our own branding but still conveys the experience of using Instagram. Perfect. 

Lastly we』ll move to mobile view and adjust it to bring the same experience to mobile. To keep it minimal, we』ll hide the large image we have on the desktop version as well as the divider by going to Advanced > Responsive and Hide On Mobile. 

Select the Posts. Set the Columns to three to turn it into a grid and the Image Ratio to one. We don』t need space around this section in mobile so select it and delete the padding. 

Our page is all ready so click Publish to take it live. Hide the panel to preview our Instagram landing page. Looks amazing. 

Click an image and see that it takes you straight to its blog post. Nice. 

Now every time you post a blog with the category, Link In Bio, your landing page will be updated just like that. 

The last step is to add the link to your Instagram bio. You can do this from desktop or mobile. Login to your Instagram account, click Edit Profile and type in your landing page url. Submit changes and you』re all set. Now when your followers click your Link In Bio, they』ll go straight to the landing page on your website where they can view any post in detail or get in touch with you. 

And there you have it. Now you know how to create a customized Link In Bio landing page on your own site and bring more Instagram traffic to it. So go ahead and create one for your needs. Whether it』s promoting eCommerce products or for other targeted calls to action, Elementor has you covered.

Register New Account

Register New Account

How To Sign Up For A Free Elementor Account

Some features of Elementor, such as using the Template Library, requires an Elementor account. If you do not have an account, you can create a free account very easily.

Go to https://my.elementor.comClick Create an Account linkEnter your email address and enter a passwordClick Create Account button

Tools

Tools

General

Regenerate CSS:  This will clear your CSS files and will generate new files when you make changes to your pages.

Sync Library: If you experience bugs with the library, you can sync it here.

Please note that the Regenerate CSS tool will not regenerate the files on the click of the button. Update the page to create a new file.

Replace URL

Enables the use of Elementor after a domain transfer (Also relevant for adding an SSL certificate to your site).

Version Control

Rollback Version: Revert back to any prior Elementor version. 

Become a Beta Tester: By enabling this, you will be notified whenever a new beta version is out. After enabling, go to Dashboard > Updates and click the Check Again button to make the latest beta version available to you. All subsequent beta update notifications will show up on the Plugins admin page as normal.

Note: Being a beta tester will keep you on the cutting edge of our releases, and help us monitor and fix possible bugs whenever we release a new beta version. We recommend only beta testing on a development or staging site, as beta versions are not stable and may break a live site. Beta testers enable us to test the compatibility of the upcoming versions in a variety of hosting configurations. Each beta tester will be running under a unique server setup, with varied combinations of plugins, themes, and custom code, all of which helps us understand which types of configurations may present issues that we can resolve before release. Beta testing is especially useful for website developers & designers, as well as plugin developers, as they are able to test the compatibility of their plugin or website with the upcoming version of Elementor. Beta user feedback plays an important role in our ability to improve Elementor.  Issues noticed by Beta testers have to be reported in the relevant Github thread.

Maintenance Mode

Choose Mode: Choose between Disabled, Coming Soon & Maintenance Mode.

Who Can Access: Choose who can view your content when one of these modes is active.

Choose Template: Choose a template that will be displayed when one of these modes is active.

Click to learn more about Maintenance Mode

Form Advanced

Form Advanced

Margin – Set the margin of the formPadding – Set the padding of the formZ-Index – Set the Z-index of the formCSS ID – Set the form IDCSS Classes – Set the form classes

Learn more about the Form Widget (Pro)