Alphonsus Homepage How To

Homepage Groups

Remember to click the blue Update button in the top-right to save your changes.

Hero

You can switch between Image or Video with the Toggle. The Hero Overlay will add a filter over the Image Slider or Video to make the text more readable. The heavier the overlay, the darker the filter.

Image

The image option allows for the Hero to be just a single image or a slider (up to 4 images). Whether you choose one or multiple images, the instructions are relatively the same.

  1. First, you need a Slide Image, click the Add Image button.
    1. The Select Image window will pop up. In the top-left, you can switch between Upload files and Media Library, which has all previous images uploaded to site).
    2. Once you select your desired image, click the Select button in the bottom-right corner.
  2. If so desired, you can add a Slide Title, but please keep it pretty short.
  3. If so desired, you can add Slide Text, but please keep it short, but can be longer than the title.
  4. If so desired, you can add a Slide Button for the user to click on to read more or go to a desired URL.
    1. Click the Select Link button and the Insert/edit Link window will pop up. Add the URL where you’d like the button to go and the Link Text will be the Button’s text.
    2. If the URL is going offsite (if the destination link has a different menu than your site’s) then it is best to check the Open link in a new tab box
    3. You can also search for content on your site and have the URL and Link Text generated for that Post/Page.
  5. To add more images, click the Add Slide button and repeat these steps.
  6. You can rearrange the Slides by clicking on the number on the vertical gray bar next to the options and dragging it above or below the other slides.
  7. To remove a slide, hover over the slide you wish to delete, and click on the Minus symbol on the right side of the slide and click Remove.

Video

The Video option for the Hero allows for it to play a video that you upload to the website. It is recommended that the video be no larger than 12-15MB and no longer than 30-40 seconds in length. Here are instructions for the Video Hero.

  1. Switch the Toggle to Video
  2. Add a webm or mp4 format video file.
    1. Click the Add File button
    2. The Select File window will pop up. In the top-right, you can switch between Upload files and Media Library (has all previous files uploaded to site).
    3. Once you select your desired video, click the Select button in the bottom-right corner.
  3. Loading Image (Optional) Add an Image to be a placeholder until the video is loaded on the site. It is optimal to take a screenshot of the first frame of the video.’
    1. Click the Add Image button
    2. The Select Image window will pop up. In the top-right, you can switch between Upload files and Media Library (has all previous images uploaded to site).
    3. Once you select your desired image, click the Select button in the bottom-right corner.
  4. If so desired, you can add a Title, but please keep it pretty short.
  5. If so desired, you can add Slide Text, but please keep it short, but can be longer than the title.
  6. If so desired, you can add a Button for the user to click on to read more or go to a desired URL.
    1. Click the Select Link button and the Insert/edit Link window will pop up. Add the URL where you’d like the button to go and the Link Text will be the Button’s text.
    2. If the URL is going offsite (if the destination link has a different menu than your site’s) then it is best to check the Open link in a new tab box
    3. You can also search for content on your site and have the URL and Link Text generated for that Post/Page.

Colorful Tiles

These tiles are just below the Hero of the Homepage. There is a minimum of 2 tiles and a max of 4. They can go to Pages, Posts, other sites, PDFs, etc.

Instructions

The colorful tiles are meant to be links to things that your visitors should have quick access to, things that are searched for most often on your site should be within these tiles. E.g., Bulletins, Mass Times for Parishes and Schedule a Tour, Contact Us, Parent Portal for Schools. Instructions for use are below.

  1. Icon (optional) You can leave this blank or search through the list of icons (you can type keywords to help find them). 
    • To remove an icon, click the smaller ‘x’ near the dropdown arrow.
  2. Click the Select Link button and the Insert/edit Link window will pop up. Add the URL where you’d like the button to go and the Link Text will be the Tile’s text.
    1. If the URL is going offsite (if the destination link has a different menu than your site’s) then it is best to check the Open link in a new tab box
    2. You can also search for content on your site and have the URL and Link Text generated for that Post/Page
  3. Provide a short description of the tile or where it is meant to go.
  4. To add more tiles, click the Add Tile button and repeat these steps.
  5. You can rearrange the Tiles by clicking on the number on the vertical gray bar next to the options and dragging it above or below the other tiles.
  6. To remove a tile, hover over the tile you wish to delete, and click on the Minus symbol on the right side of the tile and click Remove.

Mass Times

Instructions

  1. You can change the Title of this section
  2. You can add a Subtitle for this section too, which will go to the left of the View Full Schedule link
  3. You can also add up to two buttons (i.e. Livestream Masses)
    1. Click the Select Link button and the Insert/edit Link window will pop up. Add the URL where you’d like the button to go and the Link Text will be the Tile’s text.
    2. If the URL is going offsite (if the destination link has a different menu than your site’s) then it is best to check the Open link in a new tab box
    3. You can also search for content on your site and have the URL and Link Text generated for that Post/Page
  4. Mass Times are set in the Theme Settings that can be found in the WordPress Menu and will show the Sections that are set to Show on Homepage and the Times that are set to Show on Homepage

Banner

The banner is a great place to put your mission or vision for your organization or some information about your organization to have visitors get familiar.

Instructions

  1. Enter the Title for the Banner Section. (Recommended to keep this short, max of a couple words)
  2. Set a Background image if so desired. This will be shown behind the Heading item and the overlay is based on your site’s colors.
    1. Click the Add Image button.
    2. The Select Image window will pop up. In the top-left, you can switch between Upload files and Media Library (has all previous images uploaded to site).
    3. Once you select your desired image, click the Select button in the bottom-right corner.
  3. You can also add up to two buttons (e.g. Contact Us, Our Mission)
    1. Click the Select Link button and the Insert/edit Link window will pop up. Add the URL where you’d like the button to go and the Link Text will be the Tile’s text.
    2. If the URL is going offsite (if the destination link has a different menu than your site’s) then it is best to check the Open link in a new tab box
    3. You can also search for content on your site and have the URL and Link Text generated for that Post/Page
  4. Parallax? This is if you want the image to scroll with the page or stay static (does not move when scrolling)

News

Instructions

The News on the Homepage displays posts from a certain category and displays a View All button that, by default, will go to the category archive page that contains all posts in that category.

  1. Type the Title for the News Section (short).
  2. Type the Subtitle for the News Section, this will display next to the View All link
  3. You can replace the category archive button by linking it to somewhere else using the Button option and using the Select Link button. There are not many cases where this should be used, as this is automatically set to category’s archive page.
  4. The Category is a radio button selector to choose a Post Category to display on the Homepage. Most of the time, this should be left to use either the News category, but you could change this to dedicated Homepage News category too, if desired.

Below is what each group affects on the frontend