Presque Isle Lake Association

Search

For detailed instructions on how to create and edit content and how to work with menus to add and delete pages, please see lakekit.net > Members Only > Basic Instructions > Core Lessons, Lessons #1, 2B, and 3.

Site Startup Explanation

Lakekit.net provides new members with a model basic site oriented toward typical needs of a Wisconsin lake organization. This model basic site is the starting point for the organization’s new website. Explanations of the new site modifications and the model basic site follow below.

  1. Recommended settings for a fresh WordPress site installation 
    These settings are typically made before the new site is turned over to a new member, so these notes are shown here for reference only.
    1. Dashboard > Settings > General
      1. The new member should make sure the site title and tag line (if any) 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 email 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” or “Front page” 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 until the lake organization is ready to “go live” with their new Lakekit site. Some organizations may choose not to change this setting.
    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).]

 

Model basic site modifications
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 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 modifying 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 and contains six pages.

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. It includes links to recent news articles, a “Contact Us” link, and a newsfeed from Wisconsin Lakes.

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 lists the upcoming events associated with the lake organization. 

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.

  1. Containers are areas in the Elementor editor. When hovering over a container, a pink icon appears at the top of the container. The + sign adds a new container, the six-dots allow you to move a container, and the X allows you to delete the container. A container may be oriented horizonally, in which case a new container will be added to the right or left of the current container. Or it may be oriented vertically, in which case a new container will be added above or below the current container.
  2. A parent container is created when clicking the plus sign at the bottom of an Elementor page and does not have a rectangular icon at the top left-hand corner of the container. Typically the Flexbox container type is used. A container added from the widget panel on the left after a parent container is present will have a grey rectangular icon at the top left-hand corner of the container, indicating a child container.
  3. After a container is added to a page, select the structure with the direction arrows. Choosing the down arrow will result in additional containers being added above or below the original container. Choosing the right arrow will result in additional containers being added to the right or left of the original container. The pink line in the right content panel will indicate where the new container will be placed.
  4. Each container may contain widgets. Widgets are functional or appearance components that can be dragged from the Elementor sidebar (left) to the visual content space (right).
  5. When hovering over a widget, a pink pencil icon appears at the top right-hand corner of the widget. By clicking on the pink pencil icon, you will open up the widget for editing (e.g., to add text, an image, etc.)
  6. To move a container, hover over the six dots in the center of the icon at the top of the container and drag the container to a new location. A pink bar indicates where the container will be placed.
  7. For more detailed information about working with containers, please see https://elementor.com/help/container-element/
  1. To change the header image:
    1. Create a new browser tab and add the image to 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. Go to any page and hover over Edit with Elementor in the top black bar, then choose the header.
      A pink section icon set will appear at the top center just above the image.
      Click the center icon (6 dots) to reveal the container editor in the left Elementor sidebar.
      Select the Style tab.
      Hover over the image of the sailboat on a lake and click the trash can icon to delete the image. 
      Next click the blank image area (“Choose image”) and maneuver to the new header image in the Media Library.
      Select the image (bottom right).
    3. Click the Publish button to save the edits.
  2. To re-position the Site Title: 
    [The site title is set at Dashboard > Settings > General.]
    1. Horizontal re-positioning

      A child container holds the site title. 
      Layout tab > Width > 56%
      Advanced tab > Margin right > -425 px
      Lower the Title using the top margin in the Advanced tab.
      Adjust the spacer size to compensate for the margin change.
      The search widget is positioned at 78% left margin in the Advanced tab.

    2. Click the site title. This should reveal the container outline with 3 columns. 
      [This container is inside the section holding the image.]
      Hover over the 3 section outlines and find the vertical drag icon in between 2 columns.
      Drag the vertical line left or right to reposition the title text horizontally.

    3. 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.
    4. Vertical repositioning – option 2
      Another vertical repositioning option is to change the top margin of the section containing the 3 containers.
      Hover over the container the Title widget is in (top center just below the image top) to reveal the container icons for this section.
      A pink section icon set will appear at the top center just above the image.
      Click the center icon (6 dots) to reveal the container 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.
    5. Click the Publish button 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 Publish button 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 the steps as outlined here: https://elementor.com/help/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

In the top black editing bar, to the right of the Elementor logo and to the right of the + sign, click on the Site Settings icon . Click on Global Colors. Click each box to bring up the Color Picker and change the color using either the color value or click on the movable color control. The color palette for the model basic site is set to #000000 (black) for the primary and text colors, #10233C (dark blue) for the secondary color, and #4158CD (blue) for the accent color.

Help for editing pages and working with menus is available at lakekit.net > Members Only > Basic Instructions > Core Lessons > Lessons #1, 2B, and 3. Visit Elementor documentation for additional help articles.