LAUNCH KITS
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.
Here is how to select your template and get started!
Setting up your WordPress basics – the first thing you should do to make your WP site smart and easy.
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
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
More and more website visitors are using footer navigation – so make yours great again and don’t put unnecessary clutter in there. Watch!
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!
Add a menu to your website – and learn how to add pages correctly!
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
Don’t send ads to your homepage – they convert much better sending them to 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
Make your internal pages effective – and keep people going through your content with relevant “next step” calls to action.
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
Keeping a fresh blog on your website is key to keeping your website in front of customers and helpful information flowing to them!
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
You probably didn’t realize you need these 6 pages – but you can easily add them now!
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.
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!
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.
Keep your pages fresh – here’s how to edit rows, columns, images, text, and keep your pages unique and engaging!
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)