Website Training | Stoke Design Co | Ballarat Web Design & Graphic Design Studio

The WordPress Dashboard is like the control center for your website. Once you log in, it presents you with an easy-to-navigate panel where you can add or edit content, view any updates, and customize the look and feel of your site. Think of it as the backstage area where you manage everything that your visitors see on the front end of your website. Even if you’re new to websites, the dashboard is designed to be intuitive and user-friendly, guiding you step-by-step through the process of creating and managing your online presence.

How to Change Images in Elementor:

Edit with Elementor:
- On the page or post edit screen, click the blue “Edit with Elementor” button at the top. This will open the page within the Elementor editor.
Locate the Image You Want to Change:
- Scroll through your page or use the Navigator feature (icon that resembles a hierarchy/tree) to find the image widget or element containing the image you want to replace.
Change the Image:
- Click on the image element/widget. The left sidebar will display settings related to the image.
- In the “Image” section in the left sidebar, click on the current image or the pencil icon.
- This will open the WordPress Media Library. Here, you can select a different image from your library or upload a new one.
- Once you’ve selected or uploaded your new image, click the “Insert Media” button.
Adjust Image Settings (Optional):
- You can adjust various settings like the image size, alignment, caption, and more from the left sidebar.
- Navigate to the “Style” tab if you wish to add some styling effects like opacity, CSS filters, hover animations, etc.
Save Your Changes:
- After replacing and adjusting the image, click the green “Update” button at the bottom of the left sidebar to save the changes.
Preview Your Page:
- Click on the eye icon at the bottom of the screen to preview the page and ensure the image looks as intended.
Exit Elementor:
- To leave the Elementor editor, click the hamburger menu (three horizontal lines) at the top left of the Elementor sidebar and then choose ‘Exit to Dashboard’.

Custom Post Types in WordPress are a way to introduce specialized content categories beyond the standard “posts” and “pages.” They allow you to define and manage unique content structures tailored to your website’s needs. For instance, if you run a book review site, instead of using generic “posts,” you could create a “Book Reviews” post type with custom fields like “Author,” “Publication Date,” and “Genre.” This feature enhances content organization, presentation, and functionality, offering a bespoke structure that caters to specific content requirements, making your website more organized and user-friendly.

How to Change Text Content in Elementor:

Edit with Elementor:
- Once you’re on the page or post edit screen, click on the blue “Edit with Elementor” button at the top. This will load the Elementor editor.
Find the Text You Want to Change:
- Scroll through the page or use the Navigator feature (icon that looks like a hierarchy/tree) to find the text element you want to edit.
Edit the Text:
- Click on the text element you want to change. This will bring up the text editor in the left sidebar.
- Make your desired changes in this editor. As you type or edit, you’ll see your changes reflected in real-time on the page.
Style and Customize (Optional):
- With the text element selected, you can also navigate to the “Style” and “Advanced” tabs in the left sidebar to adjust the text appearance, typography, color, spacing, and other settings.
Save Your Changes:
- After you’ve made your desired changes, click the green “Update” button at the bottom of the left sidebar to save your edits.
Preview or View Page:
- Click on the eye icon at the bottom of the screen to preview the page.
- If you’re satisfied, you can exit the Elementor editor by clicking the ‘X’ icon at the top left corner.
Return to Dashboard:
- If you want to go back to the WordPress dashboard, just click the hamburger menu (three horizontal lines) at the top left of the Elementor sidebar and then select ‘Exit to Dashboard’.

How to Change Images in Elementor:

Edit with Elementor:
- On the page or post edit screen, click the blue “Edit with Elementor” button at the top. This will open the page within the Elementor editor.
Locate the Image You Want to Change:
- Scroll through your page or use the Navigator feature (icon that resembles a hierarchy/tree) to find the image widget or element containing the image you want to replace.
Change the Image:
- Click on the image element/widget. The left sidebar will display settings related to the image.
- In the “Image” section in the left sidebar, click on the current image or the pencil icon.
- This will open the WordPress Media Library. Here, you can select a different image from your library or upload a new one.
- Once you’ve selected or uploaded your new image, click the “Insert Media” button.
Adjust Image Settings (Optional):
- You can adjust various settings like the image size, alignment, caption, and more from the left sidebar.
- Navigate to the “Style” tab if you wish to add some styling effects like opacity, CSS filters, hover animations, etc.
Save Your Changes:
- After replacing and adjusting the image, click the green “Update” button at the bottom of the left sidebar to save the changes.
Preview Your Page:
- Click on the eye icon at the bottom of the screen to preview the page and ensure the image looks as intended.
Exit Elementor:
- To leave the Elementor editor, click the hamburger menu (three horizontal lines) at the top left of the Elementor sidebar and then choose ‘Exit to Dashboard’.

How to Undo Changes in Elementor:

Use the Undo and Redo Buttons:
- While in the Elementor editor, look for the arrow icons at the bottom left of the screen.
- Click the left arrow (<) to undo the most recent change.
- Click the right arrow (>) to redo a change that you’ve undone.
Use Keyboard Shortcuts:
- Similarly, while in the Elementor editor:
  - Press Ctrl + Z (on Windows/Linux) or Cmd + Z (on Mac) to undo.
  - Press Ctrl + Shift + Z (on Windows/Linux) or Cmd + Shift + Z (on Mac) to redo.
Revert to a Previous Revision: If you’ve made multiple changes and want to revert to an earlier version of the page:
- In the Elementor editor, at the bottom left, click on the history icon (which looks like a clock).
- This will open the “History” panel showing a list of your recent changes.
- You can click on any point in the history list to revert back to that specific change.
Revert to an Autosaved Version:
- On the WordPress page or post edit screen (outside of the Elementor editor), look for the “Document” panel on the right.
- Under the “Status & Visibility” section, you might see a message saying “Autosave exists” with a link to “View the autosave”. Click on this link.
- You’ll be taken to a comparison screen where you can see the differences between the autosave and your current version.
- If you want to restore the autosave, click “Restore This Autosave”.
Save Frequently:
- As a best practice, always save your changes frequently while working in Elementor by clicking the green “Update” button. This ensures that if something goes wrong, you won’t lose too much of your work.
Exit Without Saving:
- If you’ve made changes that you’re not happy with and haven’t clicked the “Update” button yet, you can simply exit Elementor without saving. Just click the ‘X’ icon at the top left corner or close the browser tab. The changes you made in that session will not be saved.

Navigating Elementor’s Front-End Interface:

Accessing Elementor:
- From your WordPress dashboard, go to Pages or Posts.
- Click on the title of the page or post you want to edit.
- Press the blue “Edit with Elementor” button. This launches the front-end Elementor editor.
Elementor Sidebar:
- On the left, you’ll see the Elementor sidebar containing widgets, elements, and settings.
- At the top of the sidebar, there’s a search bar. You can type in here to quickly find specific widgets or elements.
Widgets Panel:
- By default, when you launch Elementor, you’ll see the widgets panel. This panel has various content elements, like text, images, videos, spacers, and many more.
- Drag any widget from the sidebar and drop it onto your page where you’d like it to appear.
Sections & Columns:
- The basic structure in Elementor involves sections and columns.
- Sections: The largest containers, represented by a blue border. Each section can contain multiple columns.
- Columns: Inside sections, represented by a dark gray border. Columns hold your content widgets.
Navigator Tool:
- Located at the bottom of the screen, the Navigator icon (resembling a hierarchy or tree) allows you to view and navigate through all your sections, columns, and widgets.
- It’s especially helpful for large pages or when elements overlap.
Page Settings:
- At the bottom left of the sidebar, click on the gear icon to access page settings.
- Here, you can adjust the page layout, style, and advanced settings, as well as view page revisions.
Responsive Mode:
- At the bottom of the Elementor sidebar, you’ll find the desktop monitor icon. Clicking it will allow you to switch between different device views (desktop, tablet, mobile) to see how your design looks on various screens.
Preview Changes:
- Use the eye icon located at the bottom of the screen to preview your page without the Elementor interface.
Save Changes:
- Always remember to click the green “Update” button at the bottom of the sidebar to save any changes you make.
Exit Elementor:

To exit the Elementor editor and return to the WordPress dashboard, click the hamburger menu (three horizontal lines) at the top left of the Elementor sidebar and select ‘Exit to Dashboard’.

Additional Options:

Clicking the hamburger menu at the top left of the sidebar also provides access to default colors & fonts, Elementor settings, and help resources.