Last updated on

Now that we have built the base site with an Inspiration and made some preferred changes with the Customizer, it is now time to modify the page content to represent our sample company. This will not involve changing colors and fonts as those have already been done via the Customizer. Now that you’ve created your WordPress site and customized the theme, you’ll use the Post and Page Builder to edit your Home page.

Opening the Page for Editing

  1. pages link in WordPress adminClick on the Pages option from the left-hand sidebar menu.
  2. edit link under page name Next, hover over Home and click Edit.

Editing the Home Page Content

You will be dealing with several sections while learning to edit the home page. We will go over each section and discuss how to change them. We will go over title and text changes first and then do the images Home and The sample page here uses the Swifty theme. Your theme may contain different Blocks, but the concepts are the same.

Changing Title Text

The first area of the top Block is a title area. To change the content, click somewhere in the box containing the text. From here you can delete the existing title and replace it with your own.

Click to change Type your own message

 Modifying Paragraph Text

Click in an area that contains the stock paragraph text. This opens the area for editing. Highlight all the content in the column of the box and delete it. Once deleted, add your own paragraph. Do the same for the second column.

Highlight text Fill in custom text

Editing the Home Page Images

Working with the images is one of the elements you will manipulate when learning how to edit the home page. Using your own images, you will need to upload them to your site, then add them to the page. After that, each image may need configuration to get the right look.

Uploading Images to your Site

  1. add new media linkFrom the left-hand menu in the dashboard, hover over the Media option and then click on the Add New option.
  2. select media fileThis will bring you to the Upload New Media page. Click on the Select Files option.
  3. click openFrom your local machine, highlight the images you want to upload and click Open. This will upload all the images to your media library.

Replacing Images

Once your images have been uploaded, you can replace the stock ones on the page.

  1. Click on the image and a small toolbar will appear at the top. Click on the Change option.

    Click Change

  2. replace image screenThis will bring you to the Media Library tab of the Replace Image screen. Locate and click on the image you want to use. A blue border will appear around it with a checkmark, this means it is selected. Click on the Replace button.
  3. Crop image screenYou may be asked to crop the image. If you want to use the whole image, click on the Skip Cropping button. You can crop if you wish to trim edges of the image.
  4. Image replacedThe new image will be inserted. Notice it is not the same size as the previous image. Don’t worry about that for now as you can adjust it later.
    After replacing stock images, you may notice that the sizes don’t quite match.To make the images even and aligned, you will need to edit each one. Click on the top image and then on the “Edit” button from the toolbar.

Adjust image sizeOn the Image Details page, set the Size option to “Custom Size” then set the Width option to your desired size. Next, click on the Update button.

 

Once you have completed altering your images, click on the “Update” button to save the changes.

 

Changing the Section Background

Background originalYou may have noticed that our section has a predetermined background image. This is easily customized with the section background button.

Select from images, colors, or patternsOnce you have selected the Section Background button pictured above, you can choose from different background images, colors or patterns.

 

 

 

 

 

 

 

Your home page should now be complete and look vastly different than when you started. If you look at your page on your site you will see  your content along with the theme changes you made in the Customizer. Our sample site is shown to the right.  Now that you have learned how to edit the home page you can edit the “About Us” page.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

14 thoughts on “How to Edit the Home Page

  1. How do I change the background color to my first paragraph on my home page? When I select change background color it still leaves one paragraph in the old color. I’ve tried select all. I’ve tried clicking on that block.

  2. How do i make the 1st page just a picture with the menu. No other text below the picture? I’m using the active theme resolve and have deleted everything else under the picture, but when i go to the site, i have the top picture and then a whole bunch of blank space…need to get rid of that.

    Thanks,

    • Hello,

      In your customizer you can disable the footer which should remove a large amount of the space at the bottom of the page, I would also recommend ensuring you have no grid blocks below the image empty or otherwise as they would still make the page look larger even if there is no content in them.

      Best Regards,
      KyleM

    • Christopher says:

      I assume you are referring to the “drag handles” that let you move content around the page. If you hover over the grids, text blocks, and images, these handles appear. This is a default behavior. I advise checking your WordPress version to see if updates are required.

    • Vinicius, what button are you trying to move? Where are you trying to move it to? If you’re trying to move it to a new section, you should be able to remove it from the current section, and re-add it to the new area. If you’re trying to move it a certain amount of pixels, you may need to set custom CSS on the button itself.

Leave a Reply

Your email address will not be published. Required fields are marked *