WordPress editing happens in two places: the dashboard and the live page

When you log into WordPress, you land in the dashboard — a control panel where you manage everything behind the scenes. To actually edit what visitors see, you click into individual pages or posts, or you use the block editor, which shows you a live preview of your changes as you make them. Most edits happen in one of these two places, and neither requires you to write code or touch the browser's developer tools.

The block editor is the main way WordPress lets you change text, images, and layout. It replaced the older "classic editor" in WordPress 5.0 and works by letting you add and arrange blocks — self-contained pieces like paragraphs, headings, images, buttons, and columns. Each block has its own settings. You drag blocks around, delete them, or duplicate them without touching HTML.

If your site uses a page builder plugin like Elementor, Divi, or Beaver Builder, you get a different interface that often feels more visual and drag-and-drop. The principle is the same: you are arranging content blocks, not writing code.

Key Takeaways

  • Log into your WordPress dashboard, find the page or post you want to change, and click Edit to open the block editor.
  • Add, remove, or rearrange blocks of content using the block menu on the left side — no code required.
  • Change text, colors, spacing, and images by clicking on a block and using the settings panel on the right.
  • Click Preview to see your changes before you publish them, or use the browser's developer tools to inspect how your edits affect the page layout.
  • If your site uses a page builder plugin, the editing interface looks different but works the same way: drag blocks, change settings, preview, and publish.

Logging in and finding the page you want to edit

Go to yoursite.com/wp-admin and enter your username and password. You land on the dashboard. On the left sidebar, click Pages to see all your pages, or Posts to see all your blog posts. Find the one you want to change and click its title.

The page opens in the block editor. You see your content in the middle, a block menu on the left, and a settings panel on the right. If the right panel is not visible, click the gear icon or the three dots menu at the top right and make sure the settings panel is turned on.

If you want to edit something you see on the live site but are not sure which page it is on, use your browser's developer tools: right-click the element, select Inspect, and look at the HTML to find the page ID or post name. Then search for that in the WordPress dashboard.

Adding and editing text and headings

Click anywhere in the text area where you want to add or change words. The cursor appears and you can type. To change how text looks — make it bold, italic, a different color, or a larger size — select the text first, then use the toolbar that appears above it or the settings panel on the right.

To add a new paragraph or heading, click the plus icon between blocks, or press Enter at the end of a line and start typing. A menu appears showing block types. Click Heading to add a heading, or Paragraph to add regular text. You can set the heading level (H1, H2, H3, and so on) in the settings panel on the right.

To delete text or a block, click on it and press Delete or Backspace. To move a block up or down, click the up or down arrow icon on the left side of the block, or drag the block by its handle.

Adding and replacing images

Click the plus icon to add a new block and select Image. A dialog opens where you can upload a new image from your computer, or choose one you have already uploaded. Click the image you want and it appears on the page.

To replace an image that is already there, click on it. A toolbar appears above the image. Click the image icon or the pencil icon to open the media library and choose a different image. To remove the image entirely, click it and press Delete.

After you add an image, you can change its size, alignment, and caption in the settings panel on the right. You can also add alt text — a description that screen readers use and that appears if the image fails to load. Always fill in the alt text field for accessibility.

Changing colors, spacing, and layout

Click on any block to select it. The settings panel on the right shows options for that block type. For text blocks, you usually see options for text color, background color, font size, and line spacing. For image blocks, you see size, alignment, and border options. For columns or group blocks, you see spacing and layout controls.

Click a color field to open a color picker. You can choose from your site's color palette, or enter a custom color code. Spacing controls let you add padding (space inside the block) or margin (space around the block). Layout controls let you set how many columns a block spans or how its children align.

If you want to change the same setting across many blocks — for example, making all headings the same color — you can edit the block styles in the WordPress customizer or in your theme's CSS file. But for one-off changes to a single block, the settings panel is the fastest way.

Previewing changes before you publish

Click the Preview button at the top right of the editor. A new window or tab opens showing how the page looks to visitors. Scroll through and check that text is readable, images are in the right place, and spacing looks good on both desktop and mobile sizes.

If something does not look right, go back to the editor tab and make changes. The preview does not update automatically, so click Preview again to see your new changes. Once you are happy, click Publish or Update to save your changes live.

If you are not ready to publish yet, click Save Draft instead. Your changes are saved but not visible to visitors. You can come back and edit more later.

Using browser developer tools to inspect your edits

After you publish, open the live page in your browser and press F12 (or right-click and select Inspect). The developer tools open at the bottom or side of the screen. Click the element picker icon (usually a cursor in a box) and then click on the part of the page you edited. The HTML for that element appears in the inspector.

Look at the HTML structure to understand how WordPress arranged your blocks. Each block becomes a <div> with a class name like wp-block-paragraph or wp-block-image. If something looks wrong — text is the wrong color, spacing is off, or an image is too small — you can see the CSS rules that are controlling it in the Styles panel on the right side of the inspector.

You cannot edit the live page through developer tools and have the changes stick — any edits you make there disappear when you refresh. But the inspector helps you understand why something looks the way it does, and it tells you which CSS class or ID you would need to change if you wanted to edit the site's stylesheet.

Frequently Asked Questions

Can I edit WordPress without logging into the dashboard?

Some page builders let you click "Edit with [Builder Name]" directly on the live page, which opens the editor without going to the dashboard. But you still need to be logged in. The dashboard is the main control center, so you will end up there eventually to manage settings, plugins, and users.

What if I accidentally delete something I need?

WordPress keeps a revision history of every change you make. Click the three dots menu at the top right of the editor and select Revisions. You see a list of saved versions. Click an older version to restore it, or just copy text from it and paste it back into your current version.

How do I know if my changes look good on mobile?

In the block editor, click the device icon at the top right to switch between desktop, tablet, and mobile previews. You can also open the preview in a new tab and resize your browser window, or use your browser's device emulation mode (press F12, then Ctrl+Shift+M on Windows or Cmd+Shift+M on Mac).

Can I edit the HTML directly if I know code?

Yes. In the block editor, click the three dots menu and select Edit as HTML. You see the raw HTML for the page and can edit it directly. When you switch back to the visual editor, WordPress converts your HTML back into blocks. Be careful — invalid HTML can break the page layout.

What is the difference between Pages and Posts?

Pages are usually permanent, standalone content like About, Contact, or Services. Posts are usually time-stamped content like blog articles, sorted by date. Both use the same editor, but posts appear in reverse chronological order and can be organized by categories and tags. Pages do not have those features.