How to Edit a WordPress Website (3 Popular Ways)

Are you looking for how to edit a WordPress website? Creating a website on WordPress is fast and easy. You can do everything on your own and you don’t even need any prior coding experience. But a question you might be asking is how to edit a WordPress website. If you know how to use a page builder, then it becomes a lot easy to edit your WordPress Site. In this post, we’re going to learn how to edit a WordPress website.

WordPress has gradually become a trendy platform for creating websites. It was a simple blogging platform, and now it’s the most popular CMS in the world which is used to create 43% of all websites on the internet. WordPress was designed to make website creation easy but technical skill is needed in order to create a website.

Today in this post, we are going to learn how to edit a WordPress website using 2 very popular page builders. We are also going to see how to use the new Full Site Editor. Don’t know what these are? No worries, we’ll explain everything so that you can edit your WordPress website any way you want. Let’s get started!

What you need to edit a WordPress site

Before we understand how to edit a WordPress site, we need to know why you might need to edit a WordPress site and what you need to get started. First off, the following things are needed in order to get started:

• A domain and hosting for your WordPress Site: Although WordPress is open-source and totally free to use, you need to get a domain and hosting for your site. You can get a free domain and hosting too if you want but it’s better to purchase a hosting plan. Again, if you don’t want to purchase any domain hosting plan right now you can run your WordPress website on localhost too.
• Username and Password: After you create your WordPress website, it is important to remember your login credentials, username, and password. This will give you access to the backend or WordPress admin dashboard.
• A theme and a page builder: After you’ve covered the above things, you need to install a theme and a page builder to start editing your site.

These are basically the things that you’ll need in order to edit a WordPress website. If you want help installing WordPress or already have a WordPress site and need help migrating, you can contact your hosting provider for assistance.

Once everything is ready, visit your site’s URL and add “/wp-admin” at the end. Your URL should look like this “https://example.com/wp-admin” Note that the “s” at the end of HTTP indicates that you have SSL certification for your WordPress site. If you’ve purchased your domain and hosting from popular companies like Hostgator, then you’ll automatically be given a free SSL certificate for your website for one year.

After you’ve come to the login page, enter the username and password that you’ve set during the installation of your WordPress website. After you log in to your WordPress dashboard, you should see an interface similar to the screenshot below

This is the backend part of your WordPress website. This is where you can add, remove, and edit posts and pages. You can create new users, set user roles as an admin, manage comments, add media files, install themes and plugins, and tweak various settings of your WordPress website.

Since we just want to learn how to edit our WordPress website, we’re not going into much detail about the other options in the dashboard. So let’s get right into it.

Components to edit in a WordPress site

Before we start editing, it is a good idea to backup your WordPress website. This is important if your website is already setup and you don’t want anything to go wrong while editing. If something does go wrong, you will have a backup to rely on.

Now before we go on editing our WordPress site, there are a couple of things we need to understand. A WordPress site is composed of several different components. If we want to Edit a WordPress site, we have to understand the functions of these components.

• Homepage: This is the first page that your visitors see when they visit your website. The homepage consists of elements that best describe your business, profile, blog, etc.
• Pages: A website generally consists of multiple static pages. Normally these pages are called About Us, Contact Us, Team, etc. You can use these pages to display various side of your company.
• Posts: Posts are a bit different from pages. Posts are articles published on your blog. Unlike pages, posts are indexed in RSS. In WordPress, you can edit your post pages with the customization option given to you by the theme you’re using. You can also use page builders to customize the post pages as well.
• Sidebars: Sidebars are placed either on the left or right side of a website. These small sections consist of widgets, ads, links, etc.
• Menu: A menu is the most common component in a website which consists of navigational links to other pages of your site. It is usually placed on the top header of a website. Some websites also pace footer menu also
• Header and Footer: The header and footer are common components of all websites. These consist of your logo, and links to various pages of your website.

When editing a WordPress site, these components are generally customized. When we create a WordPress site, what we generally do is install a theme first. The theme gives us enough customization options to edit our WordPress site. But if you want to customize further, or if the theme isn’t providing you with the design you’re looking for, you can of course use other methods to edit your WordPress site.

Now with all that out of the way, it’s time to learn how to edit a WordPress website. To edit your WordPress site, you can use a type of plugin called “Page builders”. There are several page builders out there. We are going to use 2 very popular page builders to edit our WordPress website. We will also see how to edit a WordPress site using the Full Site Editor. We will be using the following page builders to edit a WordPress website

• Gutenberg
• Elementor
• WordPress Full Site Editing

Note that WordPress Full Site Editing isn’t supported on many themes right now. But in the future, this builder will be present in many themes.

How to edit a WordPress website with Gutenberg

Gutenberg is a block editor and the default page builder of WordPress. It is very popular and has come a long way since it was first released. Although there are mixed feelings when it comes to Gutenberg. A large number of people prefer using other page builders. But Gutenberg is actually flexible and becoming more powerful gradually.

Gutenberg has 300,000+ active installations and many popular themes support this page builder. The post-block editing was first released in December of 2018 and in 2021, the Full Site Editing was introduced into Gutenberg. Here are some of the features of Gutenberg in case you wondering:

• Drag and drop page builder
• Gutenberg is compatible with almost all plugins and themes
• Has a simple interface and is an extension of your WordPress admin panel
• No coding required
• Responsive and mobile friendly
• The default page builder of WordPress and also considered the future of WordPress
• Easily arrange blocks and move those around the page

Because Gutenberg is the default page builder, it is also compatible with so many themes and plugins. It supports the drag-and-drop feature, so you can drag and drop the elements and you can customize those as you wish.

In order to keep this tutorial short, we’re going to show you how you can edit a homepage and the post page. If you know this, you will know how to edit a WordPress website easily. So let’s get started.

How to edit a post in WordPress using Gutenberg

The first step is to install a WordPress theme that supports Gutenberg. As we said before, most of the themes support Gutenberg, so you won’t have a problem finding a theme. From your WordPress dashboard, go to Themes and click on “Add New” button.

Here you’ll find several free themes for your WordPress website. You can also click on the “Block Themes” tab to find the block themes. Although most of the themes support Gutenberg, be sure to check that before installing. For this tutorial, we’re using the free version of the Blocksy theme with a starter site.

First, let’s edit the post page. To add a post, go to Posts > Add New from your WordPress dashboard. If you have an existing post, go to your Posts option from your dashboard and hover your mouse over the post you want to edit, and click on “Edit”. Whether you click on Add New or Edit, it will take you to the editing section of that post.

Here you can already see a placeholder saying “Add title”. You can add a title to your post in this place. Next, in the body, you can place your post blocks

After adding the title, the next line you’ll see is “Type / to choose block”, clicking on this line will generate a text block. Now, what are these blocks? The way Gutenberg works is, there are several blocks given to you. You can pick any of these blocks and place them on your page. Then you can customize it the way you want. To add a block, you can click on the “+” icon on the right side of the top left corner of the screen. It will open up the Gutenberg blocks.

There are numerous blocks here and if you’re using some other plugins such as WooCommerce, you might see some more blocks from that plugin. You can simply drag and drop these elements into your post and then click on those to edit it.

Commonly the following Gutenberg blocks are used on posts:

• Heading
• Text
• Image and Video
• List
• Quote or Pullquote
• Button

You can use other blocks as well if you require. Basically what you can do is drag and drop your blocks to your page, then customize it.

After you’re done editing your post, you can simply click on the “Publish” or “Update” button on the top right corner of the screen to save your changes. That is how you can edit your WordPress posts with Gutenberg blocks.

How to edit pages in WordPress using Gutenberg

Using Gutenberg, you can also edit other pages of your WordPress website. If the theme you’re using is built with Gutenberg or supports Gutenberg, you’ll have an easier time editing your WordPress site.

If you want to edit your homepage, you can simply visit your site and then click on the “Edit” button to start editing. You can also go to the Pages from your WordPress and click on “Edit” on your homepage. Either way, select the page you want to edit and then get started. We are going to edit our homepage.

As we mentioned above, clicking on edit on any of the pages, will take you to the Gutenberg page editor.

If your homepage isn’t correctly set, then what you can do is, create a new page. Simply click on the “Add New” button from the Pages option and name the page home. Then click on the “Publish” button to make the page live. Next, go to Settings > Reading, and from the “Your homepage displays” option, select “A static page”. Then from the dropdown, select the page you just created.

This will set your new page as your homepage. Next, you can simply go to the pages section and hover your mouse over the page you just created and click on “Edit”.

We are using Blocksy, and we imported a starter site. All the elements that are on the pages were added by the developers. Like you edited your post page, you can also use the same technique to edit other pages as well. For example, on this home page, we have a background image and some text over it.

This is done by multiple columns and containers, then adding a background to the container. After that, you can add text or other blocks on top of that column or container. 

That is why we recommend importing a starter site and then replacing the existing content with your own. That’s a fast way to customize your website. But if you don’t have a starter site, you might have an empty page. In that case, you can build everything from scratch. Just open your Gutenberg block library and drag and drop elements to your webpage. Then edit it however you wish.

Also, when editing, make sure your blocks are responsive. Although the blocks and containers are very responsive, you can further customize your content to make sure they look good on mobile devices.

How to edit the header, footer, and the menu in WordPress

The next thing that we need to customize is the header, footer, and menu. The header editing in Gutenberg is only possible through Full Site Editing right now. So we will discuss that later on but for now, let’s see how the header can be customized.

The header typically consists of your site’s logo and a navigation menu. Some websites include buttons, social media links, and other elements too. To customize your header, you have to find what your theme used to build the header. For example, we are using Blocksy, and it has a custom header builder. To access it, go to Appearance > Customize from your WordPress dashboard.

You can also go to customize option if you’re viewing your site. On the top bar, look for the option called customize and it will take you to the same menu.

To access the header builder, click on the “Header” option from the customization menu on the left side. It will open up the header builder. The header builder also supports the drag and drop feature. It has 3 rows, the top row, the main row, and the bottom row. From the menu on the left, drag and drop elements onto any of these rows and it will apply the changes instantly.

You can also click on any of the element to customize it. For example, if you want to know how to change logo in WordPress, simply click on the “Logo” element that’s sitting on the left side of the main row. This will bring up options to change and customize your site logo.

That is how you can edit your logo and not only that, you can also edit other elements on your header this way.

Note: Not all themes provide the same mechanism for header customization.

The other thing that you might wanna customize here is the menu. You can’t edit your menu contents from the header builder. For that, you need to go back to your WordPress dashboard and go to Appearance > Menu. Here you’ll be able to create new menus, add posts, pages, custom links, and categories to your menu, select the display location of your menu, and much more.

We only have 4 pages on our site and all these pages are displayed on the main menu. But if you have more pages, you can select those from here, and click on the “Add to Menu” button to add the page to the menu.

After you’re done creating or editing your menu, visit your site and check if your menu is ok or not. If you see that your menu hasn’t changed, then go back to the header builder and click on the menu element. Then select the menu you want to show on your header.

And that is how you can edit WordPress header. The last thing that you can edit is the footer. Blocksy uses the same builder for the header and footer. If you click on Footer it will take you to the footer builder. Just like you edited your header, you can also edit your footer.

Simply drag and drop elements from the left side and drop them onto any of the rows. You can click on the elements to further edit it. You can also place your widgets here and if you click on these elements, you’ll be able to customize those as well. You can also place Gutenberg blocks on your widgets and design your footer the way you want. You can also manage your footer from Appearance > Widgets from your WordPress dashboard.

Now you know how to edit a WordPress website with Gutenberg. We’ve shown you how to edit the posts, pages, header, and footer. As you can imagine, if we showed a full-page design, it will make our post unnecessarily lengthy. So with this knowledge,, you will be able to edit your WordPress site with Gutenberg.

How to edit a WordPress website using Elementor

The first-page builder we’re using is Elementor. Elementor is one of the most popular page builders for WordPress. It has 5+ million active installations and 5,700+ 5-star ratings on wordpress.org. That makes Elementor one of the most widely used page builders in the world.

The way Elementor works is there are several blocks or “Elements” that you can drag and drop on your web page. You can then select the element and customize it according to your needs. Some of the features of Elementor are

• Drag and Drop editor
• 300+ Designer made templates
• 100+ widgets
• Responsive Editing
• Live editing
• Full website kits
• Page templates
• Global fonts and colors
• Global Custom CSS
• Icon library and much more,

Elementor is packed with several features. Although some of the most powerful features are packed into Elementor Pro, you can still use the free version of Elementor to create an astonishing website in WordPress

To edit your WordPress site with Elementor, you first have to install the plugin. From your WordPress dashboard go to Plugins > Add New and search for Elementor on the search bar.

We’re going to use the same starter site from Blocksy because it’s available for Elementor as well. Let’s first see how you can edit posts with Elementor. Go to Posts > Add New to create a new post. After you give a name to your post, you’ll find a button “Edit with Elementor” click on it and it will open up the Elementor page builder.

👉 Get Elementor NOW

The drag and drop system works almost like Gutenberg. You can click on the “+” icon on the screen to select a container structure. Then drag and drop the elements on the columns and then customize those.

The elementor post page will have social media share icons and a comment section pre-added. So you can only add images, videos, and texts, and be done with your post.

After you’re done editing click on the update button on the bottom left side of the screen. That is how you can edit your post pages with Elementor.

For editing your homepage or any other page with Elementor, you can follow the same technique. First, create a page from Pages > Add New. After you create the page you’ll see a button “Edit with Elementor”, click on it and it will open up the Elementor page builder.

If you have a starter site, you can simply select each element and replace it with your images to quickly edit your WordPress site. Or you can take containers, then add elements to them. Then click on those elements to customize it.

To change your logo or customize your header click on the icon located on the top left corner of the editor (3 horizontal lines). This will take you to the settings section. From here click on “Site Settings” and from here you can set your site name, description, logo. You can also change your site favicon as well.

How to edit WordPress site using Full Site Editor

Full site editing gives you the power to edit your entire website including the header, footer, and blog post templates. Previously we couldn’t edit the header and footer with Gutenberg, but now it’s possible to do so. With WordPress 5.9 the beta version of Full Site Editing was released. In the future update, the stable version of Full Site Editing will be released and this is considered to be the future of WordPress.

Keep in mind that not all themes support the Full Site editing, so before you decide to edit your site with Full Site Editor, make sure your theme supports it. For this demonstration, we’re using the default WordPress 2023 theme as it supports the Full site editor.

Before Full Site Editing, Gutenberg was mainly used to create blog posts and content pages. We’ve already seen how you can design blog posts and pages with Gutenberg, but it was unable to provide you with customization for the header and footer. With Full Site Editing, you can use blocks to design your actual theme templates, which gives you full control over your site and how contents are displayed.

The main objective of WordPress Full Site Editing is to give you the power to edit your entire WordPress website with Gutenberg editor. Now let’s take a look at what you can do with Full Site Editing:

• Header – Now with Full Site editor you can create a custom header for your website and put your menu items dynamically.
• Footer – Like the header, you can also create a custom footer for your website. You can show your site links in your footer and add other elements to it as well
• Single templates – You can now create templates for individual posts and pages
• Archive templates – Pages that display your collection of posts, custom posts, etc. can also be created with full site editing now
• Utility pages – You can design utility pages such as 404 pages.

You can also use global style to design your entire theme. This allows you to change your overall website colors, and typography as well. With that being said, let’s get started and learn how to edit a WordPress website with Full Site Editing.

To access the Full Site Editor, go to Appearance> Editor.

This will open up the Full Site Editing. If you’ve been using Gutenberg blocks, then this interface should be familiar to you but it has some changes. On the upper toolbar, you can see there are a few things that have changed.

• Block Inserter: The block inserter lets you add Gutenberg blocks to your website. Along with new blocks, you can also insert various premade designs known as patterns.

• Tools: Lets you choose between editing or selecting a block. You can choose the select block, then click on the block you want to edit then hit “Enter” on your keyboard, to go to editing.
• List View: List view lets you see the blocks that were used to build your page. This feature is especially useful if you want to know the structure of your webpage.
• Templates: The name of the template you’re currently editing is displayed here.

• View: This lets you view your site in Desktop, Mobile or Tablet resolution. You can also view your site from here to see how you’re webpage is looking.
• Settings: Displays template or block settings in a sidebar
• Styles: Allows you to customize the appearance of specific blocks for the whole site. You can also choose global colors and typography options for your site.

You can insert a Gutenberg block and customize it like you normally do with Gutenberg. You can also select a pattern and then customize it.

To edit your header, you can simply select the header with your selection tool, then start editing. To upload your custom logo, click on the logo block and upload your logo or select your logo from your media library. You can also change your site title from here. 

To customize your menu, simply select the menu, and choose your site menu from the settings. You can also add custom links by clicking on the ‘+’ icon and typing the name of the page. Then select the link and paste in the URL.

Finally, in the Styles tab, you can customize your site’s global colors and typography. You can also customize the site layout from here and add different Gutenberg blocks.

That is how to edit a WordPress website with Full Site Editing. Currently, the Full Site Editing is in the beta phase but soon a stable version will be released. It is said to be the future of WordPress block editing, so if you wanna give it a try, you can certainly do so. But if you want to use this for a website, you should wait until the stable version is released.

Conclusion

One of the best features of WordPress is the ability to edit and customize your site the way you want without coding. There are several page builders that you can use but its best to use the builder you’re more comfortable with. We’ve shown you how to edit a WordPress website with 3 different builders. Although the Full Site Editing is an extension of Gutenberg, but its still worth showing because it is said to be the future of WordPress block editing.

You can use Elementor, WP Bakery, Beaver Builder, etc. to edit your WordPress site. These builders are very popular and give you the ability to edit your WordPress site without coding.

So which page builder do you use to edit your WordPress site? Let us know in the comments below and feel free to ask anything. We’re always happy to help.