Section 7: Menus

Section 7: Menus

A menu is nothing more than a list of things we group together so as to make thing easier to find later on.

In other words we group like items together so that they will be easier to find.

In this section we will go over

  • The basics of the menu
  • How to create a menu
  • How to add items to the menu

Basics of the menu

In the Dashboard  menus are found under the Appearance tab.

Menu parts

  1. Create New Menu link
  2. Add menu items
    1. Pages, Post, Custom Links and Categories
    2. Select what you want to add to your menu and click Add to Menu
  3. Menu Structure
    1. Drag and drop system
    2. Click and drag menu items where you want them to go.
    3. Item can be nested
  4. Save Menu
  5. Delete Menu
section-7-1
section-7-2

Name the menu

  1. Add a name for the Menu
  2. Click Create Menu button

Select Content

  1. Select items to add to the menu
  2. Click Save Menu
section-7-4
section-7-5

Move items around

  1. Move the menu items by grabbing and dragging them up or down
    1. You can move items under other items, this is called nesting
  2. Click Save Menu to save your menu

Section 6: Creating a Page

Section 6: Creating a Page

In this section we will go over how to create a basic page.

A basic page is made up of 3 basic parts

  1. A title
  2. A story
  3. An image (in some cases you don’t even need the image but I would suggest otherwise)

The big difference between the page and the post is that the page can draw from multiple sources to convey a point.

Section 6a Parts

The important parts to a page are

  1. Title – something catchy
  2. Category – one or two words that best describe the page

Section 6b Order of operation

This is a suggested order of operation to creating a page

  1. Title
  2. Category
  3. Save Draft
  4. Edit with Elementor

Section 6c Creating a Page

Basic Page Layout

The basic page is made up of

  1. Page Title
  2. Article Section
    1. Article Header
    2. Article Content
    3. Article Source

Page Widgets

The Political News layout is made up of the following Elementor widgets

  1. Title Widget
  2. Text Editor Widget
  3. Inner Section with 2 columns

Page Title

The page title gets its information from the Title you gave the page.

Drag over a Title widget onto the page

To make sure your page title populates correctly, hover over the right side of the page title field and click on the blue pencil on the right side of the title field to engage the Edit Heading section.

Click the Dynamic link to open the drop down that will allow you to pick post title as the property you want the title filled in with.

Article Title

The article title is different as it will be set manually for this example.

Drag over another Title widget and set it on the page.

In the Edit Title section on the left fill in the title section with the content you want

Change the HTML tag to H3

Click on the Advanced tab in the Edit Title section

Click the gray box in the padding section

Change left padding to 24

 

Article Content

Drag over a Text Editor widget

In the Edit Text Editor section under Content add content into the text section.

To engage the Text Editor click on the  blue pencil.

Click on the Advanced tab in the Edit Text Editor section

Click the gray box in the padding section

Change left padding to 36

Article Source

The Article Source area is made up of 3 Elementor widgets

  1. Inner Section
  2. Heading
  3. Text Editor
*Click on the cluster of white squares in the upper right corner to view all widgets
Parts
Drag over an Inner Section Widget
Drag over and place a Heading widget into the first column
Drag over and place a Text Editor Widget into the right column
Inner Section
Edit Section Padding
  1. Click on the blue tab at the top of the Article Source section to engage the Edit Section
  2. In the Edit Section click the Advanced tab
  3. Click the gray box in the padding section
  4. Change left padding to 96
Edit Inner Section Column
  1. Hover over the left side of the first column and click on the grey box to access the Edit Column section
  2. In the Edit Column Section under Layout and set the Column Width to 20
  3. Click UPDATE to commit changes
Heading Widget
Edit Heading
  1. Click on the blue pencil to engage the Edit Heading section
  2. Add content in the Title area
  3. Change the HTML Tag to H3
  4. Click UPDATE to commit change
Text Editor Widget
Edit Text Editor
  1. Click on the blue pencil to engage the Edit Text Editor section
  2. Add content in the Visual editor in the Text Editor
  3. Select the Formats drop down button and select Blocks then select Div
  4. Click UPDATE to commit changes

Section 6e Creating A Template

Creating A Template

Steps to creating a template from an existing section.

  1. Right click on section you want to make into a template and select Save as Template
  2. Name template
  3. Click save

Section 6f Load a Template

Basic Page Layout

The basic page is made up of

  1. Page Title
  2. Article Section
    1. Article Header
    2. Article Content
    3. Article Source

Section 5: Creating A Post

Section 5: Creating A Post

In this section we will be going over how to create a basic post.

A basic post is made up of 3 basic parts

  1. A Title
  2. A story
  3. An image (in some cases you don’t even need the image but I would suggest otherwise)

Posts work best when they are kept to one thing.

  • A single meeting’s minutes
  • A single story
  • An article about an upcoming event

Section 5a Parts

Parts

The important parts to a post are

  1. Title – something catchy
  2. Category – one or two words that best describe the post
  3. Featured Image – image that ties into the post

Section 5b Order of operation

Order

This is a suggested order of operation to creating a post

  1. Title
  2. Category
  3. Feature Image
  4. Click to Publish

Section 5c Accessing Elementor

Elementor

Once you have clicked publish once, now click the Edit with Elementor button. This will allow you to add content to your post.

Section 5d Adding Content

Content

Using Elementor drag over a text editor widget and add in any text you like. You can add any of the widgets that will help tell the story.

Section 4: Setting Up The Footer

Section 4: Setting Up The Footer

In this section we will go over  the different parts of the footer and how to make it unique for your site.

Section 4a Footer Parts

Parts

The footer is made up of just two pieces.

A container and a single text editor widget.

Section 4b Adding Content

Content

You can add to the footer by adding columns by right clicking on the grey box and clicking Add New Column

You can then add more widgets into the new column space.

Section 3:Setting up the header

Section 3:Setting up the header

In this section we will go over  the different parts of the header and how to make changes to the header to make it unique for your site.

Section 3a Image/Logo

Parts of the Logo

The Header is made up of a site title area, a spacer, and a menu area.

By using Elementor you are able to move, change, add or subtract widgets to create content.

Section 3b Background Image

Background Image

To edit the background image start by clicking the blue box to access the Edit Section under the Style tab

This will give you access to the Image section where you can change the image.

The position section where you can set the placement of the image.

The attachment section which controls whether the image is stationary(fixed) or moves(scrolls).

The repeat section which tells the image to fill the space by repeating itself.

And the size section which defines how the image fills the container.

Click update to commit any changes.

Section 3c Nav Menu

Edit Nav Menu

Click on the blue pencil to engage the edit nav menu section.

You can pick which menu you want to use.

You can also choose to change the layout, the alignment, the pointer, and the submenu indicator.

Remember to click update to commit to any changes.

Section 3d Spacer

Edit Spacer

You can also edit any spacers in the header that were inserted for positioning reasons and make them larger or smaller.

Font Resize
Contrast