Editing the Style Guide Template

To edit the page go here: 

Navigate to Pages> Style Guide> click "Edit with Elementor."

To edit the template go here: 

Navigate to Templates> Hope | Style Guide> click "Edit with Elementor."

Versions:

There are two versions of the Hope Theme. 

Version 1: Sites created prior to January 1, 2021 | Uses Style Kits

Version 2: Sites created January 1, 2021+ | Uses Elementor 3.0 Global Styles

The Style Guide Page is made up of various Sections.

1. Hope | Intro Image Section
2. Hope | Subpage Intro Section
3. Version 1: How to Edit Your Style Kit / Version 2: How to Edit Your Global Styles
4. Hope | Tab Section
5. Hope | Toggle Section
6. Hope | Accordion Section
7. Hope | Flip Box 3 Column Section
8. Hope | Flip Box 4 Column Section
9. Hope | Text Overlay Staggered Section
10. Hope | Latest Message Section

This page is meant to show the general site styles as chosen with your style kit or global styles.

Version 1: Please see the main article for Style Kit for more information.

Version 2: Please see the main article for Global Styles for more information. 

1. Hope | Intro Image Section

To edit the Section Template, navigate to Templates> Hope | Intro Image Section> click "Edit with Elementor."

Editable Content:

1. Heading
2. Section Background: Currently using a Background Image, Background Overlay, and Shape Divider.

2. Hope | Subpage Intro Section

To edit the Section Template, navigate to Templates> Hope | Subpage Intro Section> click "Edit with Elementor."

Editable Content:

1. Column 1:
   1. Image: Currently using Border Type and Box Shadow under the "Style" tab as well as Border under the "Advanced" tab.
2. Column 2:
   1. Heading
   2. Text Editor
   3. Divider Widget (small blue line)
   4. Heading 
   5. Heading: Note, on this page, we have removed the "Job Title" heading.
3. Section Background: Currently using a color.

3. Version 1 (sites created prior to January 1, 2021): How to Edit Your Style Kit

The Style Guide page has been set up with various sections that show examples of all the typography, and button styles, column gaps, and section padding.

These styles are controlled by the Style Kids plugin. Style Kits is a plugin by AnalogWP that allows you to globally control your theme styles. The Style Kits library includes Templates, Style Kits, and Blocks.

Follow the directions in this help article: Church Websites - Elementor: Design: Style Kits

Version 2 (sites created January 1, 2021+): How to Edit Your Global Styles

The Style Guide page has been set up with various sections that show examples of all the typography, and button styles, column gaps, and section padding.

Follow the directions in this help article: Church Websites - Elementor: Design: Style Kits

These styles are controlled by your site's Global Styles in your Site Settings. You can learn more about Global Styles here: Elementor 3.0 Site Settings - Global Styles. 

4. Hope | Tab Section

To edit the Section Template, navigate to Templates> Hope | Tab Section> click "Edit with Elementor."

Editable Content:

1. Heading
2. Tabs
3. Section Background: Currently shown with a Background Image and Background Overlay.

5. Hope | Toggle Section

To edit the Section Template, navigate to Templates> Hope | Toggle Section> click "Edit with Elementor."

Editable Content:

1. Heading: Note that we've changed the text to white by editing the Heading color under the "Style" tab.
2. Toggle Widget
3. Section Background: Currently using a Background Image and Background Overlay.

6. Hope | Accordion Section

To edit the Section Template, navigate to Templates> Hope | Accordion Section> click "Edit with Elementor."

Editable Content:

1. Heading
2. Heading
3. Text Editor
4. Toggle Widget
5. Section Background: Currently using a Background Image and Background Overlay.

7. Hope | Flip Box 3 Column Section

To edit the Section Template, navigate to Templates> Hope | Flip Box 3 Column Section> click "Edit with Elementor."

Editable Content:

1. Each column has a Flip Box Widget
2. Section Shape Divider

8. Hope | Flip Box 4 Column Section

To edit the Section Template, navigate to Templates> Hope | Flip Box 4 Column Section> click "Edit with Elementor."

Editable Content:

1. Heading
2. Inner Section 
   1. 4 Columns each with Flip Box Widget
   2. Section Background: Currently shown with a Shape Divider
3. Section Background: Currently shown with a color.

9. Hope | Text Overlay Staggered Section

To edit the Section Template, navigate to Templates> Hope | Text Overlay Staggered Section> click "Edit with Elementor."

Editable Content:

1. Heading
2. Two columns, each with an Inner Section Widget and 2 columns set inside.
   1. Column 1, Inner Section 1:
      1. Column 1
         1. Heading
         2. Heading
         3. Text Editor
         4. Button
      2. Column 2 
         1. Image*
      3. Inner Section Background*
      4. Heading
   2. Column 2, Inner Section 2:
      1. Heading
      2. Column 1
         1. Image*
      3. Column 2 
         1. Heading
         2. Heading
         3. Text Editor
         4. Button
      4. Inner Section Background*
   3. Section Background: Currently using a Background Color.

* The images are repeated so that 1 image shows on Desktop and Tablet, and the second shows on the Mobile view. You will need to edit both images if you want the correct image to appear on all devices.

Desktop and Tablet View

Mobile View

How to Hide and Show Buttons on Different Devices

You can set a button to show/hide on Desktop, Tablet and Mobile by clicking the blue pencil icon to edit the Button Click the "Advanced" tab Open the "Responsive" drop-down. From here you can click the toggles to determine where the button is shown or hidden.

10. Hope | Latest Message Section

To edit the Section Template, navigate to Templates> Hope | Latest Message Section> click "Edit with Elementor."

Editable Content:

1. Heading
2. Column 1
   1. Heading (Date)
   2. Heading (Sermon Title)
   3. Text Editor 
   4. Button
   5. Column Background: Currently using a Background Gradient
3. Column 2
   1. Image*
4. Inner Section Background
   1. Image*
   2. Inner Section Background: Currently using a Background Overlay
5. 
   
   1. Section Background: Currently using a Background Color

* The image is repeated so that 1 image shows on Desktop and Tablet, and the second shows on the Mobile view. You will need to edit both images if you want the correct image to appear on all devices.

Desktop and Tablet View

Mobile View

How to Hide and Show Buttons on Different Devices

You can set a button to show/hide on Desktop, Tablet and Mobile by clicking the blue pencil icon to edit the Button Click the "Advanced" tab Open the "Responsive" drop-down. From here you can click the toggles to determine where the button is shown or hidden.

Updated May 09, 2025 15:33