YOU CAN DO IT!

DIY SETUP & Website Design Boot Camp

Our 10 Lessons on website design will give you everything you need from start to finish – to create a smart, beautiful website for your business.

Looking to take your existing website to the next level? We’ve packed it with tips and tools to help you be successful along the way.

Our website design tips and techniques are based on 10+ years of experience in website design and helping companies grown online.

launch kit lessons wp 2 | Sparrow Websites

Hi, Im Justin!

I have been designing websites for entrepreneurs and small business owners (and a few large corporations) for over 10 years. I am excited to break down what works – and give you simple step by step instructions how you can elevate each part of your website with smart design elements and strategies.

QUESTIONS?

justin-rule-sparrow

Watch. Learn. Follow. Grow.

GO!

You can do it...

DIY KIT SETUP

Here is how to select your template and get started!

For DIY Kit Users - after this, you can skip to Lesson 2 below!

Lesson 1

Setting up your WordPress basics – the first thing you should do to make your WP site smart and easy.

Video One – Setting up WP Basics

 

How to Set Up

Start on Dashboard

Go to Settings (grey column on the left)

Click “General”

Enter Site Title (use your company name)

Write a Tagline

Administrative Address (your desired email address)

Scroll down and click “Save Changes”

 

How to Create Coming Soon Page

Go to “Pages” (grey column on the left)

Right-click on Edit with Elementor under the “Coming Soon” page (it will open in a new tab)

Right-click on the photo column to choose a new photo

Go to Style tab (grey column on the left)

Click on the photo and choose any photo in your files that you desire

Check to see the photo and setup looks good on a phone or tablet by choosing a “view” at the bottom of the grey column

Click the green “Update” button to save progress

 

Go back to the other tab with WordPress Dashboard

Click on “Quick Edit” under the Coming Soon page

Make sure Template says “Elementor Canvas”

Click “Update” to save (far right)

 

Go to “Appearance” (grey menu)

Then “Customize”

Click “Homepage Settings”

Choose Static Page

Make your Homepage the “Coming Soon” page (drop-down menu)

Click “Publish” (it is now live.. Showing your Coming Soon page)

 

How to make Permalinks

Go to Settings (grey menu)

Then “Permalinks”

Choose “Custom Structure”

Write: /blog/ or /projects/ (or whatever you’re planning to post regularly)

Click “Save”

 

How to Place a Logo/Icon

Go to “Appearance” (grey menu)

Then “Customize”

Click on “Site Identity”

Then “Change Logo”

Choose logo from your files (must be optimized for size… under 100 KB)

Click upload

Don’t crop it… Click blue “Crop” button (bottom right)

 

How to Create a Header/Footer

*For LaunchKit customers you have a Header & Footer already created… just needs customizing, so go to “Pages” (grey menu)

**For everyone else…

Go to “Templates”

Then “Theme Builder”

Click “Add new” (top of the page by the Title)

Select Header (or Footer)

Name your Template “Header” (or “Footer”)

Click “Create Template”

Choose your design

Click any section you wish to edit and add your personal information (phone number, email, address, etc.)

Click on Social Media icons and paste profile links in the grey column on the left (put social media icons in the footer only)

 

How to Customize header 

Add logo or other text that represents company:

Go to “style” and drag width slider to customize the size of your logo or company name

Right-click on the header and Choose “Edit New Menu”

On left, choose “Content” tab

Choose “Main” for Menu

Choose desired layout (left, centered, right)

Choose all other design features

 

How to Decide which Devices Hide Menu

Go to Mobile Dropdown

Under Breakpoint, choose “Mobile”

Make any other design choices specific to mobile

Click “Publish”

 

Under Publish Settings

Click “Add Condition”

Choose where you want this header to be shown (whole site or specific pages)

Then “Save and Close”

 

How to Fix Design on Tablet and Phone View

On the bottom left (in grey column), you can pick which device to view

Choose “Mobile view”

Right-click on logo image

Use the slider to alter the logo width as desired.

In “Layout” you can change how far the box extends by changing “Column width”

Right-click on the menu to change its position

Change sizes of all the individual elements to fit as you wish to see them on the mobile view

Click on “Save”

 

*Greyed out sections means they don’t fit.  Go to the “Advanced” tab to make those disappear.

Under “Responsive” click on “Hide on Mobile”

Design the layout of each of your header sections as you like

 

How to Edit a Footer

Start in Main Menu

Right-click on the Footer

Click and drag to desired size manually or use the slider feature (grey column on the left)

Right-click on footer

To change the background color, choose the “Style” tab

Click on the color box and pick desired color

Click Update

Lesson 2

Keep your headers uncluttered and helpful – and realize the purpose… it’s probably different than you think!

Video Two – Design a Header

 

How to Create a Header

Begin on Dashboard

Go to “Templates”

Then “Theme Builder”

Click on Header Tab (top of page)

Click “New Header”

Label it a header, name it, and “Create Template”

Close out the page of options to create from scratch

Click on + and choose full-width box

Right-click on section to edit

Look at grey box on left side of page and change Content Width to “Full Width” (drop-down box)

 

How to Add a Logo/Icon

Right-click in header column and choose “Add new column”

Slide column to fit logo and contact information

Click widget in grey box (top right of grey column)

Choose “Site Logo” / “Site Title” / Header / Image and drag to header and place inside

 

How to Add Contact Info

Click on widget

Drag “Header” / “Text Editor” to the right side of the header column (opposite your logo)

Type in phone number in text box

 

How to Link Contact Info

Highlight phone number in text box (grey column)

Click hyperlink button (looks like a chain)

Type in “tel:+1phonenumber” (no spaces or dashes)

 

How to Design Contact Info

Go to “Style” tab

Right justify (if desired)

Click in Typography to change the size

 

How to Add Menu

Go to Widget

Drag “Nav Menu” to header

Under “Layout” choose “Main” (drop-down box)

Right Justify

Choose a pointer feature (underline, boxed, text, etc.)

Pick animation style

Choose “sub-menu indicator” if you have drop-down options

 

How to Change Header Spacing 

Right-click on Header

Change “Content Width” to boxed

Use the slider below to play with the spacing

 

How to Change the Padding

Go to Advanced tab

Under Margins, change # to -20 if you want text closer to the edge

 

How to Change Text Placement

Right-click on box

Under Vertical Align choose “Middle” instead of “Default” (if you want text centered instead of hovering at the top of the box)

 

How to Check Multiple Views on Devices

At the bottom of the grey column, choose your view (Desktop, Tablet, or Mobile)

Choose when you want Main Menu to turn into a Hamburger (icon)

Go to Desktop view

Right-click on Menu (top of designed page)

Choose “Edit Nav Menu”

In grey column, look at “Mobile Dropdown”

Under Breakpoint, choose which device you want to have the Main Menu turn into a Hamburger icon (ideally, only mobile view)

Decide where you want the Hamburger placed (right/left aligned)

Test the change by viewing “Tablet” and “Mobile” views at the bottom of the grey column

Any issues with alignment on the view, right-click on the offending item

Click “Edit Nav Menu”

Go to Advanced tab in grey column

Margin should be 0 

 

How to Design Menu

Go to Style tab in grey column

Choose which section to design (Main Menu, Drop Down, Toggle Button… which is the Hamburger)

Background color will make your Toggle button stand out

 

How to See Mobile View

Right-click on Logo, choose “Edit Column”

Look at grey column under Layout

Change Column Width to 50% (if logo is too big)

Right-click on phone number, choose “Edit Column”

Change Column Width to 50%

Right-click on phone number heading, choose “Edit Heading”

Go to Style tab on the left

Change Typography size to 20 (or desired size)

Right-click on header and choose “Edit Column”

In grey column, under Layout, change design for Mobile View

In “Vertical Align” choose Top alignment (or desired placement)

 

How to Add a Button

Click on the Widget (top right of grey column)

Drag “Button” over to the header and place, as desired

Right-click on button, make edits in the grey column

Choose preferred alignment

Change your Call to Action on the button by typing under “Text”

Right-click on button and choose “Edit Button”

On the left (grey column), look at “Link” and paste in /direction/ (not full web address) of where you want the button to direct traffic

 

How to Hide Information

Right-click on portion you wish to hide on a particular device

Go to Advanced tab in the grey column 

Click Responsive drop-down section

Choose “Hide” on tablet

When you switch views, that item will turn grey (indicates it is hidden)

 

How to Add Special Features Bar

Click + on heading to add another section above it

Choose full box to make a row

Click the widget (top right of grey column)

Drag “heading” inside the row you created

Write desired text in the text box (in grey column)

Right-click on the new header to create a new column (divided in half)

Drag “button” into the new column you created in the header

Change the text inside the button to reflect what you’re advertising

Click on the Icon box

Search for an icon to match your text in the search bar

Choose desired icon, press “Insert” (bottom right)

Drag button where you want it placed

Right-click on full header

Under Content Width choose “Full Width” (drop-down list)

Click on text

Choose desired alignment

 

How to Change Background/text color

Right-click on full header and “Edit Section”

Go to Style tab (in grey column)

Background Type, choose the paintbrush

Click on the color box, choose desired color

Highlight text

Under Style tab, change text color as desired

Go to Typography drop-down

Use slider to change font size

Right-click on box that font is in

Under Layout drop-down, choose “Vertical Align” as desired

Under Transform, choose “Uppercase” (drop-down list)

Right-click on column that text is in

Alter the Vertical Align by choosing “Middle”

Right-click on the button

Go to Size and choose “Extra Small”

Go to Style tab

Under Background Color, choose a color that doesn’t compete with other Header elements

 

How to Hide Quote Button

Right-click on the button and choose “Edit Button”

Go to Advanced tab (grey column)

Click on Responsive (drop-down menu)

Choose where to hide the button (on desktop, on tablet, on mobile)

Check view for each device

On Mobile, re-design may be necessary

Right-click on the element you want to change

Under Content tab, go to Alignment and choose desired option

Right-click on another element that needs to change

Under Layout, change the Column Width to preferred size

Under Typography, you can alter the text size

 

Lesson 3

More and more website visitors are using footer navigation – so make yours great again and don’t put unnecessary clutter in there. Watch!

Video Three – Design a Footer


How to Create a Footer

Begin in Dashboard

Go to Templates, then “Theme Builder”

Right-click on the Footer already in the list and “Edit with Elementor”

It brings you directly to the created footer your LaunchKit provides


How to See Footer Template Options

Click + and choose the folder to see all the pre-designed footer block options you can pick from

Customize as you wish


Things you want in a Footer

  • Logo (left-hand side is most common practice)

  • Contact Information (drag and drop elements where you like)

  • Menu Options

  • Physical Address

  • Social Media (on the right)


How to Create Menu Options

Drag a header into a section of the footer

Type in text to introduce them to your website

Drag in Nav Menu in the same box (underneath the heading you just placed)

Under Layout (grey column), choose desired Menu option (main, header, footer, etc.)

Choose desired layout (horizontal, vertical)

Click on the widget

Search “Icon”

Drag and drop “Icon List” into Footer (beneath the menu)

Customize your icon list (in grey box) by typing in the items you want displayed in the footer (like Home, Services, Contact Us, Quote Forum)

Click icon box and choose desired icon

Press “copy” icon at the end of your menu item to duplicate the icon for each item


How to Edit Text in Footer

Right-click on each section within the column and choose “Edit Column”

Under Layout and Vertical Align, choose “Top” for each section (for consistency)

Click on the text in the footer

Under Content, choose ideal Size (H1, H2, H3, etc.)


How to Change Spacing Around Sections

Right-click on column and “Edit Column”

Go to Advanced tab

Change the Padding to 50 (for “Top”); checkmark for pixels instead of % (just to the right above “padding” section)

Perform this change for all the sections in your footer individually


How to Create Consistent Headings

Right-click on already created heading, choose “copy”

Right-click in desired section and “paste”

Drag and drop wherever you want it


How to Add a Map (with Button)

Click on the widget (grey column)

Drag and drop Google Maps into desired section of footer

Right-click on map, type in business address in left sidebar

Use zoom slider to show address in a region or particular town


In a new window, paste your address in Google search

Click “Get Directions” button under results

Copy the URL inside Google Maps

Go back to Elementor, click the widget

Drag and drop a button underneath the map

Name the button “Driving Directions”

Paste the URL into “Link” and click option to “open in new window”

Choose a pin icon to display on the button

Go to Style tab

Click on Background Color and choose color for the button


How to Line up Columns

Copy text (so you don’t lose it)

Click the column in the corner and “delete”

Right-click on model column (already on your page) and “copy”

Paste column where desired and change text

Paste original text in new column

Delete unneeded elements from the copied section


How to Create Padding Between Sections

Right-click on a column

Go to Advanced tab

Adjust padding or margins

Click the link button (right icon at the end of the boxes)

Type in desired number to adjust all the boxes across the board

If you make a mistake, change the one number back to your original desired number (for instance, the Top was 50.. And the rest will be 10)

Change each section in the footer in the same way for consistency


How to Change Spacing

Editing Menu items, go to grey sidebar under Style tab

Under “List” drop-down menu, change Space Between with the slider

Under “Icon” drop-down menu, change the icon sizes, as desired


How to Add Social Media

Click on Social media icon in the section

Go to sidebar and change link to your account address

Check to make sure the link opens in a new window

Click green “Update” button at the bottom of the sidebar


How to Fix Footer on Devices

Go to bottom of sidebar and choose “Tablet” view

Right-click one footer section and “Edit Column”

In Layout tab, change “Column Width” to 50

Perform this change for each section of the footer


Change alignment (just for tablet view) to “Center” as desired for each section in the footer


Change the padding for each section (like you did in desktop view) and change to 40 for “Top”


Check “Mobile” view (found at bottom of grey sidebar)

Change button to “right” aligned (under Style tab)


And… UPDATE!

Lesson 4

Add a menu to your website – and learn how to add pages correctly!

Video Four – Add a Menu

 

How to Place a Menu in Header

Begin in Elementor Dashboard

Go to Appearance, then “Menus”

First one to pop up will be the “primary” menu

On left, you’ll see most recent pages you’ve worked on; choose “See all”

Scroll to choose page to add to the menu, check mark

Click “Add to Menu”, then drag to place it in line-up where desired*

 

*To place a page as tier two another menu item, drag page directly under desired item and indent

Click “Save Menu” (bottom right)

 

How to Place a Menu in Footer

Go to “Select a menu to edit” on left side (drop down menu) and choose “Footer”

Choose desired menu items from the list of pages shown on the left

Click “Save Menu” (bottom right)

 

How to Create a Menu on Services Page

Click “Create a New Menu”

Fill in Menu Name with where you plan to place this menu (“Services”, etc.)

Click “Create Menu” (on right)

Add pages to new menu the same way as above, checkmark and add pages from left side

Click “Save Menu”

 

How to Place Menu

Go to top left where your business name is displayed (next to image of Home)

Right-click on “Open link in a new tab”

 

How to Change “Coming Soon” page to  “Home” page

Click “Customize” (top of page)

Go to left side and click “Homepage Settings”, then change “Homepage” to Home (in drop-down menu)

Click “Publish” (top of column)

Home page is now live

 

Under “Select a Menu to Edit” choose “Main (primary)”

View home page (in separate tab) to see new menu items in the header

Click on “Edit with Elementor” (in grey bar across the top)

Right-click “open in new tab”

Right-click on Menu and choose “Edit new Menu”

On left (grey column), under Content tab, you can place menu as desired

Choose desired alignment (left, right, center)

Submenu indicator is the symbol to show there is second tier of menu options

 

How to Change Mobile Menu to Icon

Breakpoint refers to when you want the menu items to turn into a Hamburger (a hidden menu underneath an icon) rather than having them displayed across the top of the header

Choose “tablet” under Breakpoint drop-down menu (on left)

Go to bottom of grey column and choose tablet view to check results

Click “Update”

 

How to Create Vertical Menu

Working in the footer, click in menu to edit

In grey column under Content tab and Layout drop-down menu, click “Vertical” under Layout

To change how menu is highlighted when hovering, change the pointer to however you wish to have your menu highlighted

To change the color of your text, go to Style tab and choose desired colors for each element

Click “Update” (bottom left)

 

How to Style your Menu

In grey column, go to Style tab

Choose device view (bottom of column)

Right-click on header/footer to change stylistically (menu, dropdown, toggle button)

To change location, go to Content tab under Layout

Choose an alignment for each element in your selected menu

 

How to Add Menu to Website Page

Begin on Home Page, right-click “Edit with Elementor” and open in new tab

In grey column, search for menu and drag “Nav Menu” over to desired area on page where you want a menu (a box must already be there in order to place something)

Label which menu you’re using by picking from the drop-down menu under Content tab and the Layout section

Edit as desired

 

How to Add a Template Menu

Right-click top center of page (the + sign, says “Add Section”), click on the folder icon

Pick a template header from the Header Library and click on it

 

It will land in your header and you can customize it as desired

 

Lesson 5

Don’t send ads to your homepage – they convert much better sending them to a landing page.

Video Five – Designing a Landing Page


How to Design a Landing Page

Begin on the Dashboard of Elementor

In grey column (on left), choose Pages

*For LaunchKit Customers, you’ll have a ready-made Landing Page available


For everyone else:

Choose “Add New” (top left of page)

Type in a title for your Landing Page (Ad Landing Page)

Scroll down page till you see “Allow Search Engine to share this page in search results?”

Choose “no” (drop-down options)

“Should search engine follow links?”

Choose “no”

Click Publish (top right)

Then go to far left (Home icon) and click back to main Pages menu

Find your “Ad landing Page” (or whatever you named it) and click “Quick Edit”

Check the Status (should be “published”)

Check Template and choose “Elementor Full Width” (drop-down menu)

Click Update (far right)


How to Choose a Landing Page

Right-click (to open in new tab) on Edit

Click on “Edit with Elementor“ (top of page in the header)

Go to design box in the body of the page and click on the folder icon

Search “Landing” (search bar on top right)

Pick from the library of ready-made design options to customize

Click “Insert”


How to Customize Landing Page 

Once template is inserted on your page, click on headline

Change text to whatever you desire

Click on tagline (underneath headline) and change text

Click on image

In left column, click on image to choose a different picture from your downloads

Click on button to select and change text in the button (in left column)


How to Edit Sections and Text

To remove a template section, right-click on any section and click the “x” (delete icon)

Any section with separate text boxes can be dragged to a different order

To edit content of any section, right-click and edit text from left column

To edit text in boxes, just click on the box and type new text

To add a header inside an existing section, just drag a header from the left column to where you want it

To change how your text is lining up in a text box, go to left column and type “<br>” to create a break and put text on next line

To make one part of your text bold, type “<b>” before it

To link to another page, go to link (in left column) and type “/page/“ (type any page name)

If you want to duplicate a particular section, right-click on section and “copy” for later

When you find where you want to have that saved section, right-click and paste

To make text uniform or change it as a whole, go to Style tab and choose any option under “Transform” and use the slider to change the size

To change a button’s features, make sure you select the button and then go to Style tab and change Border Color or Hover Animation to reflect your choices

To see your business’s main colors, go to Hamburger menu (top left of grey column) and choose “Default Colors”

To change a section’s background color, go to Style tab and choose coordinating color under Background drop-down box.. you can choose from default colors your business has already chosen


How to Create a Photo Gallery

Right-click on photo section and select “Edit photo”

Click on Widget (top right of grey column) and search “Carousel” and select

Click on photo spot to choose multiple photos from your downloads file and Insert

In grey column, choose display options

Change image size as you like (uniform sizing to fill out available space) under “Custom”

Slides to Show means how many will display at one time

Image Stretch, choose “yes” to make sure each image fills the box


How to Create an Anchor Link

Go to Link (in left column) and type “#go”

Choose location (on the landing page) you wish that button to get directed, such as “Pricing Plans”

Right-click and “Edit Section”

In left column, choose Advanced tab

In CSS ID, type “go”

Now when you press the button at the top of the page, it will automatically scroll down to “Pricing Plans”


How to Add a Form

In left column, drag “Form” to a box on your page and drop it where you want

Right-click and “edit form”

Name Form “Lead 2 Form” (no one will ever see the name, just for organizing purposes)

Click on each box you wish to edit.  You can change the type of box it is (email, name, phone #, etc) , the label (the text above each box), the placeholder (grey text inside box), whether the field is required to submit form

You can change one of your fields to a radio button so they can choose their preferences

Customize each drop-down section: Submit Button, Actions After Submit, Email, and Additional Options (see How to Program a Form for more Info.)


How to Program a Form

Right-click on the form (from your template)

In grey column under Form Fields (drop-down  section) change Form Name to “Lead Form”

Go to Submit Button (drop-down section) and change button text to something less generic

Make any other edits to color and size

Under Actions After Submit (drop-down section) you can add extra actions like sending an email or redirecting them to another page as a “success action” for pressing the button

Under Email (drop-down section), put your business email in text box 

Create a catchy subject line that will catch customer’s attention

Fill in a “From Email” (generic, no-reply)

Under “Additional Instructions” (drop-down section) you can customize your messages


How to Create Landing Page from Scratch

In design box (center of the page) click on the folder icon

Go to “Blocks” header

In drop-down list labeled Category, you’ll find all the options you’ll need to create your own Landing Page style

Type “Hero” to find templates for the top of the page

Type “About” for a template that highlights why someone would want to work with you

Type “Features” to explain what you business offers

Type “Services” to list off everything you provide

Decide where you could use an Anchor Link and follow those instructions


How to Create Views on Different Devices

At bottom of left column, choose Desktop view

To change header size, use Minimum Height slider as desired

To change fonts or colors, go to Style tab (left column) to change

To change spacing, right-click on problem section and go to Advanced tab and change Padding numbers until you like what you see

To change background photo, go to main section tab and right-click

In left column, click on photo to choose new background from downloads (under 400kb)


Change view to Mobile (bottom of grey column)

Make sure all the elements you added to your landing page (in desktop view) fit properly in Mobile view

Right-click on section that needs work and change your design in left column

To fix heading size, go to Style tab

Use slider in Typography to change size of heading

To change alignment, go to Style tab, Content drop-down section and choose how you want each text box to look in mobile view

Save Changes


How to Grab a Link

Start in Elementor Home Page

Click “View” under chosen Landing Page

Copy the URL that comes up when in viewing mode


How to Add Landing Page to Footer Menu

Begin on Home page

Click on Appearances, then Menus

Go to Select a Menu to Edit drop-down list and choose “Footer”

Checkmark your Landing page (in the list of Pages under “Add Menu Items”) and “Add to Menu”

Drag Landing Page to desired placement among other menu items

Click “Save Menu” (far right)


How to Remove Website Headers/Footers from Landing Page (& Create one of its own)

In Home Page, click “Quick Edit”

Under template choose “Elementor Canvas” (drop-down menu), and “Update”

Original Header/Footer is removed


Go to design box on your landing page and click the “+” icon and add a two-section box

Click the widget (left column)

Drag a heading to your new two-section box

Type in unique text (“Ready? Call us now!  (000) 000-0000)

Drag and drop site logo into other section and pick one from your downloads folder

Drag margins of text boxes to fit your space as desired


Lesson 6

Make your internal pages effective – and keep people going through your content with relevant “next step” calls to action.

Video Six – Design a General Page


How to Design a General Page

Dashboard to Pages and locate About Page

Right-click on Edit with Elementor (open in a new tab)

You can change header (H1) to “TEAM”

Sub-title could be “Why we started our company”

Right-click on blue center tab (middle of the page, appears when you hover over it) and “edit this section”

Go to grey column and click on the Style tab to change the background photo

Select desired image (1800 – 1900 pixels)

In grey column you can style the background and choose desired alignment, attachment is fixed (meaning image doesn’t move as you scroll down the page) or Scroll (image scrolls with you)


How to Link a Button

You can edit the button to say “read our blog” (if you have one) or “get in touch with us”

Click on the button and edit as desired in grey column on the left

Be sure to link your button to where you want it to go (just the extension, not the whole URL)

If you know which page you want, begin to type it in and your options will pop up underneath and input the whole address.  You only want the /contact/ portion… delete the rest.

If you want an icon on your button, go to the “photo” box labeled Icon to choose


How to Edit a Section

Right-click on blue tab to edit testimonial section.  

Choose how many testimonials (starts with two slots) and click on Item #1 to fill in all the blanks (the quote, the author, etc.) for each one.  

You can choose how they are displayed, whether on a sliding feature or you can simply insert a text box and keep them in list form.

If you want to remove a section, hover over the blue tab and click the “x” to delete it.


How to Hide a Section

Right-click on the desired section and click “Edit Section”

Go to Advanced tab (in grey column) and click on “Responsive” drop-down section

Under Visibility, you can click to hide on each of the platforms (each type of device)

Design elements are still available until you’re ready, they’re just hidden


How to Edit a Form

Click on the form and change your Call to Action

Right-click to edit the form

Go to left column and name your form “About Form”

Each box below gives one piece of information you can ask on your form

Change as desired by clicking on it and typing what you like

Go down to the Submit Button section

Change to “Let’s Chat” and choose an icon, if desired

Go to Actions After Submit section

Default is to send an email to customer

Go to Email section to fill in details about the email

Put in your email and label it “About Page Contact Form”

In return email section, use a no-reply@yourdomain.com email address

Put in a “from” your company name

You can choose “email field” and also add someone else from your organization to get a copy

Under Additional Options section, you can customize your email message being sent out

Click Update (bottom left)


How to Add About Page to the Home Menu

Since you’ve made these edits in a new tab, close the tab and go back to your Dashboard

Go to Appearances, then menus

Scroll down list of pages and find your new About Page

Click Add to Menu

Drag it to the top of your menu items. 

Open your home page and view your new menu items across the top of the page


Lesson 7

Keeping a fresh blog on your website is key to keeping your website in front of customers and helpful information flowing to them!

Video Seven – Adding a Blog

How to Add Blog Posts

Begin in Dashboard

Go to Posts – make sure you have at least 3 blog posts ready

If not, click “Add New” and write some blog posts


How to Select Blog Posts

Go to Appearance, then Customize

In left column, choose Homepage Settings

Go to Posts Page and select “Blog” (all three blog posts should come up)

Then Publish (top of left column)

To return to Dashboard, click exit “x” (top left of column)


How to Add Archive Template

Go to Templates, then Theme Builder

Click on Archive tab (top of the body of the page)

Click green button “Add New Archive”

Name your Template “Blog Archive”

Create Template


How to Design Blog Archive

You can choose a template for your blog archive in the library (*for LaunchKit customers)

Once you’ve selected your design, hit “select”

Right-click on Header and click “x” to delete

From left column, drag “Heading” over to that vacant spot and drop it in

Name it “blog & tips” or whatever fits your needs

In left column, label HTML Tag “H1”

Right-click on blue center tab (body of page) to “Edit Section”

Go to Style tab (in left column)

Choose desired background color

Right-click on search bar (or any element in your template you wish to delete) and choose “delete”


Right-click on column of where your blog posts are laid out

Click “Edit Archive Posts”

In left column (Content tab), you can make the following edits:

Turn Skin to “Cards”

Columns to “3”

Image size “medium”

Image ratio can be changed on the slider (as desired)

Keep title visible

Excerpt is the first few lines of your blog post (choose as desired)

Adding Meta Data is good for SEO (keep it to “date”; comments on your blog won’t help)

Keep “Read More Text”

Badge will show up on your blog photo to reveal the categories (you may/may not want that)

Under the Pagination and Advanced drop-down sections, keep everything as Default


Under Social Media icons, you can edit title to “Recently Published”

Right-click to “Edit Posts” 

In left column: 

Skin is “classic”

Column is “1”

Posts per page “5”, etc.

Go to Query drop-down section

Under “Order” you can choose whether ascending or descending order, by date, etc.

Or, you can delete the whole section if you don’t want it:

Right-click on whole section and click the “x”


Click Publish (bottom of left column)


Click center button “Add Condition”

Make sure it Includes “All Archives”

Click “Save and Close” (bottom right)


Bottom left will have a grey box that says: Hurry, your archive is here. 

Click “Have a Look” to see fully designed blog landing page


How to Edit a Blog Archive

On grey header menu, click “Edit with Elementor” and choose “Blog Archive”

At bottom of page, you’ll see the area to add new sections to your page

Click the folder, which takes you to the library

Select another template and “insert” (it will put it below the area you already styled)

You can continue editing the new section in the same manner as before, changing headers and images


Lesson 8

You probably didn’t realize you need these 6 pages – but you can easily add them now!

Video Eight – Top 6 Pages You Need

A Founder’s Page/Bio

Something that shows how your company is different from others; how you give back; who you are and what you’re about.


A Privacy Policy

Doesn’t have to be fancy, but Google wants it; pay a service fee to create one of your own and link it in the footer of your website; online generator.


Contact Page VS. Directions Page

People want to ask questions, they don’t necessarily want to drive to your location.  Have both options available for customers to decide what they want/need.


Feedback Page

Subtle way to let them have a way to tell the owners good AND bad reviews.  Give them a chance to share how they viewed your service.  Give them the option to hear back from you about what they said.


Have a link just for good reviews and another spot just for “how could I do better” reviews.


How to Get a “Review us on Google” Link

Go to Google

Enter your company

Click on “Leave a Review” 

Copy & Paste the URL link that pops up into a Google icon on your page


Promise/Guarantee about Service

No matter your industry or services provided, you need to be promising something to your customers: at the very least, excellent service.


Project/Testimonials Page

It can be a gallery of past projects or even a page per project with the backstory and an overview of how it was accomplished.


Lesson 9

Don’t puff up your site and slow it down with dangerous plugins. Here’s are top picks and some warnings too! We show you how to set them up correctly too!

Video Nine – Plug-ins: Do’s and Don’ts

How to Check Plugins

Begin in your Elementor Dashboard

Go to Plugins (left column)… you’ll want to review this page periodically to stay current on what needs updating


Plugins you SHOULD have:

Elementor (paid for and shared by Sparrow)

Elementor Pro (paid for and shared by Sparrow)

Gravity Forms (paid for and shared by Sparrow)


Plugins you should ADD:

Redirection

Duplicate Page

Yoast SEO (free; monitors SEO settings)


How to Add a Plugin

Go to Plugins

Add New

Search library for “Duplicate Page”

Choose the one with a blue square showing the “copy page” clipart

Install Now & Activate


How to Duplicate a Page

In Dashboard, choose a page layout you know you like and want to duplicate

Hover over selected page and click “Duplicate This”

It will appear directly under the original as a draft

Click “Quick Edit”

Rename the Title to what you’re planning to use it for (History, Services, About Me, etc.)

Change Status drop-down to Publish

Click Update

Go to “Edit with Elementor” (when you hover over your newly created page)

In left column, under content go to Title “H1” and change it to reflect your new page’s title

Choose a sub-title

Edit buttons

Change your background

Personalize your page as desired


How to Edit a Form

Right-click on the form field

In left column, change form name to reflect new page title “History Form”

Go to Email drop-down section

Add your email

Change subject line to reflect new page name (History)

Update


How to Install a Plugin

In Dashboard, go to Plugins

Add New

Search “Redirection” (picture of flowers… by John Godley)

Click “Install Now”

Click “Activate”

It will take you back to your list of Plugins

Locate “Redirection” in your list

Click on Settings (underneath Redirection)

Don’t make any changes, click “Start Setup”

Under Basic Setup, check “Monitor Permalink changes…” (protects you from revealing a dead link on your page if something gets deleted)

Check “Keep a log of all redirects…”

Check “Store IP information…”

Click “Continue Setup”

Wait until a green box pops up with “Good”

Click “Finish Setup” and allow to finish installation

Click “Complete”


How to Create a Redirect Link to New Page when Another Page is Deleted

Go to top tab (body of page) called “Redirects”

Click “Add New”

Fill in Relative URL “/first-name-last-name” 

Fill in Target URL “/team” (will take it to your team page)

To check, click gear next to “Add Redirect”

Make sure HTTP Code says “301 – Moved Permanently”

Click “Add Redirect”


How to Update to New Versions

In plugins, you’ll see a tan header saying there is a new version to install

Check the version number (3.5.5.1) and compare with the new version (3.6.2.1)… if first # is different, check for compatibility.  If second # is different, it’s okay to update.

Click “Update Now”

Update plugins one at a time (if you have several that have new versions available)

You’ll get a green checkmark saying “Updated” when it’s finished


Plugins you SHOULD NOT have:

Don’t get (free or purchased) a plugin off an untested website based on a Google search; instead, go to Plugins, then Add New to search through plugins that are vetted and reliable through Elementor

Don’t get a plugin that will “Bloat” your site; very heavy, boasting it will do 12 things.  You want plugins that have specific roles.

Don’t get a plugin that is untested.  In Elementor library, check bottom right of each plugin to see if it’s compatible or untested.

Don’t get a plugin that hasn’t been updated ; go to “More Details” and you can check their ratings from other users, go to Changelog tab to see what kinds of updates they’re doing.  If they’ve got lots of bug fixes, be cautious. Read what kinds of programs it’s compatible with.  Try to get one with at least 100,000 installations and good reviews.

Lesson 10

Keep your pages fresh – here’s how to edit rows, columns, images, text, and keep your pages unique and engaging!

Video Ten – Editing a Page with Elementor

How to Create a Page to Edit

Begin on Dashboard in Elementor

Find “Ad Landing Page” (created in video #5)

Hover over it and choose “Duplicate This”

New copy is directly below original (Draft, Elementor)

Go to “Quick Edit”

Name it “Demo Internal Page”

Change Status to “Published”

Change Template to “Elementor Full Width”

Click Update (far right)


How to Edit New Page

Hover over created page

Right-click on “Edit with Elementor” (opens on a new tab)


How to Delete a Whole Section

Hover over body of page to see section divisions

Each section has a blue tab in the center of the page

Click on the “x” to delete


How to Undo a Mistake

Go to left column

At the very bottom (near the green Update button), click the “History” icon

Click “Editing Started” and your last actions will be reversed


How to Edit Text

Click on text in the body of the page

Or go to left column and change text on the sidebar

Make sure you change font sizes based on Headings, subtitles or paragraph text

Change each section manually by clicking on it and choosing the correct the HTML tag in the left column


To change style options go to Style tab on left column

Color, font sizes, and styles

Make sure you check all the devices to see if your design works on each of them


How to Add Images

Click on any image on your page

Go to left column and make changes as needed

If you have a gallery set up, click on the images to see the rotation already in place to remove any you don’t want

If you want to add more, click “Add to Gallery” to choose more images from your download file

You can customize height and width if you have “Custom” on Image Size or you can choose “Full” which keeps photos in their original state (horizontal or vertical)


How to Place an Image

Choose the column you want to add an image

Right-click on the column, then “Add New Column” 

Change Content Width if column doesn’t fit well by using the slider tool (left column)

Drag image (from left column) to the column you added

Click on image to add from download folder

Right-click on the new column and go to Advanced tab to change the padding (as desired)

To add a Carousel or Gallery of images, search in the left column

Drag desired option to spot in the body of the page 

Add photos from your download folder

Edit appearance from Image Gallery (on left)


How to Optimize Images for Your Website from Your Phone

Go to training gallery on https://www.sparrowwebsites.com/library/updating-your-site/

Uses Birme.net as a tool 


How to Keep Two-Column Section Aligned Together

Right-click on a column

In left column under layout drop-down section, you’ll see Vertical Align

Change to “Middle” (instead of Default)

If your two columns have different heights, the shorter will now stay centered against the longer


How to Add Text

Go to left column

Drag Text Editor to column/section you want to add more content


How to Create Background Images and Colors

Choose any section

Right-click on blue tab and “Edit Section”

In left column, under Background, choose a color for solid background


Right-click on center of blue tab and “Edit Section”

Go to Style tab (on left column), then Background drop-down section

Go to Image box and click

Select image from download folder

Go to Background Overlay drop-down section

Look at Opacity and use slider tool to lighten or darken background photo, as desired


For a gradient look:

Go to Background Type and choose the square icon

You can choose a Color for one side of the background image

Choose a second color for the other side of the image

Using the Location slider changes the opacity from left to right across the image

Change Angle slider to determine how far you want the gradient to come up the photo


Check all your changes on your various devices

Go to bottom of left column to switch the view

Make edits as needed


Update all your changes (green button on the bottom of left column)


How to Change Image View

In left column, go to Style tab

Under Background drop-down section, choose desired Position

CenterCenter perfectly centers your image (or you can choose another option to focus on a different part of your image)

Choose another device to view how your image looks and customize it by device, if you want


How to Copy a Layout

Choose section you want to copy

Right-click on blue tab and click “Duplicate”


How to Add Section

Right-click below the spot you want to add your new section, click the “+”

Click on the folder icon

Go to Blocks tab

Use drop-down list to select a category of topics to pick a theme of templates

Choose the template you want and “Insert”

Customize as desired

Update and add to your menu (shown in video #4)


Starting at $50 to setup – wait till you read about this:

Launch Kits

Don’t need a full website yet? Or, need someone to do the heavy lifting so you can do the fun stuff? Get a launch kit website with all the power of a full site (blog, forms, service pages and more!), custom domain, and 10 Week Digital Marketing Boot Camp!