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…
- Navigate to the page with the hero header image you want to replace.
- Click the edit page tab.
- Place your cursor in the hero header headline.
- 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.
- Select the Advanced Columns link in the breadcrumbs.
- The right-hand block sidebar now shows the settings for the active block, Advanced Columns.
- Scroll down in the block settings and find the Background Image tab. If the tab is closed, click the down arrow to open it.
- There are two buttons side by side, Select Image and Remove. Click the Select Image button.
- A dialogue opens that enables you to select an image from your media library or upload a new image.
- 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.
- 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.
