Transition to Elementor and Genesis

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

LAKEKIT.NET

Websites for Wisconsin Lake Organizations

Transition to Elementor and Genesis