New Editing Blue Small Section Icons in Elementor
At first, your new website seems perfect. But after a while, you may have some small things you want to change or update. Even if you hired someone else to create your site, you can still easily edit with Elementor after the project has been completed.
Learn how to edit your website with Elementor with our simple and user-friendly guide.
What is Elementor?
Elementor is a WordPress plugin that allows web designers and developers to create their own custom website layouts with ease.
Elementor makes editing your website as easy and user-friendly as possible. All you have to do is log into your WordPress site, select the page or post, and click "Edit with Elementor".
The rest is up to you.
This plugin is available for free on WordPress's official website. It also provides support for responsive websites, which make it easier for mobile users to browse the site.
The Elementor plugin contains a drag-and-drop interface that enables users to easily customize their website in any way they want. It also includes more than 500 free digital assets and templates that are easy to edit and customize.
If you had your website built by Awebco, we most likely used Elementor to create it.
Doing this provides the website owner full control and access over the website, even without having to have any coding knowledge.
To learn how to edit with Elementor in WordPress, you first need to make sure you have Elementor on your WordPress site. If you don't have it already (you should), you can get the Elementor plugin through the WordPress plugin area and activate it if it's not already.
Once it is activated, you can begin using the Elementor visual editor and other features to customize your page content. You can define layouts, remove page elements, and use a variety of pre-made templates.
How to Customize Your Pages with Elementor
First, you'll need to find out what page it is that you would like to make edits to.
Log into your WordPress account and go to the 'Pages' section on the left-hand side of the screen.
Then you will need to select the 'Edit with Elementor' button when you hover over the page you want to edit.
Alternatively, you can click on the 'Edit' button, go into the page, and then select the big blue 'Edit with Elementor' button.
Editing Sections, Columns, and Elements
Before you start using the editor, you'll need to know the difference between a section, a column, and an element.
A section is like a container that holds your columns and elements. You create a new section by clicking the purple '+' symbol at the bottom of the page. The section dictates how wide and how tall the overall container can be. This is also where you can add background images that will sit behind the elements you add. A section will be a complete block of content you want to create.
A column is a percentage of the width of the container. When you click the plus to create a new section, it will ask you to select your structure. This is how many columns and how wide each column width is set to. You'll generally use between 1 and 4 columns, however you can have up to 6 columns in 1 section.
An element is a specific field of content you can drag and drop to build the actual website content. An element can be a text field, a heading, an image, a video, a website form, HTML blocks, dividers, animations, Facebook comments, Instagram feeds, menus, and so much more.
Using a combination of sections, columns, and elements, you can create a website that is entirely unique and functions exactly how you need it to.
Changing Font Size or Color
If you want to divert from your site's standard typography, you can always make changes to the font size, color, and beyond.
Under the "Style" tab, you'll simply want to look for the pencil icon to adjust these factors. You'll be able to change everything from the font family and the font size to the weight, color, line spacing, letter spacing, and beyond.
Customize the Colors
To get started, we'll look at how to use Elementor in WordPress to adjust the colors of your website elements, such as text color and background color.
Begin by going to Pages and finding the existing page you wish to edit. Once you find it, select the "Edit with Elementor" option, and click on the element you want to change the color of once the page loads.
You can also create a new section by going to the bottom of the page and choosing the + option.
Now, you can choose options like making a two-column layout. After you do this, you can drag and drop widgets into each column. You can now edit Elementor page content, like colors or fonts.
If you are trying to edit with Elementor, you can access colors through Elementor's editor menu. In the menu, choose "Default Colors." Now, you can look at the current color palette you are using on the site.
The next step in figuring out how to use Elementor for colors is to figure out the color you want. There are even more options available under "More Palettes." After you customize Elementor colors, they will show up in real-time on the page.
Change Your Fonts & Typography in Elementor
If you are trying to learn how to edit with Elementor in WordPress, you may also want to experiment with your fonts, font sizes, and decorations. Fortunately, editing your fonts is pretty simple.
To edit fonts globally, you should go to the menu and then select "Default Fonts." Then, you can choose the typography you want for the body of your text, the headings, and your accent text.
Global changes will affect the font for your entire site. If you want to just change the font on a single article or heading, you need to go into the widget to override the settings.
Adjusting the Backgrounds
To adjust the background of a section, first click on the section container (the blue tab with white dots in the top middle of each section).
Along with editing Elementor page content, you can also change the background. To switch the image, you just need to go to the "Background Overlay" settings. Once there, you can adjust the location and opacity of the background image. You can also access advanced features, like CSS filters.
Instead of changing the background globally, you can also adjust it for just a single section. You just have to click on the section you want. Then, adjust it by going to the "Style" tab.
How to Make a New Section in Elementor
If you are still figuring out how to use Elementor in WordPress, you may need help adding sections. Fortunately, learning how to add a new section in Elementor is fairly easy. In Elementor, sections are known as blocks.
Adding New Sections
To add a new section in Elementor, simply scroll to the bottom of the page and click the big + symbol.
After you click the + to add a new section, it will prompt you to choose the column structure of the new section.
Creating New Columns
Depending on the type of section you're trying to create, you can decide how many columns you will need and how they will be organized.
Whether you want to change a column or add a new one, you can adjust columns either by using the options menu in the Elementor panel or by simply right clicking the area you want to edit.
From this point, you can create a new column, duplicate a column, or even copy and paste a column to a different section of the page. Each column you make or edit will have options to change various aspects such as the layout, style, margins, padding, motion effects, and more.
Adding New Blocks
Blocks are essentially reusable chunks of content you can create or choose from the library. If you are on the home page, you can experiment by going to the Folder icon. Then, select "Blocks."
From here, you can easily learn how to add a new section in Elementor by picking the blocks you want. Elementor has more than 235 different kinds of blocks, so there are plenty of different options you can choose from. These pre-designed templates are basically Lego bricks you can use to customize and build your site.
You can make your life easier by saving your blocks for the future. After you learn how to customize Elementor blocks and are done making changes, you should rick-click on the block and choose "Save as Template." Now, you can find the same block in the "My Templates" section of the library.
Setting Margins and Padding
Another one of the things you can do when learning how to use Elementor is altering margins. For example, you can edit with Elementor and change your heading margin on the menu page. To do this, you have to start by selecting the heading.
After you select the heading, you should click on the "Edit" button. Next, choose the "Advanced" tab. Now, you can change the settings for the element.
The main reason to adjust the heading is if it overruns the edges of other content on your page. If this happens, you can shrink the margin for the heading to stop the font from overlapping.
Along with changing the margins, you'll also need to know how to make adjustments to the padding in Elementor.
What's the difference between margins and padding?
Margins are the amount of space on the outside border of whatever element you are working on.
Padding is the amount of space on the inside of the element you're editing that determines how close the interior content is to the border.
To change the padding, you'll want to edit the column under "Advanced" settings directly below where you change the "Margin". You'll be able to adjust the amount of space between the edge of the section's border and the content it contains.
In some cases, you can also use negative padding, which means that the shape or words will overlap the border creating an offset effect.
How to Publish Pages Through Elementor
Once everything on your page is perfectly set up, you need to learn how to publish a page with Elementor. When you are certain your page is completely done, you can select the "Preview" icon on the bottom panel. Then, you can look at the result and decide if you are ready to publish the page or not.
The final step in how to publish a page with Elementor is to click on the "Publish" button. Once this is done, you can select "Have a Look" to see what the published page looks like on the web. If you don't like what it looks like, you can always change it.
Instead of publishing your Elementor page content, you can save it for later. Whenever you edit a published or unpublished page, you can save your work as a draft. By doing this, you can avoid ruining a published page when you aren't done with your work yet.
To save your page, select the arrow next to the "Update/ Publish" button. Then, choose to save your page as a draft.
Handle Elementor Updates on Your Own or Work with Professionals
While it takes a little time to get used to using the Elementor text editor, blocks, and other widgets, learning to edit with Elementor is fairly easy. By using Elementor, you can quickly change your website whenever you want without having to learn a single line of coding.
Whether you edit with Elementor yourself or are looking for professional assistance, a dependable web design company like AWEBCO can make it easier! Reach out to our team if you'd like help with Elementor updates or other web design efforts!
Source: https://www.awebco.com/blog/how-to-edit-your-website-with-elementor/