Shortcode allows website owners to insert HTML code in their content without using any coding knowledge. They are a great way for users to create an attractive website without having any technical skills.
The shortcode feature is built into Elementor and it makes creating websites easier and faster by giving you an option to add various kinds of content such as social media icons, pricing tables, contact forms, etc., in just one click.
This article will demonstrate how to easily add an Elementor shortcode to your WordPress site.
What Is Elementor?
Elementor is a popular visual page builder for WordPress that competes with Beaver Builder, Visual Composer, and the Divi Builder. Elementor is a WordPress plugin that is intended to be an all-in-one solution for website development and style.
Elementor allows you to create new web pages quickly and easily. Elementor’s basic version is free on WordPress.org, with more powerful packages available on the Elementor website.
What Is a Shortcode?
Shortcodes are tiny chunks of text enclosed in square brackets, such as [example], that represent a unique, predetermined piece of code that can be invoked on demand.
They are useful practically anywhere text can be put. Shortcodes, in essence, allow users to easily insert dynamic material into WordPress pages, posts, and so on.
Adding Elementor Shortcode
Getting Elementor shortcode
Assume you created a contact form using the WPForms plugin and want to display it on a page created with Elementor Page Builder. To do so, you’d need to first obtain the shortcode of the specific contact form you want to show.
Obtaining the shortcode for your contact form is a simple process. To do so, simply go into your WordPress Admin panel and then navigate to WPForms > All Forms.
Here you will find the shortcodes for all of the contact forms. If you cannot see the shortcodes, check the screen settings to see if the shortcodes column is enabled.
Embed contact form using Elementor shortcode
Go to wp-admin > Pages > Add New and select the Edit with Elementor button to create and modify a new page using Elementor.
To embed the contact form, we will use Elementor’s Shortcode widget. Therefore, let’s add the Shortcode widget to the website by dragging and dropping it.
Now, put the shortcode that you copied in the previous step into the Shortcode widget.
The contact form is now visible on the website. Finally, publish your page.
Adding the current year Elementor shortcode
To be able to add the current year shortcode, you must use Dynamic Tags, then select Current Date Time.
As you can see, the current date, time, and year are displayed. But we simply want to show the current year, not the date and time.
When you click on the title window again, the options menu will appear. You obviously have two options: date format and time format. Now, select Custom from the Date Format drop-down menu.
You will be presented with a sequence of seemingly random letters. The following table explains the meanings of the letters that appear in the custom table.
| Letters | Meaning | Example |
|---|---|---|
| d | Day of Month: Numeric, with leading zeros | 01–31 |
| j | Day of Month: Numeric, without leading zeros | 1–31 |
| s | The English suffix for the day of the month | st, nd or th in the 1st, 2nd or 15th |
| l (lower-case L) | Weekday: Full name | Sunday – Saturday |
| D | Weekday: Three letter name | Mon – Sun |
| m | Month: Numeric, with leading zeros | 01–12 |
| n | Month: Numeric, without leading zeros | 1–12 |
| F | Month: Textual full | January – December |
| M | Month: Textual three letters | Jan – Dec |
| Y | Year: Numeric, 4 digits | 1999, 2023 |
| y | Year: Numeric, 2 digits | 99, 23 |
| a | Time: Lowercase | am, pm |
| A | Time: Uppercase | AM, PM |
| g | Hour, 12-hour, without leading zeros | 1–12 |
| h | Hour, 12-hour, with leading zeros | 01–12 |
| G | Hour, 24-hour, without leading zeros | 0-23 |
| H | Hour, 24-hour, with leading zeros | 00-23 |
| i | Minutes, with leading zeros | 00-59 |
| s | Seconds, with leading zeros | 00-59 |
| T | Timezone abbreviation | EST, MDT |
| c | ISO 8601 | 2023-02-23T15:35:21+00:00 |
| r | RFC 2822 | Thu, 23 Feb 2023 15:35:21 +0200 |
| U | Unix timestamp | 1455880176 |
Elementor Shortcode: Conclusion
It’s that easy to implement an Elementor shortcode in WordPress. Elementor Shortcode widget can display a Twitter feed, a gallery, a website API, and many other things.
If you found this article of ours helpful, please leave us a comment. Support us by checking out other helpful articles.
