Need help? Check out our Support Page

Homepage

Homepage

Parts of the Homepage

Top Banner
Boxes Under the Top Banner
Latest News Column
Events Column

Top Banner

The large banner at the top of your homepage can be used to promote a current campaign or upcoming event.

Periodically through the year, we update these banners on all Chapter/CL sites for ongoing MADD Canada campaigns like Project Red Ribbon and Strides for Change. But you can change it anytime to something relevant to your Chapter/CL.

Recommended image dimensions: 1000 pixels wide by 365 pixels high (but any horizontal banner shape will work)

How to change the top banner image:

  1. After logging into your website, click on Pages in the menu on the left.
  2. Scroll down the list of pages and click on Home–Front Page to open the page editor.
  3. Hover over the image element and click the pencil icon to edit. This will open the Image Settings dialog.
    The pencil symbol is in a green row when you hover.
    Editing the homepage banner image. Click for larger image.
  4. Click on the Source dropdown and select Media Library.
    Selecting the image source. Click for larger image.
  5. Click the box with the plus in it labeled Image to add your banner image.
  6. If your image is already in the Media Library, select it and click the blue Set Image button in the lower right corner.
  7. If you need to upload a new image, click the Upload Files tab and then the Select Files button. Find your image on your computer and click Open. Then click the blue Set Image button in the lower right corner.
  8. If there is any text in the image (there often is), write that text in the Alt Attribute field. This “alternative” text will show if the image doesn’t load or will be read if a visitor is using a screen reader to access the webpage.
    If there is text in the image, add it here to make the image accessible for all users.
  9. Click the Link tab.
  10. Select the link type under On click action:
    None: Choose if you don’t want the image to link anywhere.
    Go to custom link: Choose if you want the image to link to a webpage on a different website. Enter the web address in the URL field.
    Go to internal page: Choose if you want the image to link to a page on your website. Click Select URL and find the page. Click Set Link.

    In this example, “Go to internal page” has been selected, and the image will link to the Project Red Ribbon page on the Chapter website.
  11. Once the image and link are set, click Save Changes in the Image Settings dialog.
  12. Click the blue Publish button on the right side of the page editor.
  13. Refresh your homepage and make sure the banner looks the way you want it. Also click on the image to test the link.

Boxes Under the Top Banner

The smaller boxes in the middle of your homepage can be used to highlight pages, social media, campaigns, or anything else you want to make prominent.

Recommended image dimensions for 2-column boxes: 750 pixels wide by 350 pixels high
Recommended image dimensions for 3-column boxes: 600 pixels wide by 400 pixels high

How to change the box images:

  1. After logging into your website, click on Pages in the menu on the left.
  2. Scroll down the list of pages and click on Home–Front Page to open the page editor.
  3. Hover over the image element and click the pencil icon to edit. This will open the Image Settings dialog.
    Editing the homepage box image. Click for larger image.
  4. Click on the Source dropdown and select Media Library.
    Selecting the image source. Click for larger image.
  5. Click the box with the plus in it labeled Image to add your banner image.
  6. If your image is already in the Media Library, select it and click the blue Set Image button in the lower right corner.
  7. If you need to upload a new image, click the Upload Files tab and then the Select Files button. Find your image on your computer and click Open. Then click the blue Set Image button in the lower right corner.
  8. If there is any text in the image (there often is), write that text in the Alt Attribute field. This “alternative” text will show if the image doesn’t load or will be read if a visitor is using a screen reader to access the webpage.
    If there is text in the image, add it here to make the image accessible for all users.
  9. To change the text in the red label at the bottom of the image, go to the Image Title field and edit the text as needed (directly below the Alt Attribute field).
  10. To change where the image box links to, click the Link tab.
  11. Select the link type under On click action:
    None: Choose if you don’t want the image to link anywhere.
    Go to custom link: Choose if you want the image to link to a webpage on a different website. Enter the web address in the URL field.
    Go to internal page: Choose if you want the image to link to a page on your website. Click Select URL and find the page. Click Set Link.

    In this example, “Go to internal page” has been selected, and the image will link to the Project Red Ribbon page on the Chapter website.
  12. Once the image and link are set, click Save Changes in the Image Settings dialog.
  13. Click the blue Publish button on the right side of the page editor.
  14. Refresh your homepage and make sure the box looks the way you want it. Also click on the image to test the link.

Latest News Column

To add a news post, follow the instructions for Latest News (Blog). (Do not add a link directly to the homepage.) When you create a news post, the link will automatically appear on the homepage under Latest News as well as on your Latest News page.

Events Column

To add a new upcoming event, follow the instructions for Events Calendar. (Do not add a link directly to the homepage.) When you create an event post, the link will automatically appear on the homepage under Events as well as on your Events Calendar page.

Back To Top