Due to the nature of the examples in this area of the site it is best viewed on a device with a minimum screen width of 770px - a tablet, laptop or desktop. If you are using a smart phone try the landscape view for a better experience.
Home > STEP ONE: Setting up a Search Engine Optimizable Coffee Shop website > Adding images to your Coffee Shop website

Adding images to your Coffee Shop website

Having completed the steps in the previous tutorial you can be confident that the images you have are not going to kill your SEO. I'm going to show you how to upload the 'header' image on to your website.

Having completed the steps in the previous tutorial you can be confident that the images you have are not going to kill your SEO. I'm going to show you how to upload the 'header' image on to your website.

After that you will be able to add/change other images on your website pages and start making the website look more like your website.

s SquareSpace Step by Step
  1. Click Pages
    Preonus Coffee Shop
    Coffee and Pastries
    SquareSpace replace image step one
  2. Click on 'Home' then click 'Edit'.
    Coffee and Pastries
    Preonus Coffee Shop
    SquareSpace replace image step two
  3. Press on the blue icon in the image, drag it down to increase the image height.
    Preonus Coffee Shop
    Coffee and Pastries
    SquareSpace replace image step three
  4. Increase the image height so it looks roughly like this:
    Preonus Coffee Shop
    Coffee and Pastries
    SquareSpace replace image step four
  5. Drag the 'text' in the middle of the image to the center both vertically and horizontally.
    Preonus Coffee Shop
    Coffee and Pastries
    SquareSpace replace image step five
  6. Next, Click on the banner image and then click 'EDIT SECTION'.
    Preonus Coffee Shop
    Coffee and Pastries
    SquareSpace replace image step six
  7. Click Background.
    Coffee and Pastries
    SquareSpace replace image step seven
  8. Click Replace. After that click Upload File.
    Coffee and Pastries
    SquareSpace replace image step eight
  9. Navigate and click on the image on your computer which was compressed then, click on 'Open'.
    SquareSpace replace image step nine
  10. To save the changes, click 'Save'.
    Starts With You
    Coffee Shop
    Coffee and Pastries
    SquareSpace replace image step ten

In WordPress the steps are as follow:

w WordPress Step by Step
  1. In the WordPress Admin, hover over 'Appearance' and click 'Customize'.
    Bluehost wordpress replace header image step one one
  2. Then, click Hero > Front Page Hero.
    COFFEE AND PASTRIES
    PREONUS COFFEE SHOP
    Prenous Coffee Shop
    ABOUT
    CONTACT
    Bluehost wordpress replace header image step one two
  3. Below the 'BACKGROUND' heading, click 'Options'.
    PREONUS COFFEE SHOP
    Bluehost wordpress replace header image step one three
  4. Click 'Change file'
    Bluehost wordpress replace header image step one four
  5. Click 'Upload file' and click 'Seclect files' button
    Bluehost wordpress replace header image step one five
  6. Here, navigate to wherever you stored your images on your computer. Then select the image and click 'Open'.
    Bluehost wordpress replace header image step six
  7. For now ignore the 'Alt Text' box (1) - we'll discuss alt text later in the course. Just click 'Choose file' button.
    Bluehost wordpress replace header image step seven
  8. Click 'Publish' to save the changes.
    what happens while busy making other p
    Bluehost wordpress replace header image step eight
  9. Click the 'left arrow icon'.
    Life is what happens while making other plans
    Bluehost wordpress replace header image step nine
  10. Click 'Inner Page Hero'.
    PREONUS COFFEE SHOP
    Life is what h making other
    Bluehost wordpress replace header image step ten
  11. In the backgournd section, click 'Options'.
    Life is what happens busy making other plans
    PREONUS COFFEE SHOP
    Bluehost wordpress replace header image step eleven
  12. Here, add the image as you did with 'Front Page Hero' background image. Just Click 'Add new image' button and upload the image.
    is what happens usy making other
    Bluehost wordpress replace header image step twelve
  13. Click the 'Publish' button
    ife what happens while busy making other plan
    Bluehost wordpress replace header image step thirteen
  14. Click 'close' icon in the top left to go back to the WordPress Dashboard.
    is what happens making other pla
    Bluehost wordpress replace header image step fourteen

So that's a basic website set up. You now have:

  • A secure website that loads pages fast and works 24/7/365
  • A basic structure of 4 key pages
  • The know how to source, prepare and upload images in a way that won't slow down page loading

In the next section we'll look at how to edit or add key elements to each page in a way that Google and Bing will love.

In this section:

Previous

Optimizing images before loading to your website

Next

STEP TWO: Search Engine Optimizing your Coffee Shop website