1. Home
  2. AccessAlly
  3. WordPress Theme Customization
  4. How to install AccessAlly Elementor Templates on your WordPress Site

How to install AccessAlly Elementor Templates on your WordPress Site

In this tutorial, we’re going to show you how to install our Elementor templates. By the end, you’ll go from a plain site to a customizable and professional-looking membership and course site.

You’re on your way to creating a custom site for your new course or membership. Like any new site, there is some setup. You might want to skip it and get right to the templates. But in the end, that route will cost you more time.

Think of your set-up similar to building a home. It’s the work of laying down the concrete, building the frame and installing all the piping that creates a sturdy and reliable home.

This setup work will all pay off in the end.

Please note: all theme template files are provided as-is. AccessAlly does not offer technical support for theme-related setup and issues.

1. What you need to get started

  • AccessAlly installed onto your WordPress website
  • Purchase & upload Elementor Pro Plugin: Purchase Elementor Here (this is an affiliate link)
  • Download Elementor templates from your AccessAlly Account
  • We are using Elementor’s Free Hello theme but most basic themes will work: Download Hello Theme
  • Basic Elementor and WordPress knowledge

2. Add your logo to your WordPress site

If you’d like your logo to appear on your site, you can upload it via your theme customization settings.

3. Customize your site colors & fonts with Elementor

You can designate your brand’s colors and fonts to be used on your site. This is a simple step in the customization settings:

4. How to upload & customize your templates

With the Elementor templates, there are two separate zip files that need to be uploaded to your site:

  • Header and Footer. These aren’t necessary but can give you more power in customizing your sites look and feel.
  • 7 Page Templates. These are your page layouts that include: Dashboard, Module Page, Lesson Page, Module and Lesson Page Combination, My Profile, Insufficient Access, and My orders.

Follow the instructions in this video to upload the .zip files:

Once the template .zip files are installed on your site, you can start by making the header look exactly the way you want it:

How to customize your Page templates

Follow the videos below to learn how to customize each of the page templates (dashboard, login, etc.).

Please note: The templates come with AccessAlly shortcodes pre-added to the pages. If you haven’t yet set up your content with AccessAlly, the shortcodes will not be able to render. (In other words: you’ll see them in editing mode, but the shortcodes will be invisible on a published page).

1. Customizing your Dashboard

2. Customizing your lesson pages  

And voila you’ve got your site customized and your first template installed!  Now you’ll go through each of your templates and customize them in a similar way, adding your AccessAlly and ProgressAlly components.

Written Tutorials. Click to reveal.

Add your logo to your WordPress site

ppearance → Customize → Site Identity → Upload Logo → Publish
Then Site Identity → Upload Logo → Publish

How to customize your site colors & fonts with Elementor

Navigate to the upper left hamburger menu in your Elementor Toolbar →  You’ll see your Color and Font Editor → Select Default Colors Click on the individual colors →  add your course colors → Apply → Update →  Repeat these steps for you Fonts

Upload your Header & Footer templates:

Templates → Theme Builder → Import Templates Choose File  →  Locate your Header and Footer zip file and select Open → Import NowIn your template list open your Header template (You won’t have the other templates shown here. You should only expect to see the Header and Footer that you uploaded)

Edit ElementorSelect the arrow located near the update button → Select Display ConditionsAdd Condition (this is what will tell Elementor where you want to see these templates) Set to Include and Entire Site → Save and Close Repeat steps 1-8 in this section for the Footer Template

Upload your Page templates

Upload your page templates (similar to the header and footer templates ) Templates → Import Templates→ Choose File → Import Now2. Pages → Located your Dashboard Page → Edit with ElementorNext, we are going to add our template to the page. Hover over the + symbol and click to add a new section.Select the file icon.Go to My Templates Locate your Dashboard template → Insert→ Select Yes

Customize your Header & Footer templates

To select your menu you’ll hover over the area you want to customize → When the border is blue you are hovering over an Element → Click on the PencilNavigate to your Elmentor Side Bar Editor → Select your menu → Update This is how you’ll edit every element throughout your site. Hover over it → Click on the Pencil → Edit Content or Style → Update 

Customize your page templates

Change Your Banner Section Color: Click on the Section Edit tab → Navigate to Editing Sidebar→ Click Style → Click on the Color → Change to your desired color→ UpdateEdit Your Text: Click on the Text area you’d like to edit → Navigate to the Editing Toolbar → Change your text → Update Add your icons: Hover over the column with the element you want to customize → Click on the Pencil → Navigate to the Editing Sidebar → In the “select course page” dropdown find your course → UpdateIf you don’t have 3 courses and you want to delete the extra columns: Hover over the Column → Right Click → Delete To delete the content that was on your page before you added your template: Hover over the section X in the → Clicking it will delete it → Update

And voila you’ve got your site customized and your first template installed!  Now you’ll go through each of your templates and customize them in a similar way, adding your AccessAlly and ProgressAlly components.

Additional Elementor Template Options

Elementor has recently released Course Template designs as part of their Template Library (this is an affiliate link.) You can use these Elementor created template designs and add AccessAlly elements to them like the progress bar shown in the example below.

You can view the Elementor Template Library here: https://library.elementor.com/

Elementor Course Templates Example Screenshot

Updated on May 5, 2020

Was this article helpful?

Related Articles

NO QUESTION GOES UNANSWERED

If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

Opt-In-Laptop.png

AccessAlly is the #1 WordPress Course and Membership Solution for Industry Leaders

WATCH THE DEMO

You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.