Stratton Lake District

Model Basic Site 3.0 Instructions

Model Basic Site 3.0 Instructions

These instructions explain most of the components common to all pages of a lakekit.net site followed by instructions specific to each menu page.

Uploading the appropriate files to the hosting server and then connecting to a database at the hosting location to store the site data creates a WordPress.org site. Alternately, many hosting companies provide an automated process to create a new WordPress.org site. These new WordPress sites need modifications before they can be useful to a lake organization. Lakekit.net usually provides a new member with many of these modifications made for them. In addition, a model basic site oriented toward typical needs of a Wisconsin lake organization is available for learning site building and/or to use as a starting point for the organization’s site. Explanations of the new site modifications and the model basic site follow below.

  1. Recommended settings for a fresh WordPress site installation 
    Most of these settings are made before the new site is turned over to a new member.
    1. Dashboard -> Settings -> General
      1. The new member should make sure the site title and tag line are appropriate for the organization. Whether the title or tag line displays on site pages depends on how the page is built.
      2. The site email address is provided when the site is created. For member records accuracy, lakekit.net needs to be notified if the site address is changed.
      3. The time zone should be set to “Chicago” for Wisconsin’s time zone.
    2. Dashboard -> Settings -> Reading
      1. Home page display should be set to “static”. 
        The “Homepage” is usually the “Home” page.
        The “Post page” usually does not need to be set.
      2. Search engine visibility should be set to discourage search engine from indexing the site
    3. Dashboard -> Settings -> Discussion
      Uncheck “Allow people to post comments on new articles” unless the member intends to have a news page (blog) and wants to encourage comments.
    4. Dashboard -> Settings -> Permalinks 
      Make sure the Post name is selected and saved.
      [This will include the page title in the page URL (address).]
  2. Model basic site modifications
    After a fresh install and the modifications mentioned above, a the model basic site will often be installed. The model basic site is based on the Elementor WordPress plugin. The “drag and drop” capability of this plugin helps simplify site building. Although Elementor’s site building process can be kept very simple, Elementor provides for many enhancements if a member’s interest for this exists. The organization can simply replace the model basic site content with the its own information or remove it, and new pages can be added. Lakekit.net encourages members to modify the basic site to suit their needs and make their site unique if those involved with building and maintaining the site have the interest and time for that. Steps for utilizing the model basic site are covered further below.

The model basic site uses a typical layout for site pages – header, navigation (menu),  main content, and footer. If this type of layout (no side sidebars) is not set as the default, it may be selected at Dashboard -> Genesis -> Theme Settings. Then any new pages will startup with this type of layout.

The model basic site contains six pages. Each page has a green help box at the bottom which is not a component of the page content and should ultimately be removed. [Edit the page using Elementor: Dashboard -> Pages -> All Pages -> Hover over page title and click “Edit with Elementor” -> Scroll to the bottom green instructions area -> Hover over the green instructions area and click the “x” in the blue section icon  at the top of the green area to remove the section with the green help text.] The “Startup Instructions” link is this page. The “Step by Step Instructions” link provides instructions for creating the visited site page. Specific “Step by Step Instructions” already covered in the menu item to the left in the model basic site menu are not repeated in instructions for subsequent pages. As a result, learning the editing operations should proceed from the Home page, then to the About Us page, and continue progressing through the page instructions for the next menu item on the right.

Home
The Home page is the place a visitor arrives at if they enter the site address. Here visitors can get an idea of what your site offers .

About Us
The About Us page is the place to put background information for your organization. This about us page also offers a form for someone to contact the organization. [Using a form prevents the form receiver’s email address from being shared across the internet.]

Events
The Events page simply lists the upcoming events associated with the lake organization. The right column (often referred to as a sidebar) lists links to recent new items.

Gallery
The Gallery page shows an array of photos.

Records
The Records page contains links to various documents associated with the lake organization.

Webegum News
The News page lists organization news excerpts of the post category Webegum News. Posts are similar to pages but they are ordered according to the date created so the latest news is always the top excerpt.

The model basic site pages were created using the Elementor drag and drop plugin. These pages consist of Elementor header, page, and footer templates.

  1. To obtain the Elementor templates:
    1. Visit https://lakekit.net/wp-admin
    2. Enter the member’s username and password
    3. At the Members Only tab, drop down to Site Setup and then to Demo Templates.
    4. Follow the instructions to add the model basic site Elementor templates to the member site at Dashboard -> Elementor -> My Templates.
      1.  If you choose to download all the templates, continue directly below.
      2.  If you choose to download only the header and footer templates, continue at “Apply Header to Specific Pages” below.
  2. To transfer the Elementor page templates for site pages to site pages:
    1. Use Dashboard -> Pages -> Add New to create a page for each model basic site page using the same title as in the model basic site. 
    2. Use Dashboard -> Pages -> Hover over the page and select “Edit”.
    3. Click the “Edit with Elementor” button to open the page in the Elementor editor.
    4. Click the “ADD TEMPLATE” icon  button and then the “My Templates” tab.
    5. Hover over the page template desired and click “Insert”.
    6. Answer “Yes” to the question about importing the document settings of the template.
    7. The page of interest should be imported.
      [For the Webegum News page, the “Edit Posts” widget at the page top may need opening the Query option in the Content tab of the Elementor sidebar. Click in the Categories box and select the “Webegum News” category.]
    8. Click the “PUBLISH” (or “UPDATE” if saved previously) button (bottom of the Elementor sidebar) to save the page contents.
    9. To exit the Elementor editor, click the hamburger in the top left of the Elementor sidebar and then the “EXIT TO DASHBOARD” button.
  3. To transfer the Elementor page templates for the posts to site posts:
    1. Visit Dashoboard -> Posts -> Categories. Enter “Webegum News” as the title for a new cetgory.
    2.  Click the “Add New Category” to create the “Webegum News” category.
    3. Use Dashboard -> Posts -> Add New to create a post for each model basic site post using the same title as in the model basic site.
    4. In the sidebar on the right, check “Webegum News” to be a category for the post.
      Uncheck “Uncategorized” if checked.
    5. Use Dashboard -> Posts -> Hover over the post and select “Edit with Elementor”.
    6. Click the “ADD TEMPLATE” icon  button and then the “My Templates” tab.
    7. Hover over the page template desired and click “Insert”.
    8. The post of interest should be imported.
    9. Click the  “PUBLISH” (or “UPDATE” if saved previously) button (bottom of the Elementor sidebar) to save the post contents.
    10. To exit the Elementor editor, click the hamburger in the top left of the Elementor sidebar and then the “EXIT TO DASHBOARD” button.
  4. To use the model basic site header:
    The model basic site Elementor header template is included in the Dashboard -> Elementor -> My Templates list. Caution! The procedure below will make all pages (and posts) on the member site utilize this Elementor header. If applying the header to the entire site is not desired, please visit “Apply Header or Footer to Specific Pages” below.
    1. Visit Dashboard -> Elementor -> My Templates -> Header tab
    2. Hover over Basicsite-2 Header-b and click “Edit with Elementor”.
    3. Click the arrow icon to the right of the “Update” button at the bottom of the Elementor sidebar.
    4. Click the “Display Conditions” link.
    5. Click the “ADD CONDITION” button.
    6. The condition to include the entire site should appear.
    7. Click the green “PUBLISH” button.
    8. Return to the Dashboard using the hamburger icon top left.
  5. To use the model basic site footer:
    The model basic site Elementor footer template is included in the Dashboard -> Elementor -> My Templates list. Caution! The procedure below will make all pages (and posts) on the member site utilize this Elementor footer. If applying the footer to the entire site is not desired, please visit “Apply Header or Footer to Specific Pages” below.
    1. Visit Dashboard -> Elementor -> My Templates -> Footer tab
    2. Hover over Basicsite-2 Footer and click “Edit with Elementor”.
    3. Complete remaining steps as described for the header above.
  1. Sections are row (horizontal) areas in the Elementor editor.
    When hovering over a section, a blue section icon  appears at the top of the section.
  2. Sections may contain columns (vertical) areas.
    When hovering over a column, a black column icon  appears at the top of the column.
  3. Each column within a section may contain widgets.
    Widgets are functional or appearance components that can be dragged from the Elementor sidebar (left) to the visual content space (right).
    When hovering over a widget, a blue widget icon   appears to the top of the widget.
  4. A page in the model basic site consists of an Elementor header template, a WordPress page opened with Elementor, and an Elementor footer. Working with pages using Elementor is covered in the link to Step by Step Instructions for each site page in the green area at the bottom of each site page.
  5. To move a section, column, or widget, hover over the center of their icon and drag the item to a new location. A blue bar indicates where a section or widget will be placed.

The Header is constructed using the Basicsite-2 Header-b (Dashboard -> Elementor -> My Templates -> Basicsite-2 Header-b -> Edit with Elementor).

  1. To change the header image:
    1. Create a new browser tab and add the image to use into the Media Library (Dashboard -> Media -> Library -> Add New -> Select Files).
      The image should be at least 1400 pixels wide.
      Suggested image height is 200-300 pixels.
      If the image is not sized before adding it to the Media Library, it can be modified at Dashboard -> Media -> Library -> Hover over the image and click “Edit”.
    2. Back in the Elementor editor, hover over the main section.
      A blue section icon set  will appear at the top center just above the image.
      Click the center icon (6 dots) to reveal the section editor in the left Elementor sidebar.
      Click to get the Section widget in the Elementor sidebar.
      Select the Style tab and then the Background section.
      Hover over the image and click “Delete”. 
      Next click the blank image area and maneuver to the new header image in the Media Library.
      Select the image and insert it (bottom right).
    3. Click the Update button in the Elementor sidebar to save the edits.
  2. To re-position the Site Title: 
    [The site title is set at Dashboard -> Settings -> General.]
    1. Horizontal re-positioning
      Click the site title. This should reveal the section outline with 3 columns. 
      [This section is inside the section holding the image.]
      Hover over the 3 column outlines and find the vertical drag icon in between 2 columns.
      Drag the vertical line left or right to reposition the title text horizontally.
    2. Vertical re-positioning – option 1
      A vertical spacer widget is located below the site title text.
      Click the upper right pencil icon for the spacer.
      In the Elementor sidebar, change the space up or down to reposition the title vertically.
    3. Vertical repositioning – option 2
      Another vertical repositioning option is to change the top margin of the section containing the 3 columns.
      Hover over the section the Title widget is in (top center just below the image top) to reveal the section icons for this section.
      A blue section icon set  will appear at the top center just above the image.
      Click the center icon (6 dots) to reveal the section editor in the left Elementor sidebar.
      Select the Advanced  tab. 
      Click the pencil icon in the margin boxes to break the all-margins edit choice. 
      Use the up/down icon in the top margin box to move the title up or down.
    4. Click the Update button in the Elementor sidebar to save the edits.
  3. To modify the menu line appearance:
    1. Click in the menu line to reveal the Nav Menu widget.
      A simple modification might be to change the menu text color. 
      Click the Style menu and then the Normal button.
      Click the text color box, then change the color using the various options presented.
    2. Click the Update button in the Elementor sidebar to save the edits.

Elementor header or footer templates may be applied to any page. This feature both allows displaying different headers or footers on a site and devising a new header or footer before making it live on a site. To apply a header to a specific page, follow these steps:

  1. Open an existing header template.
    Dashboard -> Elementor -> My Templates -> Header -> hover over template -> Edit with Elementor
  2. Modify the header as desired.
    See Header Modifications above for help.
  3. Click “Save Options” arrow to the right of Update button in the Elementor sidebar.
    Save as Template with a New Name.
  4. Dashboard -> Elementor -> My Templates -> New Name -> hover over New Name – Edit with Elementor
  5. Click “Save Options” arrow to the right of Update button in the Elementor sidebar.
    Select “Display Conditions”.
  6. Click the “Add Condition” button.
    The default “Entire Site” conditions appears.
    Click “Entire Site” to show other options.
    We will select “Singular” for our example.
  7. Click “All Singular” and select “All Pages”.
    A third option “All” appears.
    Click  “All” and start entering the title of the page where the header should appear.
    The title list will appear the satisfies that includes the characters entered.
    Select the title desired.
    Click the “Publish” button.
  8. To apply a footer to a specific page, follow the above instructions for the the header.
  9. For additional documentation on conditions, visit https://docs.elementor.com/article/311-conditions.
  1. If the Footer is set to apply to all site pages as described above for transferring model basic site page, the footer is automatically generated and includes the site title.
  2. The footer template can be modified using the Elementor editor.
  3. The footer can be set to apply to specific conditions as described in the above “Apply Header to Specific Pages” section

To add or remove menu tabs:

  1. To add a page to the menu:
    1. Dashboard -> Pages -> Add New
      Enter a page title.
      Click the “Edit with Elementor” button.
      Click the “ADD NEW SECTION button to build your own page using the Elementor widgets.
      Select a structure with the desired number of columns.
      Add widgets as explained for the existing pages of the model basic site.
      Or click the “ADD TEMPLATE” button to work with an existing template available.
      Always click the “Update” button in the Elementor sidebar to save and publish the page.  
    2. Dashboard -> Appearance -> Customize -> Menus -> Menu 1 -> Add  Items -> 
      Click the page to add.
      Drag the added page to the desired position.
      Click the “Publish” button at the top to save the menu modifications.
  2. To remove a page from the menu:
    Dashboard -> Appearance -> Customize -> Menus -> Menu 1 
    Click the red x to the right of a page to remove that page from the menu. 
    Click the “Publish” button at the top to save the menu modifications.

The steps below describe how to make basic changes to the model basic site.

The colors for the site text may be set using the hamburger icon in the Elementor sidepanel when editing a page. These colors will apply unless other colors are chosen within a widget’s settings.

  1. Click the hamburger icon top right.
  2. In the Styles area, select the Default Color box.
  3. In the Color Palette area, click each box and change the color using either the color value or the movable color control handles.
    The Color Palette for the model basic site is set to #000000 for the primary, secondary, and text colors. The accent color is set to #ed702b (orange) to correspond to the default link color. 
  1.  Links at the bottom of each page in the model basic site give step by step instructions for that page (see green area at bottom of each page). Note that page instructions are most detailed for the Home page. To avoid duplication, instructions for pages with menu tabs on the left of the menu may not be repeated when a menu tab to its right is covered.
  2. Help for editing pages is also available at lakekit.net -> Members Only -> Site Setup -> Section 3. Visit Elementor documentation for additional help articles.
Toggle Content
Toggle Content
Toggle Content
Toggle Content
Toggle Content
Toggle Content

© 2023 Stratton Lake District. All Rights Reserved

Accessibility by WAH