Home Template

Editing the Homepage Template

To edit the Template: 

Navigate to Templates > Home Template > click "Edit with Elementor."


The Home template is made up of various Sections.


  1. Hero Video Section 1 of 2
  2. Hero Video Section 2 of 2
  3. Intro Text Section
  4. Parallax Centered Text Section
  5. Current Series Section 1 of 2
  6. Current Series Section 2 of 2
  7. Two Column Right Content Section
  8. Two Column Left Content Section
  9. Next Steps Section
  10. Watch Online Section


Full listing of Elementor Widgets: https://elementor.com/help/widgets/

1. Hero Video Section 1 of 2

Responsive Note:
This section appears on Tablet and Mobile views. Make sure to also edit the "Hero Video Section 2 of 2" to make sure your Desktop content is correct.


Editable Content:

  1. Column 1:
    1. Background Color: Edit Column > Style > Background
    2. Divider Widget
    3. Heading Widget
    4. Text Editor Widget
    5. Button Widget
    6. Button Widget
  2. Column 2:
    1. The angled shape is an SVG image made with custom CSS (Edit Column > Advanced > Custom CSS).
      @media (min-width: 768px) { selector:before { content: ""; position: absolute; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 100' fill='%236AADB7CC'%3E%3Cpolygon points='0,-0.5 0.7,-0.5 24,100.5 0,100.5 '/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: 0 0; z-index: 1; } } }
  3. Icon Widget: 
    1. Scrolling: This is set up to scroll down to the next "Intro Text Section" Section. 
      1. Add a CSS ID to the Section you want the icon to scroll to (Edit Section > Advanced > CSS ID). Example: "welcome"
      2. Add the link to the Icon Widget. Example: "#welcome"
    2. Animation: This icon has a looping animation that is set up with custom CSS. To make this work, the CSS Classes (Edit Icon > Advanced > CSS Classes) needs to be set to "scroll-icon" and the following code needs to be added to the Custom CSS (Edit Icon > Advanced > Custom CSS):
      .scroll-icon{ animation-iteration-count: infinite; }
    3. Color: Because the icon is linked, Elementor changes it to your link color by default. To change the icon color, the following code needs to be added to the Custom CSS (Edit Icon > Advanced > Custom CSS):
      .fa-chevron-down:before{color:#f1f0e8;}


Button Note:

These buttons are set on the same like by using inline positioning. To edit this, go to Edit Button > Advanced > Positioning > Inline(auto)


To edit the Section Template: 

Navigate to Templates > Section > Hero Video Section 1 of 2 > click "Edit with Elementor."

2. Hero Video Section 2 of 2

Responsive Note:
This section appears on Tablet and Mobile views. Make sure to also edit the "Hero Video Section 1 of 2" to make sure your Desktop content is correct.


Editable Content:

  1. Background Color: Edit Column > Style > Background
  2. Divider Widget
  3. Heading Widget
  4. Text Editor Widget
  5. Button Widget
  6. Button Widget
  7. Icon Widget: 
    1. Scrolling: This is set up to scroll down to the next "Intro Text Section" Section. 
      1. Add a CSS ID to the Section you want the icon to scroll to (Edit Section > Advanced > CSS ID). Example: "welcome"
      2. Add the link to the Icon Widget. Example: "#welcome"
    2. Animation: This icon has a looping animation that is set up with custom CSS. To make this work, the CSS Classes (Edit Icon > Advanced > CSS Classes) needs to be set to "scroll-icon" and the following code needs to be added to the Custom CSS (Edit Icon > Advanced > Custom CSS):
      .scroll-icon{ animation-iteration-count: infinite; }
    3. Color: Because the icon is linked, Elementor changes it to your link color by default. To change the icon color, the following code needs to be added to the Custom CSS (Edit Icon > Advanced > Custom CSS):
      .fa-chevron-down:before{color:#f1f0e8;}


To edit the Section Template: 

Navigate to Templates > Section > Hero Video Section 2 of 2 > click "Edit with Elementor."

3. Intro Text Section

Editable Content:

  1. Background Color: Edit Section > Style > Background
  2. Heading Widget
  3. Divider Widget
  4. Heading Widget


Editable Content:

Navigate to Templates > Section > Intro Text Section > click "Edit with Elementor."

4. Parallax Centered Text Section

Editable Content:

  1. Background Color: Edit Section > Style > Background and Background Overlay
  2. Heading Widget
  3. Button Widget


To edit the Section Template: 

Navigate to Templates > Section > Parallax Centered Text Section > click "Edit with Elementor."

5. Current Series Section 1 of 2

Responsive Note:
This section appears on the Mobile view. Make sure to also edit the "Current Series Section 2 of 2" to make sure your Tablet and Desktop views are content is correct.


Editable Content:

  1. Background Color: Edit Section > Style > Background
  2. Button Widget
  3. Button Widget

Button Note:

These buttons are set on the same like by using inline positioning. To edit this, go to Edit Button > Advanced > Positioning > Inline(auto)


To edit the Section Template: 

Navigate to Templates > Section > Current Series Section 1 of 2 > click "Edit with Elementor."

6. Current Series Section 2 of 2

Responsive Note:
This section appears on the Tablet and Desktop views. Make sure to also edit the "Current Series Section 1 of 2" to make sure your Mobile view is content is correct.


Editable Content:

  1. Inner Section:
    1. Background Color: Edit Inner Section > Style > Background
    2. Button Widget
    3. Button Widget
  2. Section Background: Edit Section > Style > Background

Button Note:

These buttons are set on the same like by using inline positioning. To edit this, go to Edit Button > Advanced > Positioning > Inline(auto)


To edit the Section Template: 

Navigate to Templates > Section > Current Series Section 2 of 2 > click "Edit with Elementor."

7. Two Column Right Content Section

Editable Content:

  1. Background Color: Edit Section > Style > Background
  2. Column 1:
    1. Background Image: Edit Column > Style > Background
  3. Column 2: 
    1. Inner Section
      1. Heading Widget
      2. Divider Widget
      3. Text Editor Widget
      4. Button Widget
      5. Button Widget
      6. Button Widget

Button Note:

These buttons are set on the same like by using inline positioning. To edit this, go to Edit Button > Advanced > Positioning > Inline(auto)


To edit the Section Template: 

Navigate to Templates > Section > Two Column Right Content Section > click "Edit with Elementor."

8. Two Column Left Content Section

Editable Content:

  1. Background Color: Edit Section > Style > Background
  2. Column 1:
    1. Inner Section
      1. Heading Widget
      2. Divider Widget
      3. Text Editor Widget
      4. Heading Widget
      5. Text Editor Widget
      6. Button Widget
      7. Button Widget
      8. Button Widget
      9. Button Widget
  3. Column 2: 
    1. Background Image: Edit Column > Style > Background

Button Note:
These buttons are set on the same like by using inline positioning. To edit this, go to Edit Button > Advanced > Positioning > Inline(auto)


To edit the Section Template: 

Navigate to Templates > Section > Two Column Left Content Section > click "Edit with Elementor."

9. Next Steps Section

Editable Content:

  1. Column 1:
    1. Call To Action Widget
  2. Column 2:
    1. Call To Action Widget
  3. Column 3:
    1. Call To Action Widget


To edit the Section Template: 

Navigate to Templates > Section > Next Steps Section > click "Edit with Elementor."

10. Watch Online Section

Editable Content:

  1. Inner Section:
    1. Background Color: Edit Inner Section > Style > Background
    2. Button Widget
    3. Button Widget
  2. Inner Section:
    1. Video Widget


To edit the Section Template: 

Navigate to Templates > Section > Watch Online Section > click "Edit with Elementor."