LAKEKIT.NET

Websites for Wisconsin Lake Organizations

Menu

Revert to Earlier Version of Post or Page

by

Have you ever made changes to a post or a page on your website while using the Elementor editor, only to discover that you don’t like what you see? If so, you have several options.

First, if you are in the Text Editor, you can click the “Undo” button (left curve arrow) in the left-hand editing panel to undo your changes.

Alternatively, if you have made changes and wish to discard your changes, and if you have not clicked on the green Update button, you can click on the three horizontal lines at the top of the left-hand editing panel and click Exit to Dashboard. A question will pop up that says

Leave Site?

Changes you made may not be saved

Click on the blue Leave button to discard your changes and go back to your Dashboard.

If you have made a change and wish to discard your changes after you have clicked on the green Update button, click on the grey History button at the bottom of the left-hand editing panel. It is the middle icon and looks like a backward circle. Click on the Revisions tab at the top of the left-hand editing panel. Select the revision that you wish to revert to and click on the green Apply button at the top of the editing panel. If you wish to preview the new look of the page, you can click on Preview Changes, an icon that looks like an eye to the left of the green Update button. When you are happy with the look of your page, click the green Update button.

Resizing a PDF file

by

If you would like to upload a PDF file to your Lakekit.net site but the file size is too large, you can resize it by going to https://pdfresizer.com

  • Click on Resize PDF, then click on Choose Files
  • Select the file to be resized and click Open
  • Click Upload files
  • When the file has been uploaded, choose a resolution
  • Click on Looks good, do the magic!
  • Click on Download on the right side of the screen
  • Give the new smaller document a name and save it to the destination of your choice

Your document has been resized and saved. You can now upload this smaller PDF file to your Media Library and use it on your site.

Working with Menus

by

Adding a New Post to your Website

In many cases, if your pages have been set up so that certain categories of posts are automatically added to appropriate pages of your website, you will not need to do anything other than create your new post and give it the correct category (and tag if needed). If you are adding a post to a page that has not been set up to automatically display posts with a particular category, you can add your post to a page as described below under Adding a New Page to the Site Menu. The only difference is that after you click on Appearance -> Menus, you will select Posts in the left hand column to see a listing of your Posts. Select the Post you wish to add and click Add to Menu. The post will appear at the bottom of the Menu Structure.

Adding a New Page to the Site Menu

A newly created page will not appear in your menu on the site until you add it to the menu. If you are editing in Elementor, after you are finished adding content to your page and have clicked the green Publish or Update button, click on the three horizontal lines at the top left of the Elementor Widget sidebar and click on the blue bar to “Exit to the Dashboard.” In the left sidebar of the Dashboard, click on Appearance -> Menus. In the Pages section, select the page you just created and click Add to Menu. Click the blue Save Menu button  at the lower right hand corner of the screen.

Changing the Position of a Page (or Post) in the Menu

When you add a page or post to a menu, by default, it is added as the last menu item. To move the new page or post to the location in your menu where you want it to appear, at Appearance -> Menus, put your cursor on the page or post name in the Menu Structure section and drag it up to the location where you want it to appear. Click the blue Save Menu button at the lower right hand corner of the screen.

Creating Sub-items (Sub-pages)

If you want the new page or post to be a sub-item under another page (for example if you have a primary page for records and you want to make a sub-item called Archives for older records), at Appearance -> Menus, put your cursor on the page or post name and drag it to the right of the primary page. You will see a dashed outline for the menu item positioned to the right of your primary page. When the new sub-page is positioned to the right and just below the primary page, let go. Click the blue Save Menu button at the lower right hand corner of the screen. The new page or post will now be a sub-item, which is accessed by hovering over the down triangle to the right of the primary page in your navigation menu.

Using Elementor

by

Getting Started - Logging In

You will log into your website by typing the website’s URL and adding /wp-admin/ in order to get to the dashboard. You will need to know your username and password.

backend parts lakekit net 1 dashboard

Editing the Content of a Post

To edit a post, go to the Dashboard by hovering over the name of the site in the top black bar of the screen and then clicking on Dashboard. Then at the dashboard, click on Posts -> All Posts in the sidebar (left hand column). This will bring up a listing of the posts on your website. Hover over the name of the post that you want to edit and click Edit with Elementor. This will bring up the Elementor editing screen.

Editing in Elementor and Working with Widgets

The content is displayed on the right side of the Elementor editor. Content in the Elementor editor consists of rectangular sections.

When hovering over a section, a blue section icon appears at the top of the section. Sections may contain columns (vertical) areas.

In the blue bar in the top middle of the section are icons as follows:

  1. + which adds a new section on top of the current section
  2. Six dots which can be used to move a section to another place on the post or post
  3. X which is used to delete a section

To move a section, hover over the six dots at the center of the blue section icon and drag the item to a new location. A blue bar indicates where a section or widget will be placed.

When hovering over a column, a grey column icon appears at the upper left hand corner of the column. Each column within a section may contain widgets. The column icon can be used to edit columns. For example, right click on the column icon and choose “Add New Column” to add another column to the section. You can then hover over the dashed line between the two columns to adjust the column widths.

Widgets are functional or appearance components that can be dragged from the Elementor sidebar (left) to the visual content space (right), such as the text widget and the image widget.

When hovering over a widget, a blue pencil icon appears at the top right hand corner of the widget. By clicking on the pencil, you will open up the content editor. Content is edited in the left hand column, which is the editing panel.

After clicking on the pencil icon, you can edit the text of a section by deleting old text and/or typing your new text in the left hand column, which is the editing panel. Do not edit in the area on the right, which is the Live Preview panel because you can’t always be certain where your cursor is located, and not all editing functions may be available to you in the Live Preview panel. When you have finished your edits, click the green “Update” button to update the content.

To return to the list of widgets, click on the 9-dot icon at the upper right corner of the left sidebar.

To add a new section, simply drag a widget (e.g., text widget, image widget, other) from the widget panel on the left side of the screen to the editing section on the right side.

Editing Text in Elementor – Adding Features

A number of options are available to you when editing text, such as putting text in boldface and/or italic type, underlining, changing the color of the text, making the text into bullet points, and more. After clicking on the pencil icon, these features are available in the left hand column (Text Editor).

Returning to the Dashboard

After editing a post or a page in Elementor and saving your changes by clicking the green Update button, clicking on the three horizontal lines at the top left of the Elementor Widget sidebar allows you to click on the blue bar to “Exit to the Dashboard” (for example when you want to edit another post or page).

Adding an Image

To add an image to its own section, add a new section and drag the image widget onto that section. Click “Choose your image” in the Image widget in the Elementor sidebar. Select the image in the media library (or click Upload Files if the image is not yet in the library and drag the image onto the screen) 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. Clicking on the image brings up the Elementor image editor, which allows you to position the image left, center, or right.

To add an image to an existing section, start by dragging the image widget onto the existing section, and then follow the instructions above.

To add an image at the top of the post, click on Posts -> All Posts. Choose the post to be edited. Hover over the name of the post and click Edit. Scroll down toward the bottom of the post until you see Featured Image in the right hand column. Click Set Featured Image and choose a photo from the Media Library by clicking on it, or upload a file from your computer and select the image. Then click the blue Set featured image button on the lower right. Click the blue Update button in the upper part of the right hand column to add your featured image.

Adding a Hyperlink to a Post

Clicking on a hyperlink takes the user to a new internet location.

To create a link using the text editor on the left panel, first enter the text to be linked and highlight (select) the text. Then select the paperclip editing icon (“Insert/edit link).” Enter the internet page address the link is to go to in the URL box, or paste the internet page address if you have navigated to it in a separate window and placed it on your clipboard. You can link to both external websites and to documents in your Media Library. Click the gear icon (Link options). Check the “Open in a new tab” box if desired. Click the “Update” or (“Insert link”) button. The link text will change characteristics to indicate the text is a link, usually a different color. Click the green Update button to save your work.

Adding a New Post

On the Dashboard, click on Posts -> Add New, or hover over the + symbol on the top black bar of the Dashboard and click on Post. Enter a title for the post.

Select a category for the post. This will control where the post appears on your pages. If your website has been developed using a technique that automatically places posts with certain tags on the appropriate pages of your site (for example, Agendas and Minutes), this step is critical in order for the posts to appear on the proper page.

To improve the ability of users to find information on your site, you may wish to add tags, which are keywords that you want to be associated with your post.

Set a featured image to appear at the top of your post if you wish – see above instructions under “Adding an Image to a Post.”

Select the “visibility” of the post in the Publish section, which is to the right of the site title:

Public = everyone can see the post

Private = only the site administrator can access the post

Password Protected = only users who know the password can access the post; if this option is selected, you will be prompted to enter the password; then click OK

Click the blue Publish button if you want the post to be immediately viewable prior to adding content. Then click the blue Edit with Elementor button, drag a widget or widgets onto your post, add content, and click the green Update button at the bottom of the Elementor widget sidebar.

If you do not want the post to be immediately viewable prior to adding content, click the blue Edit with Elementor button, drag a widget or widgets onto your post, add content, and click the green Publish button at the bottom of the Elementor widget sidebar.

Note that clicking the green Publish button will make the post available on the internet unless the visibility of the post is set to Private or Password Protected.

Adding a New Page

If you wish to add a new page to your website, you can follow the instructions for adding a new post, but start by hovering over the + symbol on the top black bar of the Dashboard and click on Page. Enter a title for the page and continue as above for adding a post.

Edit versus Edit with Elementor

When you hover over the name of a post, you will see two editing options – Edit and Edit with Elementor.

The Edit option allows you to change the overall characteristics of the post, such as its visibility, and to add or edit Categories, and add or edit Tags. Categories are used to control where on the website your post will appear, and Tags are used to control the position on the webpage. You can also set or change a featured image for the post through the Edit option.

The Edit with Elementor option allows you to add or edit content on the post.

Transition to Elementor and Genesis

by

Pre-2018 Lakekit.net sites will be transitioning from the Weaver Xtreme theme to Genesis, using a drag and drop page builder called Elementor.

First, a word of warning: developers are constantly enhancing their products and programs, and Elementor is no exception. Over time, these instructions may not perfectly match the sequence of steps needed to perform an operation. If you encounter a problem, you can first try checking out the documentation at Elementor.com. There is a huge body of information on the web about using Elementor, so you can also do a general web search. If you still don’t have an answer your question, you can send an inquiry by using the Contact Us link on the lakekit.net Home page or post the question to the lakekit.net support Forum.

1. Becoming familiar with the new lakekit.net site

  • Members Only section, including Site Setup and Demo Templates
  • Instructions, including this documentation and information on using Elementor and working with menus.
  • General Guide, which includes tips on working with widgets, adding links, etc.
  • Forums, which is a place to ask questions and get help from other Lakekit.net members.

2. Becoming familiar with basicsite-2.lakekit.net

  • New model template site
  • Includes a great deal of information about developing and modifying pages using Elementor
    • See Startup Instructions in the green section at the bottom of the Home page of basicsite-2.lakekit.net
    • See the Step by Step Instructions on each page of basicsite-2.lakekit.net, a link for which is located in the green section at the bottom of each page

 3. Using Elementor

  • Begin editing pages and posts using Elementor by first creating a Test page on your website for practice. This page will not show up in your menu, but you can use it periodically for testing. You can make sure that the new page will not appear in your menu by going to Dashboard -> Appearance -> Menus. Scroll down under the Menu Structure to Menu Settings and make sure that the box is NOT checked that says “Automatically add new top-level pages to this menu.”
  • On the Dashboard, click on Pages -> Add New, or click the Plus sign on the black bar at the top of the Dashboard and select Page
  • Enter a title for your page, such as Test Page and click the blue Publish button on the righthand side of the screen. Then click the blue Edit with Elementor button.
  • The Elementor edit screen is made up of three important sections.
    1. Elementor widget area
    2. Section Builder
    3. Live Preview window

While you generate your content by creating spaces and dragging widgets onto the page or post, please remember to click on the green “Publish/Update” button to save your changes.

  • Drag the Text Editor widget from the Widgets area on the left to the section builder on the right.
  • When hovering over a section, a blue section icon appears at the top of the section
  • Sections may contain columns (vertical) areas
  • When hovering over a column, a black column icon appears at the top left hand corner of the column. Right clicking on the column icon allows you to change the column width, duplicate a column, or add a column

  • 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)
  • To move a section, column, or widget, hover over the center of the icon and drag the item to a new location. A blue bar indicates where a section or widget will be placed
  • To add a new section, simply drag a widget (e.g., text widget, image widget, other) from the widget section on the left side of the screen to the editing section on the right side
  • Right click a section, column, or widget icon to obtain further editing options
  • While editing a page in Elementor, clicking on the 9-dot icon at the top right of the Elementor Widget section provides a list of all available widgets
  • While editing a page in Elementor, clicking on the three horizontal lines at the top left of the Elementor Widget section allows you to click on the blue bar to “Exit to Dashboard” (for example when you are finished editing a page with Elementor, have clicked “Update,” and want to edit another page)
  • When hovering over a widget, a blue pencil icon  appears at the top right hand corner of the widget. By clicking on the pencil, you will open up the content editor.

  • Content is edited in the left hand column, which is the editing panel. After clicking on the pencil icon, you can edit the text of a section by deleting old text and/or typing your new text in the left hand column, which is the editing panel. Do not edit in the area on the right, which is the Live Preview panel because you can’t always be certain where your cursor is located, and not all editing functions may be available to you in the Live Preview panel. When you have finished your edits, click the green “Update” button to update the content.
  • A number of options are available to you when editing text, such as putting text in boldface and/or italic type, underlining, changing the color of the text, making the text into bullet points, and more. After clicking on the pencil icon, these features are available in the left hand column (Text Editor).
  • To return to the list of widgets, click on the 9-dot icon at the upper right corner of the left sidebar.
  • Become comfortable with the Elementor editor, adding sections, using widgets, navigating back to the dashboard. Sections are row (horizontal) areas in the Elementor editor.

4. Transition to Genesis – new Header and Footer

  • When ready to move from Weaver Xtreme to Genesis, the new Genesis header and footer templates may have already been downloaded for you. If not, they are located here. Click on Zip File of Model Basic Site Elementor Header and Footer Templates Only
  • Go to basicsite-2.lakekit.net and click on Startup Instructions -> Header Modifications – see link here. Follow the instructions to change the picture in the header (reprinted below):
  • The Header is constructed using the Basicsite-2 Header-b
  • Go to Dashboard -> Templates -> All -> Header -> Basicsite-2 Header-b -> Edit with Elementor).
  • To change the header image:
    • Create a new browser tab and add the image to use into the Media Library if it is not already there (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”.
    • 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).
    • Click the Update button in the Elementor sidebar to save the edits.
  • To re-position the Site Title: [The wording in the site title is set at Dashboard -> Settings -> General.]
    • 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.
    • 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.
    • 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.
    • Click the Update button in the Elementor sidebar to save the edits.
  • To modify the menu line appearance:
    • 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.
  • Click the Update button in the Elementor sidebar to save the edits.
  • If using a practice page you may want to apply the header to one page as a test.
  • The 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 instructions here and click on Apply Header or Footer to Specific Pages. For additional documentation on conditions, visit this link.
  • Update the changes
  • When satisfied with the new header, apply it to all pages and posts as follows:
    • Go to Dashboard -> Templates -> All -> Header -> Basicsite-2 Header-b -> Edit with Elementor. Click “Save Options” arrow to the right of Update button in the Elementor sidebar. 
      Select “Display Conditions”
    • Click on “Display Conditions” and delete the existing conditions. Then click “Add Condition” and choose “Entire Site”
  • At basicsite-2.lakekit.net, click on Startup Instructions, then click on Footer options (described below)
    • The footer template can be modified using the Elementor editor
    • The footer can be set to apply to specific conditions as described above, but most sites will want to apply the template footer to all pages, as described above for displaying the Header on all pages
    • When satisfied with the new footer, apply it to all pages and posts as follows:
      • Go to Dashboard -> Templates -> All -> Footer -> Basicsite-2 Footer -> Edit with Elementor. Click the “Save Options” arrow that is located to the right of Update button in the Elementor sidebar. 
        Select “Display Conditions”
      • Click on “Display Conditions” and delete any existing conditions. Then click “Add Condition” and choose “Entire Site.” Click on the green Save and Close button.
  • When the new header and footer have been implemented, certain changes are needed to the site’s architecture to make it compatible with the Genesis Theme and Elementor
    • Move all content in Sidebars to a new section using the Elementor Editor. After content is moved, remove the sidebars on each page in Weaver Xtreme (in Layout, choose “No Sidebars, content only” then remember to click on the blue Update for the page).
    • Change the Contact Form if using Contact Form 7:
      • On the Dashboard, click on Pages -> All Pages and choose the page that has your current Contact Form 7. Click Edit (not Edit with Elementor) and remove the content from the page that relates to the old Contact Form 7 (it will be a code). Update the page.
      • Click on Edit with Elementor.
      • Drag the Heading widget to the top of a new section (remember that the nine-dot icon in the upper right corner of the Elementor sidebar always reveals the Elementor list of widgets)
      • Enter “Contact Us” as the title, or whatever title you wish
      • Drag a text widget below the heading
        Enter the text explaining the form use (e.g., “Please fill out and submit this form and someone will respond to your inquiry”)
      • In the listing of Elementor widgets, scroll down to the Form widget (in the “Pro” section of widgets) and drag it onto the section, below the text you have entered
      • This Form widget is the default contact form. Many additional options are available such as adding form fields
      • One addition is a hidden method to avoid robot submittals 
        Click the “ADD ITEM” to add another form field
        Click the title of this new item to display the settings for that item. Under “Type,” select the Honeypot type
      • Using the scroll bar on the side of the Elementor sidebar, scroll down to the Email section
        Enter the email address to receive the form entries
    • Update these Elementor edits – green button at the bottom of Elementor sidebar
© 2019 LAKEKIT.NET All Right Reserved
Site designed by Northern Graphic Operations using WordPress and Genesis
log in
Font Resize
Contrast