facebook pixel img

Editing The Home Page

Editing School Site Press Home Page
Editing the home page

Your website’s home page is the most seen page on your website. It’s also the most complex as it acts as a portal to other pages.

In this tutorial we’ll take you step-by-step on how to make edits to the home page.

Published: 14 June 2021.
Author: Neil Forrester.

Home page sections

The home page is made up of the following sections:

  • Home page slider.
  • Quick links.
  • Welcome.
  • Take a virtual tour.
  • Sub-schools.
  • Life at school.
  • Unique selling points / stats.
  • News & Events.
  • Association logos.
  • Virtual tour & enrolment.

It’s worth noting at this point that the News & Events display are not editable. These sections are preconfigured and are set to always display the latest news or events which are added elsewhere on the website.

Before you do anything – Export a backup of the home page layout

The home page has a lot going on and it can be easy to mess up the design. You are strongly urged to backup the home-page layout before you do any work. In fact, it’s good practice to export a backup of any page layout before you make edits. Then if need be, your layout can be easily restored.

  • Login to your website.
  • View the home page.
  • Click Enable Visual Builder.
  • Click the purple button at the bottom.
  • Next click the Import / Export up/down arrows.
  • Give the export a name and click Export Divi Builder Layout.
  • A json file is then saved to your computer.

If things go wrong and you want to revert back

  • Click the Import / Export button.
  • Click Import.
  • Select your backup file.
  • Check replace existing content.
  • Click Import Divi Builder Layout.

Editing the home page slider

  • Hover over the home page slider and click the gear icon of the slider module.
  • The module settings box appears.
  • Your site comes with three slides in place. Video, Vision & Values and An Evening of Music.
  • Slide background image size: 1240px x 700px.
  • See tutorial: Images – Resizing, Optimising and Uploading

Slide with video

  • Click the gear icon of the Video slide. Note: By default the background video is not displayed when editing in visual builder but it will display once you save and exit the visual builder.
  • You can edit the Title, Button Display Text, Description.
  • Add a link for the button. Click the gear icon and select the page you want to link to.
  • The background video is added by clicking the background tab / video. In this instance, the video for the slider has been uploaded to the server.
  • Add an admin label so you know what the slide is.
  • Save this slide. After saving you are taken back to the slide list.

Slide with background image

  • Click the gear icon of the Video slide.
    You can edit the Title, Button Display Text, Description.
  • Add a link for the button. Click the gear icon and select the page you want to link to.
  • The background image is added by clicking the background tab / image.
  • Slide background image size: 1920px x 1080px.

These are the basic settings you need to keep the slider looking and working at it does. There are many other settings if required. More detailed information on editing the Slider Module can be viewed here: https://www.elegantthemes.com/documentation/divi/slider/

Editing the home Page quick links

The home page quick links section contains a row with 4 columns. In each column is a style Blurb Module linking to:

  • Term Dates & Bell Times
  • Uniform Pricelist
  • Enrolment & Admissions
  • Virtual Tour

In most cases you may only want to change the Title, Icon and Link.

  • Hover over the module and click the gear icon to edit.
  • Edit the title under Text / Title.
  • Edit the icon under Image & Icon / Icon.
  • Edit the module link under Link / Module Link URL.
  • Click the green tick to save the module settings.
  • Next click the purple button at the bottom centre.
  • Then, click the green tick button to the right to save the page changes you just made.
  • Finally, click Exit Visual Builder top left to review and test.

More detailed information on editing the Blurb Module can be viewed here:
https://www.elegantthemes.com/documentation/divi/blurb/

Welcome & Take Virtual Tour Section

This section contains a row with 2 columns. To ensure the layout looks it’s best, keep both descriptions the same length.

Editing the text

  • Hover over the text module and click the gear icon to edit.
  • The titles are format to Heading 2 and the description is paragraph.

Editing the buttons

  • Hover over the button module and click the gear icon to edit.
  • Under Text enter the button text.
  • Click Link / Gear Icon to choose the page you want to link to.

More detailed information on editing the Text Module and Button Module can be viewed here:

Editing the sub-schools and life at school blocks

Editing these blocks is a little more tricky due to the style settings required to make them work but you can do it!

This section contains 2 rows set to full width. Each row has 4 columns.
Each row column contains a background image. Then, placed in each row is a Call to Action module with the text and button.

Editing the background image

  • The background image size used is: 630px by 360px.
  • Hover over the row and edit it. Row settings are green.
  • In the settings box you will see the columns list. Click the gear icon to edit.
  • Click Background / Image.
  • Click the image to select another image you have uploaded.
  • When finished click the green tick and scroll back up to the column list.
  • Make any other image changes you require.

Editing the Call To Action Module

  • Due to the styling, when you hover over the this module you cannot see the gear icon to click.
  • In this instance you need to click the wireframe mode located bottom left.
  • Next you will see the rows and their modules in a simple wireframe design.
  • Click the gear icon of the module.
  • Once the module settings box appears you can click back to visual editing mode and scroll back down to view your edits.
  • Title: Change the title under Text / Title.
  • Button Link: Edit the button link and select the page to link to.
  • Description: Edit the description. Due to the styling constraints keep the character limit to 145 or less, otherwise the text will be cropped.
  • Background: You can change the background colour if you want to.
  • Admin Label: Give the module a relevant admin label.

There are many other settings you can change but I would recommend you only edit the information for these modules. More detailed information on editing Rows and Call to Action Module can be viewed here:

Unique selling points & statistics

The USP and stats section is made up with two, 4 column rows. In each column is an Image module and a Number Counter module.

Editing the image module

The images used in these image modules need to have a transparent background. We have used SVG (Scaleable Vector Graphic) files because they always look sharp on retina displays. You can also use png or gif files.

The image size should be: 80px by 80px.

  • Hover over the image and click the gear icon to edit.
  • Click the image to select another image from your image library. It’s possible to edit other settings and add links or effects.
  • Click the green tick in the module settings box to save.

Editing the Number Countdown module

  • Hover over the module and click the gear icon to edit.
  • Title: Edit the title to change the text.
  • Change the number.
  • Click Elements to show the % icon or not.
  • Click the green tick in the module settings box to save.

Editing the Association Logos & Virtual Tour & Enrolment Sections

Proud to be associated with…

This section is used to display association or affiliation logos. It is made up using a 4 column row. In each row is an Image module.

The image size should be: 532px by 300px.

  • Hover over the image and click the gear icon to edit.
  • Click the image to select another image from your image library.
  • It’s possible to edit other settings and add links or effects.
  • Click the green tick in the module settings box to save.

Virtual Tour & Enrolment

This section displays text and blurb modules linking to their respective pages on your website.

To make edits, simply hover over the module and click the gear icon.

Saving your work

After you have finished making edits to modules on your page, you need to save the page.

  • Next click the purple button at the bottom centre.
  • Then, click the green tick button to the right to save the page changes you just made.
  • Finally, click Exit Visual Builder top left to review and test.

0 Comments

Submit a Comment

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

FREE 45 minute website consultation!

Let’s discuss your new website possibilities! It’s free & without obligation.

0
    0
    Your Cart
    Your cart is emptyReturn to Shop