Elementor Pro is a powerful WordPress plugin that lets you create stunning websites with drag-and-drop, visual editing. Whether you are a beginner or a professional, Elementor Pro has everything you need to build any type of website, from landing pages to e-commerce stores.
In this blog post, I will show you how to design an awesome website with the latest version of Elementor Pro (3.12.3 as of April 2023). I will cover the following topics:
- How to install and activate Elementor Pro?
- How to use the new Loop Carousel widget?
- How to customize the header and footer with Theme Builder?
- How to create dynamic content with Dynamic Tags and Custom Fields?
- How to optimize your website for speed and performance?
How to Install and Activate Elementor Pro?
Before you can use Elementor Pro, you need to have Elementor Free installed on your WordPress site. You can download it from the WordPress plugin repository or install it directly from your WordPress dashboard.
To install Elementor Pro, you need to purchase a license from the Elementor website. You can choose from three plans: Essential, Advanced, and Expert, depending on how many sites you want to use Elementor Pro on.
After purchasing a license, you will receive an email with your login details and a download link for Elementor Pro. Download the plugin file and upload it to your WordPress site via Plugins > Add New > Upload Plugin.
Once uploaded, activate the plugin and enter your license key in Elementor > License. You can find your license key in your Elementor account page.
How to Use the New Loop Carousel Widget ?
One of the new features in Elementor Pro 3.11.0 is the Loop Carousel widget. This widget allows you to create powerful and repeating loop templates and populate each one with dynamic content.
You can use the Loop Carousel widget to display posts, products, testimonials, or any custom post type in a carousel format. You can also customize the layout, design, and functionality of each loop template.
To use the Loop Carousel widget, follow these steps:
- Create a new page or edit an existing one with Elementor.
- Drag and drop the Loop Carousel widget to your desired location.
- Click on the Edit Loop button to create a loop template.
- In the loop template editor, add any widgets you want to display in each loop item. You can use dynamic tags to pull data from your posts or custom fields.
- Adjust the style and settings of each widget as you like.
- Click on Save & Back when you are done with the loop template.
- In the Loop Carousel widget settings, choose the source of your loop items. You can select Posts, Products, Manual Selection, or Current Query.
- Filter and order your loop items according to your needs.
- Adjust the carousel settings such as slides per view, slides per group, navigation arrows, pagination dots, autoplay, etc.
- Style the carousel elements such as arrows, dots, overlay, etc.
How to Customize the Header and Footer with Theme Builder?
Another powerful feature of Elementor Pro is the Theme Builder. This feature allows you to create and customize any part of your theme, such as header, footer, single post, archive page, etc.
You can use the Theme Builder to create a consistent and professional look for your website. You can also use dynamic content and conditional logic to display different templates for different situations.
To customize the header and footer with Theme Builder, follow these steps:
- Go to Templates > Theme Builder in your WordPress dashboard.
- Click on Add New and choose Header or Footer as the template type.
- Give your template a name and click on Create Template.
- Choose a pre-made template from the library or start from scratch.
- Edit your template with Elementor as you normally would. You can use dynamic tags to display site logo, site title, menu items, etc.
- Click on Publish when you are done with your template.
- In the Publish Settings window, choose where you want your template to be displayed. You can select Entire Site or use conditional logic to target specific pages or posts.
- Repeat the same steps for creating a footer template.
How to Create Dynamic Content with Dynamic Tags and Custom Fields?
Dynamic content is content that changes according to different factors such as user behavior, location, time, etc. Dynamic content can make your website more relevant and engaging for your visitors.
Elementor Pro allows you to create dynamic content with two features: Dynamic Tags and Custom Fields.
Dynamic Tags allow you to insert data from various sources into your widgets, such as post title, site logo, current date, etc. Custom Fields allow you to add your own data to your posts or pages, such as ratings, prices, locations, etc.
To use Dynamic Tags and Custom Fields with Elementor Pro, follow these steps:
- Create or edit a post or page with Elementor.
- Drag and drop any widget that supports dynamic content, such as Text Editor, Image, Heading, etc.
- Click on the Dynamic icon next to the widget setting that you want to make dynamic.
- Choose a dynamic tag from the list of available options. You can filter the tags by categories or groups.
- Adjust the settings of the dynamic tag as you like. You can also use fallback values in case the dynamic tag is empty.
- To use custom fields, you need to create them first using a plugin like Advanced Custom Fields or Pods. Then, you can choose the Post Custom Field dynamic tag and select your custom field from the dropdown list.
How to Optimize Your Website for Speed and Performance?
One of the benefits of using Elementor Pro is that it helps you optimize your website for speed and performance. Elementor Pro has several features that can improve your site’s loading time and user experience, such as:
- Minify CSS and JS files
- Optimize assets loading
- Lazy load images and videos
- Use WebP format for images
- Use SVG icons instead of fonts
- Use custom breakpoints for responsive design
- Use Elementor’s Hello theme or another lightweight theme
To optimize your website for speed and performance with Elementor Pro, follow these steps:
- Go to Elementor > Settings > Advanced in your WordPress dashboard.
- Enable the option to Minify CSS Files and Minify JS Files. This will reduce the size of your CSS and JS files by removing unnecessary spaces and comments.
- Enable the option to Optimize DOM Output. This will reduce the number of DOM elements on your page by removing unused wrappers and classes.
- Enable the option to Load Font Awesome 4 Support. This will load only the icons that you use on your page instead of loading the entire Font Awesome library.
- Enable the option to Load Font Awesome 5 Support. This will load only the icons that you use on your page instead of loading the entire Font Awesome library.
- Enable the option to Load Eicons Support. This will load only the icons that you use on your page instead of loading the entire Eicons library.
- Enable the option to Load Experiments. This will allow you to use experimental features that can improve your site’s performance, such as Improved Asset Loading and Improved CSS Loading.
- Go to Elementor > Tools > General in your WordPress dashboard.
- Enable the option to Lazy Load Images and Lazy Load Videos. This will load only the images and videos that are visible on the screen instead of loading them all at once.
- Enable the option to Replace Image URLs with WebP Format. This will convert your images to WebP format, which is smaller and faster than JPEG or PNG formats. Note that you need to install a plugin like Imagify or ShortPixel to generate WebP images on your server.
- Go to Elementor > Tools > Icons in your WordPress dashboard.
- Enable the option to Disable Font Awesome 4 Icons Migration. This will prevent loading Font Awesome 4 icons if you don’t use them on your site.
- Enable the option to Disable Font Awesome 5 Icons Migration. This will prevent loading Font Awesome 5 icons if you don’t use them on your site.
- Enable the option to Disable Eicons Icons Migration. This will prevent loading Eicons icons if you don’t use them on your site.
- Upload your own SVG icons or choose from Elementor’s library instead of using icon fonts. SVG icons are scalable and lightweight compared to icon fonts.
Conclusion:
Elementor Pro is a great tool for designing awesome websites with WordPress. It has many features that can help you create any type of website, from simple to complex, with ease and efficiency.
In this blog post, I showed you how to design an awesome website with the latest version of Elementor Pro. I hope you found it useful and learned something new.
If you have any questions or feedback, feel free to leave a comment below. And if you liked this post, please share it with your friends and colleagues.
Happy web creating! 😊