Before you get started creating your own pages with Elementor, you need to understand a few basic concepts. Firstly, you need to know about Elements. Also, you need to know about Custom Fonts and Icons. Then, you need to know how to drag and drop elements. After that, you can move on to more advanced topics.
Table of Contents
Elements
After you’ve installed Elementor and have made a page with some content, you can begin to add elements to the page. The interface works with a drag-and-drop principle. To add more than one element to the page, click on the “+” button and then drag them all into place. There are several ways to position your widgets, and you can also place them within columns.
To save a template in Elementor, you need to right-click a section and select “Save as template.” Once you have saved the template, Elementor will ask you to name it. You should give your template a descriptive name that reflects its purpose.
Custom Fonts
If you want to give your website a unique identity, you can use Custom Fonts in Elementor. This plugin has more than 800 Google Fonts and you can play with them to make your site look unique. In addition to using Custom Fonts, Elementor also offers a variety of free fonts that you can use.
Custom Fonts are great for a number of reasons. They can add style and weight variations to your design for a unique user experience. You can add more than one typeface to your website without having to make complex CSS changes.
Custom Icons
Using custom icons in your Elementor website is a great way to create a unique brand. The more recognizable your site is, the more likely it is to attract new customers and retain current ones. Creating custom icons is also a good skill to have, especially if you’re a developer.
The first step to creating custom icons is to create an account with Fontastic. This will allow you to easily create and import icons. Click the ‘Add More Icons’ link on the top menu bar. Click on the Modify Font tab and give the icon set a name. Once you’re done, save your settings and use the ‘Publish’ or ‘Download’ options to download your new icons.
Drag-and-drop elements
In order to use the drag-and-drop feature of Elementor, you must first click the header and drag it to the widget area. You can then click the “plus – +” button and change the structure of your page. For example, you can add a section or column at the top of the page.
In addition, you can drag and drop elements in the Elementor editor. The editor has three main building blocks: Sections, Columns, and Widgets. When you drag one of them, you’ll see it highlighted. Once you’re done dragging it, release the mouse button to drop it.
Sections
One of the features of the drag and drop elementor editor is its ability to add and delete sections easily. To create a new section, you can click the plus button or right-click the current section handle. To delete a section, click its delete icon. You can also copy a section and paste it somewhere else.
The right-click context menu also contains keyboard shortcuts to add and delete sections. Using these shortcuts makes it easier to add, delete, and rearrange sections without messing up the layout of the page. However, you should be careful when editing sections. Ensure that the spacing and position of your content is accurate.
Columns
One of the main features of Elementor is the ability to set up different styles of columns. By default, column styling includes padding, which can make your design look unbalanced. To fix this issue, go to the advanced tab in a section and click on the responsive tab. From here, you can reverse the column order.
You can also use keyboard shortcuts to do the same thing. The “Distance” variable controls how far the selected element is from the edges of the column. Using a positive value will move it away from the edge of the column, while a negative value will place it beyond the edge. This feature is useful for creating fancy effects.
Color palette
You can change the color palette in Elementor by using the Color Sampler feature, found in the Style tab. This tool will display changes in real time, and allows you to save a colour palette for reuse. The sampler is a helpful tool that will allow you to test different combinations of colours.
To add custom colors to your website, you must first edit a page in Elementor. Next, navigate to the Design System. This panel will include the Global Fonts and Colors. By default, the theme will prepopulate colors from the global palette. You can also add custom colors by using the color picker or by entering the hex code of the desired color.
