The instructions below describe the steps to create the Home page of this site.
Setup
- When at the editing area for the page (Dashboard -> Pages -> All Pages -> Hover over the title -> Click click “Edit”) click the “Elementor” button to enter the Elementor editor.
- Click the “Add New Section” button
to create a space for editing.
- Select the 2-column layout.
A dotted outline of the 2 columns appears.
Hovering over the 2 columns creates a blue boxabove with icons to act on the section created.
Hovering over the blue box displays the actions for each icon when selected. - Hover over the gap between the 2 columns and drag the left column edge until it occupies 75% of the width.
- The Elementor sidebar (left side of content area) should display the list of widgets available.
- Hover over the Heading widget (a cross icon
appears); click and drag the widget to the left column. A blue bar should appear to indicate the widget is in the column during the dragging process.
- “Add Your Heading Text Here” will initially show in the widget.
- Drag another Heading widget below the first.
- At the top left of the Elementor sidebar, click the 3X3 dot icon to again display the widgets available.
- Drag a Text Editor widget below the Heading widgets.
- Drag the Columns widgets into the area below the Text Editor widget.
- Drag a Text Editor widget into the left column of the Columns widget just added.
- Drag the Image widget into the right column of the Columns widget just added.
- Scroll down the Elementor widgets list and drag the Recent Posts widget below the Columns widget. Enter a title and select the number of recent posts to display.
- Select the Advanced tab of the Recent Posts widget.
- Hover over one of the padding boxes and increment the padding up to 4 pixels.
- Select the Background option and click the paint brush icon at “Background Type. Click in the color box and choose a green or blue color along the bottom row to get a color spectrum display. Move the circle to the desired hue and brightness desired. Modify the color intensity or opacity using the sliders on the right.
- Close the Background option and select the Border option.
Set the border type to “solid”. Increment the border width to 1 pixel.
Click the color box and move the right-most slider and set the opacity to mid_range.
Increment the Border Radius to 6 pixels. - This completes the widget placement for the left column of the page.
- To make the text area darker or lighter for the entire site, click the hamburger icon top left of the Elementor sidebar and select the “Default Colors” button. Next click the “TEXT” boxtext color box and set the desired color as above for the background color of the Recent Posts widget. The color can also be set using a color number. For example, enter #262626 for a dark black.
- Return to the widgets display (top right 3X3 icon).
- Click the Settings icon in the Elementor sidebar lower left.
Turn the Hide Title switch to “YES”.
Add main content
- [Note: Adding text can be done either in the Elementor sidebar or in the visual display on the right. Refined edits work the best in the Elementor sidebar.]
- Click into the top Heading widget. Enter the welcome message.
Set the Size to “Large”.
Select the Style tab. Click the color box.
Click a blue or green box at the bottom to display a spectrum of colors.
Drag the circle to the top left to get turn the color to “red”.
The saturation and opacity scales may need to be moved to the top if not already there.
Entering #ff0800 in the color number box also produces “red”. - In the Header widget below the top one, enter text to explain that this is a demo site.
In the Content tab, select H5 for the html tag. [The Size or html tag can change the text size.]
In the Style tab, click the Typeography pencil icon and chose a weight of 400. - In the Text Editor widget below the headings, enter a line of text followed by a the Enter key to create a new paragraph.
Enter a second line of text.
Select the text and set it to “Bold”. - Click into the Text Editor widget on the left column of the Columns widget.
- Enter the first line of text.
Select the “Style” tab at the top.
Select the pencil icon to the right “Typography”.
Select “EM” to the right of “Size” and enter 1.4 to set the text size 40% larger than the normal text. - Back in the “Content’ tab, with the cursor at the right of the text, push the Enter key to create a new paragraph.
- Select the bullet list icon above the text editing area in the Text Editor widget area of the Elementor sidebar.
- Enter the first bullet list text and push the Enter key to create the next bullet item.
- Continue with list items and after the last item, click the bullet list icon to return to paragraph editing.
- Hover over the pencil icon (top right) of the Image widget in the right column of the Columns widget and click the pencil icon to reveal the image widget settings in the Elementor sidebar.
- Click “Choose your image” in the Image widget in the Elementor sidebar.
- Select the image in the media library (or local computer) and then select the Insert Media button on the bottom right.
- In the Image widget in the Elementor sidebar, choose the desired image size.
- Enter a caption if desired.
- The Recent Posts widget should already be filled with titles for the latest news posts, if created previously.
- Update the page edits with the “Update” button on the bottom of the Elementor sidebar.
- Click the eyeball icon to the left of the “Update” button to preview the page.
Sidebar
- Click the 3X3 icon top right of the Elementor sidebar and enter “search” in the search box at the top.
- Drag the Search Form widget to the right column of the section. [Entering a search item in this widget will find that item in the site.]
- Drag a new Heading widget below the Search widget.
Enter the title “Contact Us”.
Enter “About Us” in the Link box. This identifies the About Us page to go to when the text is clicked.
Click the Style tab (top of Elementor sidebar).
Click the Text Color box and enter #ed702b in the Hex/rgba box.
#ed702b identifies the reddish orange color used for the links in the site. - Drag the Text Editor widget below the Heading.
Enter “with your questions” in the Text Editor editing area.
Click the Style tab (top of Elementor sidebar).
Click the Text Color box and enter #ed702b in the Hex/refba box.
Click the Advanced tab (top of Elementor sidebar).
In the Margin area click the chain link icon to break the control of simultaneous control of all 4 positions.
Decrement the top margin to -12 pixels to move the text closer to the “Contact Us” heading.
Increment the left padding to 8 pixels to indicate this the text relates to the “Contact Us” heading. - Drag the Heading widget below the Search widget.
Enter a title for the image to be added below. - Drag the Image widget below the Search widget.
Click the “Choose your image” box in the Elementor sidebar and maneuver to a map of your lake.
Select the map and click the “Insert Media” button lower right.
Select “Media File” for the “link to” option. [This makes the image a link to the larger version of the map image.]
Green Section
The green section below in the Image widget are help aids such as a link to these instructions and not normally part of this page.
Final Steps
- Click the “Update” button at the bottom of the Elementor sidebar to save the page edits.
- Click the hamburger icon in the Elementor sidebar, then click the “Exit to Dashboard” button to exit Elementor.