• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Genesis User

Genesis User

Build your own website using a StudioPress theme and Genesis Blocks plugin..

  • Home
  • StudioPress etc
    • Genesis Blocks
    • StudioPress
    • Genesis Pro
    • WP Engine
  • Get Genesis for Free
  • Themes
    • Genesis Sample Theme
    • WP Engine Themes
  • Genesis Blocks
You are here: Home / Genesis Blocks / Website Builder / How do I Replace the text and images?

How do I Replace the text and images?

January 18, 2021 by PhilG

If you’ve followed along with the tutorials so far, you now have a good looking, fully functional website. But it’s filed with demo content and demo images.

Responsive font sizes for large headlines

Replacing text

To change any text. Triple click the text to select it, then type your own text to replace it.

Replacing the images

There are three types of images on the website you’ve built in these tutorials.

  • Hero header images.
  • Images in the page content.
  • Images in testimonial blocks and profile boxes.

If you want to know the image sizes used on the demo site read this page.

Replacing hero header images

Hero header images are the most difficult to replace. Having said that, it only takes a few clicks to replace them.

Replacing the hero header images…

  1. Navigate to the page with the hero header image you want to replace.
  2. Click the edit page tab.
  3. Place your cursor in the hero header headline.
  4. Look for the breadcrumbs at the bottom of your screen. The first link in the breadcrumbs is Document, and the second link is Advanced Columns.
  5. Select the Advanced Columns link in the breadcrumbs.
  6. The right-hand block sidebar now shows the settings for the active block, Advanced Columns.
  7. Scroll down in the block settings and find the Background Image tab. If the tab is closed, click the down arrow to open it.
  8. There are two buttons side by side, Select Image and Remove. Click the Select Image button.
  9. A dialogue opens that enables you to select an image from your media library or upload a new image.
  10. Experiment by dragging the focal point circle around and dragging the opacity slider left and right to see what settings suit your new header image.
  11. Make sure the image you upload is big enough, I use 1920px wide images for any full width images. And don’t forget to save your work before navigating away from this page.

Replacing images in the body of your webpages

To replace an image in the body of your web page…

  • When in edit mode, click the image.
  • A toolbar appears with two important buttons, upload external image button and the Replace Image button. Not all images have the Upload External Image button.
  • The Upload External Image button looks like a square anchor. Clicking this button replaces the hot linked image with an image in your image library. If you want to use the image from the demo page on your own site, this is the easiest way to do it.
  • If you want to replace the place holder image with one of your own, click the Replace Image button. A dialogue opens that guides you through the process.

Replacing images in testimonial and profile blocks

The Testimonials section on the homepage and the Meet Our Amazing Team section on the About Us page have a different type of image upload procedure. You can tell which images these are, because when you are editing the page, the image has a red circle with a white cross.

To replace an image with a red circle and a cross icon, click the image and the media library will open. You can then choose an existing image from your media library or upload a new image to replace the place holder image.

Filed Under: Website Builder

Download Genesis Framework for Free

The Genesis Framework and the Genesis Sample theme are now free for all to download and use.

Get Genesis for Free

Footer

Search This Website

Get Genesis for Free

The Genesis Framework is now free, find out how to get it here…

Get Genesis Free

Did you see these pages?

  • WP Engine Themes (From StudioPress)
  • Genesis Blocks Tutorials
  • Get Genesis for Free
  • Genesis Sample Theme
  • 10 Free Themes With WP Engine Hosting
Get 10 StudioPress themes free with WP Engine hosting.
Get 10 StudioPress themes free with WP Engine hosting.

Copyright © 2023 · Genesis User: This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc.
WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.