How to edit pages on your website

Finding the page you want to edit

The WordPress admin area will allow you to see all the pages on your website. After you log in, click on Pages on the left side of your screen. This screen will have several columns that will show information about each page; you can change which columns appear by clicking on Screen Options in the upper right-hand corner. 

✅ We recommend showing: AuthorDateSearch ExcludedFeatured imagenoindex?, nofollow?, and score. (Some of these options might vary depending on how we designed your site and which tools were utilized.)

  • Author: who originally created the page
  • Date: when the page was published or last modified
  • Search Excluded: if the page is excluded from the search feature on your website
    Note: this does not indicate if the page is excluded from Google search results, only if the page will not be able to be searched directly from your website.
  • Featured image: typically set to a default, high-quality image of your logo
  • noindex? and nofollow?: SEO settings that tell Google not to index a page for searches (typically used for things like Thank You pages or other pages that you only want to appear after someone has taken a specific action on your page)
  • Score: a basic SEO score assessing how your page compares to best practices about length, naming conventions, etc.

If you have a lot of pages, you may struggle to find the one you want, so there are a few ways to locate the page you’re looking for. 

Folders

We typically add a folder element to your Pages navigation. This allows us to organize your pages into folders, which can make it easier to find particular pages later. 

Search 

There is a search option in the upper right-hand corner of the screen. Results for this search function are a bit hit-or-miss, so you’ll want to keep your search query simple; we recommend just the first word or so of your page title for the best results. 

Helpful Quick Edit options

If you hover over the page name, you’ll see the Quick Edit option. This is an easy way to change the settings that are displayed in the columns on the Pages tab, as well as a few others.

Utilizing parent and child pages

Let’s say you have an About page, but you also have a page you’ve called Our Mission, and you want the URL for that page to say about/our-mission, you would do this using parent and child page settings

You’ll see a field in the Quick Edit screen that says Parent, followed by a drop-down menu. All your pages will appear in this menu, so, for our example, you would find the About page and select that, making the Our Mission page a child of the About parent. 

How to order your pages

You can use the Order feature to determine the order your pages show up in the backend on WordPress. By changing the number next to Order, you can change where a page appears in the list of all pages.

Note: The order runs 0, 1, 2, 3, etc., so the page that is given 0 will appear at the very top of the list. 

Using the WordPress Page Editor 

If you click on the title of a page, you will be taken to the Page Editor screen. This is not where you will edit the actual appearance of your page, but you can change some important settings here, including SEO settings. You’ll see a lot of overlap on this page and the items you can change via the Quick Edit function.

🚨 Caution: Do not click on the Back to WordPress Editor button at the top of the page. This will override the styling we’ve used to build your website and erase the page. If you click on this button, you’ll be given an alert that proceeding may break the page. If you accidentally do this, all is not lost: we will be able to restore your page. You may also be able to restore it by clicking Edit with Elementor, but it’s always better to avoid this button.

How to edit with Elementor

Back on the main Pages screen, you can hover over a page title and select Edit with Elementor to make changes to the layout, appearance, and content of your page. (You can also click Edit with Elementor on the WordPress Page Editor screen.) Once you click on this, you’ll be taken into the Elementor view of your page.

Editing individual elements

If you want to change an element on your page, such as a heading, you would move your cursor over that element and click on the pencil icon that appears at the upper right-hand corner of the box holding that element. (Clicking and holding this icon will allow you to drag and drop the element elsewhere on the page. We’ll talk more about moving elements later.) When you click on this icon, a sidebar will appear, allowing you to change a number of different features of your element. 

Every element sidebar will display three tabs: ContentStyle, and Advanced.  

  • Content: where you can change text, images, links, alignment, HTML tags, etc.
    Note: we’ll go into HTML tags more in another part.
  • Style: where you can change the aesthetic settings like colors and fonts
    Note: there’s more information about this in the next part.
  • Advanced: where you can alter margins, padding, and more
📝 A note on padding vs. spacer elements

We will almost always recommend using padding as found under the Advanced tab instead of the spacer element. Both are methods for adding some space between your elements, but spacers will tend to add more “weight” in terms of your website’s performance. 

To add or change padding, simply find the Padding section under Layout and choose the metric you’d like to use to measure your padding: pixels (px), percentage (%), view width (vw), etc. Then you can change the values in the the four boxes to the left.

Note: By default, the link icon to the right of these value boxes will be connected (values are linked), meaning the values will be changed uniformly. If you want to change the padding on one side of the element only, you can click the link icon and turn it off (link unconnected), allowing you to make changes to one value only. 

Adding elements

You can add elements by clicking on the plus icon in the upper left next to the Elementor logo. You’ll be given a menu of widgets to select from, but these widgets will not be formatted to match the existing widgets on your page. 

✅ We recommend using Duplicate to add widgets

If your page already has a styled element that you’d like your new element to resemble, we suggest duplicating the existing element instead of adding a new widget. This ensures that all the formatting and styling will match the rest of your website. To duplicate an element, simply find the existing element you’d like to imitate, click on the pencil icon, and select Duplicate. This will create an identical element which you can then edit.

Another way to ensure design fidelity across your site is to use global widgets. After clicking on the plus icon, you can select the Globals tab to view any global widgets you may have. These would be widgets that are styled to match your site design, and making changes to your global widgets will change all the widgets of that kind across your site. 

Deleting elements

In the corner with the pencil icon, you’ll see an X. Selecting this will delete the element from your page. You can also right-click on the pencil icon and select Delete from the menu.

Editing containers (sections)

The different sections of your page are called containers. You are able to edit these in Elementor in a way that is very similar to editing elements. When your cursor is over a container, there will be some options displayed in the center of the top of the container. The six-dot icon (this icon looks like two ellipses stacked on top of each other) will allow you to edit the container as a whole. 

Similar to the elements, you will see three tabs: LayoutStyle, and Advanced. If you’d like to change the space between all the elements in a container, you will want to find Gap between elements in the Layout tab. Here you’ll be able to adjust the padding between all the elements in a container at once.

🚨Caution: Other than making minor changes to the space between elements or something similar, we recommend leaving most of the container settings alone. They’ve been set during design and development and making changes to these settings can have unintended impacts on your website.

It is possible to have a container within a container, but we will likely have avoided this when we designed your website since it can cause performance issues. You can move an entire container around your page by clicking and holding on the six-dot icon and dragging the container to a new location.

The bottom of the page will also display options for adding a new container, but, again, we recommend duplicating existing containers instead. This will make it easier to match styling than adding a new container from scratch.

Using the Structure navigator to move elements

It’s also possible to move any element around the page by clicking and dragging, but this can be difficult to do precisely. If you ever have an element that you are struggling to get to the right place, you can click on the structure icon (this is the right-most icon next to the Elementor logo in the upper left-hand corner of the screen). This will open a navigator window on the right side that shows the layout of all of your elements. 

The structure navigator looks similar to a file tree and will show your elements as they are organized on your page. It can be a lot easier to find and move a tricky element here than by the drag-and-drop method. 

You can also name sections so it’s easier to navigate, and the sections you aren’t editing can be collapsed so the navigator is not so full. 

Was this helpful?

Thanks for your feedback!

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents