Today, I would like to share with you a quick way to build a fully equipped website for online education and sell your courses using a recently discovered WordPress builder – Spectra.
If you’ve never worked with WordPress before, websites on this CMS are usually built using a specific builder. There are literally a ton of available examples nowadays. Some of them offer a free version (with an advanced Pro version), while others only have premium versions. These kinds of builders are designed specifically for people who want to set up their site in a short time without extensive coding or programming knowledge and do it on their own without the need to hire a specialist.
So, as I mentioned, there are numerous website builders, but only a few are popular, genuinely intuitive, and easy to use. As bright examples Elementor, Beaver Builder, Divi builder. However, even WordPress has its native page builder – Gutenberg, which is constantly improving to match the level of the mentioned brands (though initially, in my opinion, it was barely mediocre). On top of that, there are now more third-party tools, brands, and companies developing their unique blocks and widgets specifically for Gutenberg. So, in some cases, you might not even need to download or purchase separate page builders in WordPress.
Brainstorm Force has had its own branded builder based on Gutenberg called Spectra for several years now. I’ve personally tried it and can confidently say that building elements on it is a pleasure.
Furthermore, even before fully exploring it, I knew I would like it because all products from Brainstorm have been and continue to be very high-quality in terms of design, price, and functionality. For instance, their proprietary branded theme (ready-made template for a site) – Astra, is multipurpose and has already gained huge popularity as one of the most successful themes in WordPress history.
Enough long words, let me briefly tell you how, as an online instructor, you can quickly create a website for your school or individual promotion of your courses.
In fact, with Spectra, you can build various sites for different niches (obviously not only for online education). However, as I’m an instructor myself and use our WordPress plugin for creating courses, I’ll be looking at the principle of creating and editing a site using two tools – Spectra as a page builder and MasterStudy LMS as an e-learning engine.
Content Outline
- What is Spectra?
- Quick Installation Process
- Creating a page with Spectra – Quick Overview
- What Gives You a Spectra Pro?
- Conclusion
What is Spectra?
WordPress Spectra is a user-friendly page builder created by Brainstorm Force, designed to simplify website development on WordPress. Launched a few years back, Spectra was crafted for individuals and businesses seeking an intuitive, efficient, and versatile website-building experience.
It’s specifically tailored for those who want to create stunning websites without diving into intricate coding. Spectra offers a wide array of design tools, pre-built templates, and customizable blocks to create visually appealing and functional websites.
You can find Spectra as a free page builder, but it also has the extended premium version in case you need more options and widgets for your website.
Quick Installation Process
So, the first thing we need to do is install the MasterStudy LMS WordPress plugin. It’s a free tool, so no worries, you can easily install it the standard way through the Plugins section.
I won’t dive into the deepness of website setup, course building, and LMS page creation using MasterStudy. There is a detailed guide and a separate playlist on YouTube for that. I will just highlight that right after installing and activating MasterStudy, you will be prompted to import the demo site. Let’s go for it. The import process happens automatically, so all you need to do is click the Import button.
Well, we have got our ready-made site installed. Let’s see how it looks live.
Great! Now let’s head back to the Plugins section and search for Spectra. Find it and install it.
Right after activating Spectra, a window will pop up with all the necessary links: documentation, support services, the Facebook community, and even a welcoming video. So, you won’t get lost here for sure.
Creating a page with Spectra – Quick Overview
When you create a new page, you can spot a new Template Kits button. Let’s click on it.
I came across quite an extensive collection of page templates for various businesses and themes. There are templates for Electric Scooter, Book Store, Cosmetic Store, Real Estate, Advertising Agency, Homestay, Life Coach, Gift Shop, Language Tutors, and many others.
Most of them are free, but some are only available in the Pro version of the builder.
Apart from the theme templates, there are also block patterns categorized into light and dark modes.
For a more customized way of building your site, you can use a set of wireframes. These are blank blocks without content that you can fill in according to your goals. They are also categorized and available in both light and dark modes.
What I like about this is how intuitive and clear it all is.
Now, regarding individual blocks, each block has the following categories:
- General;
- Style;
- Advanced.
In the General section, you can change the width and height of the block by simply sliding the slider. You can also make the block stretch across the width.
In the General section, you can change the width and height of the block by simply sliding the slider. You can also make the block stretch across the width.
You can assign an HTML tag to the element/block from the available list (for example, you can change a div to a nav).
The block can be set as Visible (which is the default state), Hidden, or Auto.
Finally, there’s a separate section for configuring flex models with built-in properties: flex-direction, justify content, align items, and wrap. All these properties allow precise movement and placement of an element within another element.
Style section mainly allows you to manage colors, element backgrounds, borders, and spacing.
The Advanced section offers the ability to make an element sticky (moves along with page scrolling), set element animation, determine whether the element appears or disappears on three different devices: desktop, tablet, mobile, and also manage z-index (the element’s position level over others on the z-axis).
Overall, in Spectra, you get 35 free elements that you can use to build your website.
- Heading;
- Image;
- Buttons;
- Info Box;
- FAQ;
- Google Maps;
- Form;
- Post Grid;
- Price List;
- Review;
- Taxonomy List;
- Team;
- Icon List;
- Image Gallery;
- Countdown
- and the rest of the cool widgets.
Besides elements, as I mentioned earlier, you can also choose ready-made content patterns for your page right here in the standard Gutenberg Widget list sidebar.
What Gives You a Spectra Pro?
Great! Actually, even the free version of Spectra provides a ton of possibilities for creating and customizing pages. Surprisingly, it’s just as functional as brand giants like Elementor and Bricks Builder. But I find Spectra even more user-friendly and intuitive compared to other page builders.
Now, let’s explore what the premium version of the builder offers.
First off, of course, unlocking those templates that were unavailable in the free version.
Other significant features available in the Pro version include Loop and Popup builders.
Popups are widely used on many sites for various purposes, whether it’s informing about discounts or notifying about a giveaway. With Spectra Pro, creating these is quick and easy.
Some smaller enhancements include more animation effects for blocks, dynamic content, slider mode, a richer Image Gallery view, and an expanded range of elements and blocks added to the existing assortment.
So, the Pro version brings even more unique features and additional element choices.
The price for the Pro version starts at $59 for a single-site license (with an annual subscription. There’s also a Lifetime plan, but obviously, it’s slightly more expensive). For comparison, Elementor Pro offers almost the same for a similar price.
By the way, at the time of this post, Spectra has a 50% discount on all plans. So, if you’re intrigued by this page builder, this might just be the perfect time to snag the Pro version.
Note: The same Black Friday 50% discount is also valid for MasterStudy LMS with a chance to win an iPhone 15 Pro in a giveaway, so this is also worth exploring.
Conclusion
Generally speaking, I found Spectra is a promising WordPress page builder that offers extensive features and functionalities even in its free version. It stands tall alongside the renowned Elementor and Bricks Builder, boasting a more intuitive interface and ease of use.
The Pro version of Spectra unlocks a plethora of templates, along with other notable features like Loop and Popup builders, making it a versatile tool for diverse website needs.
With enhancements such as enhanced animation effects, dynamic content, and an expanded element library, Spectra Pro provides a range of options to craft engaging and dynamic web pages.
The final argument here is that Spectra perfectly works with many favorite and widely used WordPress plugins including MasterStudy LMS. So if you looking for a competitive LMS with a page constructor, Spectra and MasterStudy might be good options.