Divi is one of the most popular premium WordPress plugin and theme that allows a user to design and customize every part of the website. Divi Visual Builder lets you design beautiful websites, even without coding. By using this, it is not that hard to make changes or edit pages, even without a programming background. In this tutorial, you will learn how to edit your webpage with the Divi Visual Builder.
How to edit your webpage using the Divi Visual Builder
Step 1: Log into WordPress and once logged in, go to the page you want to edit and click the Enable Visual Builder icon on the top bar.
How to edit a text module using the Divi Visual Builder
Step 2: For editing text, you can do this by clicking on the edit COG. Formatting changes like text alignment, color, and font can be changed here. The first tab shows the content box, this is where you can change the text directly, under the body box. To save the changes made, click on the purple icon at the bottom of the page, and click save in the bottom right-hand corner. Don’t forget to click update on the WordPress page to save this.
How to replace images on your webpage using the Divi Visual Builder
Step 3: To replace images, hover your mouse over and a gray panel should appear with some icons in it. Click on the COG icon and a new panel with settings will open. look for the ‘Image” URL option and to change to another image, click on the upload button. Once done with the changes, click on the green tick, then click save.
Divi is a powerful and complete design framework that allows you to customize and design your website with easy functionality. This can be purchased from the Elegant Themes website. for $89.00 you can access this for a year, and $249.00 for lifetime access.
To know more about Divi Visual Builder, you may visit their site at https://www.elegantthemes.com/gallery/divi/
How to use the Elementor Editor
Elementor is an easy-to-use drag-and-drop WordPress Builder plugin that enables users to create and design beautiful websites, even without writing a single code. In this tutorial, you will learn how to create and edit pages, given you already have a WordPress website, using Elementor.
How to make edits on an existing page
Step 1: Log in to WordPress and once logged in, click the pages tab on the left side of the dashboard.
Step 2: on the Elementor Editor page, you’ll see two blocks of a customizer. On the left side, you’ll find Elements (1) and Global (2) tabs, that allow the user to change global settings and choose the content modules for adding and editing.
Step 3: there is a page layout that can be filled with the content modules on the right.
Step 4: To edit the page, click on one of the content sections that you want to edit. When you see the page encased in the thin blue frame, it means that the section is ready for editing.
Step 5: Once done with editing the page, click the save icon on the bottom left corner to save the changes.
Section Options:
Hover to see the available options.
- Edit Section-Click on the options icon to open the section editor on the left. Here you can view the section layout options, access section styles such as backgrounds, and borders, and apply advanced settings.
- Duplicate Settings-Click on this icon to clone the section on the page. This option will be helpful if you want to use the same style and content settings and when there is a need to create the same content block on the website’s page.
- Add Section-You can add a new section here if you’re planning to put more content on your web page.
- Save Section-Click on this icon if you want to save the section to the templates library. You’ll be able to use export and reuse it on any webpage.
- Remove Section-Click on this icon if you need to delete the section from your page.
Options for editing Content Modules
- Edit Widget-Click on the top right icon to proceed in editing the content module.
- Duplicate Widget-This option duplicates the content module with all the content and style settings and places it on the same section and column.
- Remove Widget-Use this option to delete the content module.
How to use the WordPress Gutenberg Block Editor
Gutenberg, also known as the WordPress Block Editor, has a completely different approach to content creation in the form of blocks. The block editor introduces a modular approach to pages and posts. Each piece of content in the editor from paragraph to headline and image gallery is its own block. WordPress Blocks can be added, arranged, and rearranged which allows WordPress users to create media-rich pages without workarounds, like shortcodes or custom HTML. The Gutenberg plugin is something that you can install on your site in addition to the core WordPress Block Editor.
Creating a new page or blog post using The Block Editor
Step 1: To create a new page or post, go to your WordPress Dashboard and click on the Posts>Add New icon. If you are creating a page, then go to Pages>Add New menu.
Step 2: The editor will ask you to create a title by default.
If you want to add something else, then you can click on the (+) button on the top left corner of the screen. After creating the first block, you can add more by clicking (+) You will see a list of blocks you can use. You can choose from this list or simply enter a keyword in the search box to find what you’re looking for.
Each block has its toolbar, which will help you quickly edit its style and create what you like.
You can easily group some blocks. For example, you create a section with information about your team with a photo and short text. Select the desired blocks with “Shift” and decide how you want to group these blocks—into columns or groups.
To take advantage of the Reusable Blocks feature, you must create a block that you will use frequently. Next, click on the three dots in the block toolbar and select “Add to reusable blocks.” Give this block a name. Now you can use this permanently.
To add such a block to a new page, click on the (+) icon as you add a new block and then “Reusable.” Select the required block.
If you use any plugins that extend the WordPress functionality, additional blocks from these plugins will appear in the Gutenberg editor.
