Navigate to Templates> Grace | Homepage> click "Edit with Elementor"
The homepage template is made up of various section templates:
1. Grace | Slider Section
2. Grace | Welcome Section
3. Grace | Ministries Row Section
4. Grace | Leadership Gallery Section
5. Grace | Links Gallery Section
6. Grace | Upcoming Events Section
7. Grace | Blog Columns Section
8. Grace | Sermons Row Section
9. Grace | Become a Member Section
10. Grace | Map Section
1. Grace | Slider Section
To edit this section template, navigate to Templates> Grace | Slider Section> click "Edit with Elementor".
To make full-width sections as seen here, set the full-width page layout from the far bottom left options gear:
On an individual section, such as the top slider, set full width, no gap:
This allows the top slider page (or other row) to be the full width of the page.
To make an overlay info blurb at its bottom, add an inner section to it with a set position to “absolute”, that is relative to the bottom of the outer container:
Set a minimum height:
And set a negative margin top, a z-index positive number to be above the slider, and optionally, padding, to make it fit into the area.
Use the responsive view to make sure any adjustments to this are set on tablet and mobile view as well, and all is displaying as you want it to!
On mobile you will want to make the outer containing element bigger so the adjustment negative margin top doesn’t go over the contents:
One other option you may check if you still have spacing issues is the space between widgets in the dashboard elementor options, space between should be 0 if you want any widgets to have no spacing between them. Then you can add padding to a specific layout element as shown above.
Note that while all the elements to the right are in line:
sharing the width of the element, you should set the margin to line it up within this area properly:
2. Grace | Welcome Section
To edit this section template, navigate to Templates> Grace | Welcome Section> click "Edit with Elementor".
Editable content in a two-column row -
1: column with heading - again demonstrating use of the inline image and inline heading for styled effect -
A standard button
and text area
added below, with an image to the right.
3. Grace | Ministries Row Section
To edit this section template, navigate to Templates> Grace | Ministry Row Section> click "Edit with Elementor".
Select the outer row to change its padding and background appearance. Note that it should be “normal” or “large” padding here to see background area around it and have some breathing room:
To set a link button for specific ministry, add a button
This will be the default green of this theme though… so set the background to transparent and bordered as in the example:
Paste in rgba(255, 255, 255, 0.455) for example, as a semi-transparent (0.455) transparent border as pictured. Note that “em” are the most appropriate unit as associated to the text font size of this button.
Finally, don’t forget to link each of these. Typing the name of a page will bring your pages in a dropdown, or past a link from the location bar.
To make more buttons of the same type, right click, duplicate, and drag the edit icon to another layout area.
Checking through in mobile view, you may find each of these columns is now bumped up to each other, padding or margin added can separate these more:
4. Grace | Leadership Gallery Section
To edit this section template, navigate to Templates> Grace | Leadership Gallery Section> click "Edit with Elementor".
Editable Content
1. Image (dash), and Our Pastor - both inline
2. Innser Section - used to set image and content next to it with dynamic width and spacing.
Right column:
1. mage (dash), and Our Pastor - both inline
2. Spacer
3. Gallery - inserted Gallery (not simple-gallery), this lets you show list of photos in one element.
5. Grace | Links Gallery Section
To edit this section template, navigate to Templates> Grace | Links Gallery Section> click "Edit with Elementor".
This displays the flip box element as an example bringing pictures with flipping links:
If you set a background rather than two different images to flip through on mouse over, as displayed, make sure front and back have transparent or semitransparent background front and back:
Then set a background in advanced:
6. Grace | Upcoming Events Section
To edit this section template, navigate to Templates> Grace | Upcoming Events Section> click "Edit with Elementor".
This area shows an example of several columns of events displaying from your site's event calendar. This is created in the grid view, which can be created from the M.E.Calendar shortcodes area in the Wordpress dashboard, and selecting grid view.
7. Grace | Blog Columns Section
To edit this section template, navigate to Templates> Grace | Blog Columns Section> click "Edit with Elementor".
Blog posts can be added to a layout with the “Posts” element:
Posts are generally mostly paragraphs and may or may not have a special layout built in Elementor - a number of latest posts will be shown according to your settings here:
8. Grace | Sermons Row Section
To edit this section template, navigate to Templates> Grace | Welcome Section> click "Edit with Elementor".
Here you can see a sermon cloud example, in similar manner as on the sermons page.
9. Grace | Become a Member Section
To edit this section template, navigate to Templates> Grace | Become a Member Section> click "Edit with Elementor".
As with other sections, this is added with outer section padding “normal” to have some spacing green around it.
Colors of the row are set in style,
and a Heading (H1), text area, and button are all added with centering alignment, white text set as their style: Also note the border which is in the border styling of the button, shows that this is a link. Padding, if needed, is added in this styling area as well:
10. Grace | Map Section
To edit this section template, navigate to Templates> Grace | Map Section> click "Edit with Elementor".
You can use the Maps widget to show a Google map for a given address, as shown, or use HTML
to add a custom embed from another service such as Mapbox.
Social Icons:
Social icons may be added to the list, and you can remove an item, and click the left to input your url, from the location bar for your ministry’s social pages.
Updated