Popup Button

Editing your website

This guide covers the basics for making minor edits to your website. If you need major edits, or if you get stuck or aren’t sure about something, don’t worry—reach out to me for help rather than spending time guessing or risking mistakes.

Table of Contents

Don't Click WordPress Updates

You may see notices prompting you to update WordPress, themes, or plugins. Please don’t click these updates or enable plugin auto-updates. Updates should be handled as part of a planned maintenance process, as unreviewed updates can cause errors or break the site. Most clients have me manage updates for this reason—if you’re unsure, please feel free to reach out!

Keep Your Domain & Hosting Current

Keeping your website secure and uninterrupted starts with making sure your domain and hosting are up to date. I recently had a client lose their domain because their renewal wasn’t paid — it was released, purchased by someone else, and cannot be recovered. I want to help prevent this from happening to anyone else. Think of your domain and hosting like a phone number or utility service: if the bills aren’t paid, your site stops working.

A website relies on two main accounts: your domain (your website name) and your hosting (where it lives).
 

Here’s a quick checklist to keep your website safe:

  • Know when payments are due, and set a reminder to check and pay them on time each year.
  • Know which companies you use for domain registration and hosting, and which email addresses are tied to those accounts.
  • Confirm auto-renew is on and that your credit card on file isn’t expired.
  • Keep your login credentials in a safe, accessible place.
  • Log in regularly to your accounts. You’re the only one who receives notifications, so checking ensures any issues are caught early.

Adding Users

To keep your site safe and fully in your control, always manage access carefully when giving others permission to work on your website.

  • Never share your admin username or password
  • Create a separate user account for each person so access can be removed at any time
  • Assign the lowest role needed:
    Blog posts only > Author
    Full site control > Administrator (use sparingly)
  • Review and remove users you no longer need

Images & Accessibility

Never upload full-resolution images to your website! Keep your site fast by resizing images before uploading. When adding images to your website, it’s essential to optimize them properly to ensure fast loading times and accessibility for all users. Need tips for doing it right? Check out this guide that covers resizing, compressing, naming images, setting ALT tags, and making sure buttons are accessible in Elementor.

Images & Accessibility Guide

Blogging in WordPress (Gutenberg Editor)

While your site is built with Elementor, I recommend using Gutenberg (the default WordPress editor) for blog posts. It’s quicker and simpler — and your site’s global styles are already set, so your posts will automatically match your website’s design without extra tweaking.

*If your site wasn’t originally planned to include a blog, I would need to build the blog functionality—including the blog index, single post template, and archives—before you can start publishing. Email me to get this set up.

You can create blog posts with Elementor if you prefer, but Gutenberg is the easiest and cleanest way to add new articles. Below are quick instructions to help you get started.

Start by Going to Posts → Add New:

  1. Enter your title at the top.
  2. Write your content in blocks:
  3. Hit Enter for a new paragraph.
  4. Click the + button to add new blocks. Each image, heading, text, links, lists, or embedded videos is its own “block.”
  5. Add a Featured Image (right sidebar → “Featured Image”).
  6. Choose or add a Category (right sidebar → “Categories”).
  7. Your Title and Meta description are generated, but you can look at the Yoast box to check what shows up in Search Results.
  8. Click “Publish” when ready — confirm again to make it live.

Here’s a link to the WordPress documentation to see all the blocks possible: Blocks List.

Fyi, you most likely don’t have comments turned on.

Some of the blocks that might be useful for blogging are Paragraph, Heading, Image, List, Quote, Button, File, Video, Audio, Table, Columns, Spacer, Separator, and Embed. If you add a block and it looks funny, let me know and I can help you tweak the styling.

Very Important! Don’t forget to respect Well-formatted HTML and Headings. 

Well-Formatted HTML & Headings

Proper heading structure is crucial for SEO and readability:

  • H1: Only one per page. This is the title of the page.
  • H2–H6: Use in order for subheadings and sections. Don’t skip over a level.

 

In Elementor, you can change the appearance of a heading without changing the tag:

  • Click the heading element.
  • Under Content, select the correct HTML Tag (H1, H2, H3…). If you are not sure, you can just pick “div”.
  • Under Style, adjust the font, size, and color to match the design. Usually, I’ve set Global Fonts that can be accessed through the Globe Icon.

 

Don’t forget

  • Use REM units for font size (1rem = 16px).
  • Avoid typing in uppercase; use Transform > Uppercase instead.
Select the HTML Tag under Content
Set the font from the Style section

Only One H1 Per Page

  • There should never be more than one H1.
  • The H1 should always be at the top and match the page content.
  • This ensures your page is optimized for search engines.

Elementor Basics

Elementor is a WYSIWYG (What You See Is What You Get) Editor.

How it works — Click Right > Edit Left

  • Click on the object on the right (the page) to select it.
  • Edit the content on the left in the toolbar.
Key toolbar features
  1. E button (top left)  Only thing you could need there is “Exit to WordPress”
  2. + button Add an object/element to the page
  3. Page Settings For best results, set page title, status, and SEO in the WordPress page editor before opening Elementor.
  4. Notes We don’t use notes.
  5. History This is where you go to revert changes if you’ve made a mistake.
  6. Page Name You can navigate to other pages
  7. Responsive View Preview your page on desktop, tablet, and mobile. If you edit content, check it at all sizes before going live.
  8. Structure (box) Like a layers palette – Opens a panel on the right to find specific sections quickly.
  9. Eye (Preview): Opens a new tab to preview the page.
  10. Publish Button: Click to save your changes. It changes color when edits are made.
Editing an existing Elementor Page/Post

Click [Edit with Elementor] to get to the Elementor view. To exit, click the top left E then “Exit to WordPress”.
Don’t click [Back to WordPress Editor] that does NOT take you back, it removes the Elementor formatting. You can always put it back by clicking “Edit with Elementor” again. 

Enter Elementor
Exit Elementor

Mistakes Happen – Here’s How to Fix Them

You will make mistakes—don’t panic! Elementor has multiple ways to fix errors:

  1. Undo / Redo

    • Use Ctrl + Z (Windows) or Command + Z (Mac) to undo instantly.

    • Use Ctrl + Y (Windows) or Command + Shift + Z (Mac) to redo if you went too far back.

  2. History Panel

    • Click the History button (clock circle with backwards arrow) to see all changes in the current session.

    • You can revert to any previous step, even several edits ago.

  3. Accidental Back to WordPress Editor

    • If you click Back to WordPress Editor, Elementor formatting might disappear.

    • Don’t panic! Click Edit with Elementor again and your content will return.

Copying and Pasting Text

Warning: Pasting text directly into Elementor can bring in hidden HTML, formatting, or styles from Word, Google Docs, or other sources. This can break your layout, change fonts, spacing, and colors unexpectedly, or even mess up your headings. Always clean your text first using the Code Tab or a plain text editor—don’t risk pasting raw content into the Visual editor.

Two ways to paste clean text:

  • Paste into the Code Tab in Elementor.
  • Use a text editor (TextEdit on Mac, Notepad on Windows, or StripHTML online) to strip formatting before pasting.

Editing Videos

Important: Before you add a video to your site, make sure it’s uploaded to YouTube or Vimeo. These platforms handle streaming, compression, and mobile playback. Uploading video files directly to your website will slow your site down, take up server space, and may cause playback issues.

Once your video is on YouTube or Vimeo:

  1. Click on the video element on the right side of your page.
  2. In the left panel under Content, paste the video’s URL.
  3. Check that it loads correctly in the preview.
  4. Click Update/Publish so your changes go live.

Spacing Edits: Margins & Padding

Padding: Space inside an element; it also extends the background color.

Margin: Space outside an element; it does not extend the background color.

Most common spacing adjustments:

  1. Top/Bottom margin or padding – creates space in between two sections. Use padding if you want the background color to continue; use margin if you want a clean break.
  2. Side padding – add at least 20px so that text and content don’t touch the edge of the browser window.

Linked values: Use the chain icon to keep spacing values uniform (all sides equal).

Responsive values: Use the screen icon to set spacing for desktop, tablet, and mobile. Always double-check spacing in responsive view before publishing.

Best practice: Adjust spacing at the section level (Advanced > Padding/Margin). The section is the full container for your content. This way you won’t have to dig deep into a column or interior element later to figure out where spacing was applied if you need to adjust it.

Boxed Width

  • Boxed width controls how wide a template appears.
  • Adjust under Layout > Width.
  • Use the screen icon for device-specific widths.
  • To make a section full-width, select Full-Width instead of Boxed.

 

Extra notes on box layouts:

  • Flexbox if your site is newer, you should have flexbox turned on — this gives you more modern layout control.
  • Direction arrows let you choose whether items flow horizontally (row) or vertically (column).
  • Responsive reordering — this is where you control how content “flops” or stacks differently on mobile vs desktop – try clicking the opposite arrow at mobile view
  • Justify content/Align items allows you to align items left, right, center, or spaced out.
  • Gaps: Spaces between content in a container

Responsive Changes

  • Always design at desktop first; changes cascade down to tablet and mobile.
  • Access responsive view via the top-center device icons in Elementor – your screen will change view width.
  • Use responsive controls to adjust padding/margins per device and reorder columns for mobile.
  • Best practice: Before adjusting spacing, check your current viewport. Switch back to desktop view, then set your margin or padding values there—these settings will cascade down to tablet and mobile. Only set values in smaller views if the change is meant to be specific to that device.

Hiding & Un-Hiding Elements

Elementor lets you show/hide content per device or on all devices temporarily:

  1. Click the element.
  2. Go to Advanced > Responsive.
  3. Toggle Hide/Show for each device or temporarily.
  4. You’ll see the item grey-out when it is hidden. I use this sometimes to save elements for later.