Huge New Features in Thrive Suite – Early March 2021
That'll be your mind blowing...
...after you see what we've just added to Thrive Suite.
The latest software update has a few huge new features, on par with entire paid plugins. And if you've bought Thrive Suite, you get them all without paying a single extra dollar.
Read on to see why this is a big deal especially for online course creators.
1. New Image Gallery Element
Thrive Architect users, check your element tray. You'll find a brand new element called 'Image Gallery'.
This element alone could be an entire plugin for WordPress. And yet... it now lives quietly alongside every other beautifully designed element and feature we've added to Thrive Architect over the years.
When you drop the Image Gallery element onto your page, the WordPress media library will spring open... with one key difference:
Rather than selecting a single image, you can select multiple and place them into a WordPress gallery.
A WordPress gallery is just a collection of your images. From this window, you can drag to re-order them and add captions.
Once you're set, click 'insert gallery' and... Bam! Thrive Architect will assemble your chosen images into a grid on the page.
The 3 Gallery Types
The Image Gallery element offers 3 different layouts for your images: Grid, Vertical Masonry and Horizontal Masonry.
This will be your default gallery type, as seen above, with a matched number of rows and columns. The Grid gallery type is the only type that includes image cropping, to ensure images are presented in the same dimensions regardless of their upload size.
If you disable 'Crop images to fit', your images will spring back to their full dimensions, like this.
Keeping 'Crop images to fit' enabled means you'll have access to an 'Image height' slider. With a simple click-and-drag, you change the size of the crop until the layout looks just how you need.
But how do you control the image placement inside the cropped grid?
Easy. Click 'Edit Design', and then you can click to drag your images, just like in this video below.
Reposition your images in their cropped area by entering edit mode and dragging them into place.
This gallery type will maintain the same number of columns, despite your image dimensions.
There is no crop option because this gallery type will intelligently slot your images in next to each other to make sure 100% of the image is visible at all times.
The horizontal masonry gallery type keeps a consistent row height, but does away with the concept of columns. You simply set the desired image height, and the element will figure out the breakpoint between rows for you.
Resizing Your Gallery
Depending on the type of gallery you've selected, you'll see different options on the left hand side to control images per row, and spacing.
By reducing the spacing to 0px, each image will tightly press against the others with no white space in between.
If you enable captions, then any caption text loaded in your original WordPress Gallery will be displayed under their respective images.
Yes, you can edit and style your image captions right inside of Thrive Architect too.
Once again, click 'Edit Design' to enter edit mode, and select your captions. There you can type out new captions and apply styling across the whole gallery.
You can even choose to show your captions above, below or inside your images.
If you select 'Inside image', set can set vertical and horizontal text alignment. Add a semi-transparent background and your caption becomes a ribbon across the image.
Once you exit Edit Mode, any empty captions will be entirely hidden until you return to give them some text. That's attention to detail!
Images are often the biggest files included in a web page and can impact your page loading times. We've factored this in to our thumbnail size control.
In the sidebar of Thrive Architect, you can choose between 3 thumbnail size settings: Medium, Large and Automatic.
By default, any time you upload an image, WordPress will generate 4 different sizes of the image: a 150px square thumbnail, a medium image size (up to 300px wide), large image (up to 1024px wide), and an original image (the size you uploaded it).
Best practices for page load time is to load the image size closest to your intended display size.
If you set this to 'Automatic', then two things will happen.
- The gallery will automatically select medium or large images depending on your display size, with the breakpoint being 300px image display width.
- If you have Thrive Theme Builder installed and you have enabled our built-in image optimization with Optimole, then the 'Automatic' setting will always show the largest image size. That's because Optimole will magically compress and resize your images for you, but it requires a higher image quality to do so.
We highly recommend you enable our built-in image optimization with Optimole, and then forget about it. Your website will run faster, and your image files will be small.
Why override Image Size?
Depending on your website, you may want to control the image size yourself rather than leaving it to be set automatically.
For example, if you need your website to load as fast as possible despite having big images in your gallery, you can force the image gallery to load medium image file sizes every time- reducing your page size at the expense of visual quality.
But if you're a photographer or you are showcasing a portfolio and require very sharp, high quality images, select 'Large'. They'll take a little bit longer to load but the quality will be noticeable on high resolution screens.
In this new gallery element, you can control what happens when a visitor clicks on an image.
By default, the click behavior will be set to load a full screen lightbox view of that image.
You have the option to enable captions in the lightbox view, and to set what image size is displayed too.
Once again, photographers or websites with a need for very high image quality may want to choose 'original image size' to be loaded rather than large file created by WordPress.
Either way, the high quality lightbox images will not be downloaded on page load, meaning your load times stays fast. They will be lazy loaded once your visitors have shown intention to interact with the gallery by clicking on the images.
If you'd prefer, you can also set click behavior to 'none'.
Once your click behavior is set to none, you can optionally add a link to individual images in your gallery.
To do this, enter 'Edit mode' once and select any image.
Enable the 'Add link to image' toggle, and you can turn each separate image in your gallery into a link that takes your visitors either somewhere else on your website or offsite when they click.
Don't forget, you can customize the rows, columns and spacing between images per device, for mobile, tablet or desktop viewing.
And in Edit Mode, you can easily group-style the images in your gallery, adding borders, corners, shadows and even hover animations or image effects that apply across the whole group.
2. New Thrive Apprentice Course List
We're committed to growing Thrive Apprentice to be a leading online course platform for WordPress, and last week we released a new Course List element that is the best way to display your courses. Ever.
Best... both inside and outside of WordPress.
The Course List element is available in Thrive Architect when you have Thrive Apprentice installed.
If you have ever tried to customize a list of your courses with any tool before, then you'll know what I mean.
It's a headache! Clumsy shortcodes, rigid hard-coding, and inflexible forced designs that just don't fit your branding? Never again.
When you drop this element on your page, you'll be greeted with a window of super-flexible designer-made course list templates.
Pick your favorite, and immediately you'll see a beautiful display of your Thrive Apprentice courses on the canvas.
You can choose to display your courses in a grid, masonry layout with variable heights, or as a vertical list of full-width course cards.
But the real power of this element is found after you discover settings we built just for course creators.
Front-End Course Filters and Search
By default, each template will come with a topic filter and a search bar styled to match their template.
These are fully visually editable, down to the typography, spacing, corners, shadows, colors and icons.
Better yet... you can drag them anywhere on the page, and the filter will still apply to the course list they came from.
A search bar should be self explanatory, but the filters dropdown will allow you to choose which filter options you want your visitors to have access to: topics, access restriction labels, or both.
As soon as your visitors pick a filter or enter a search, the Course List will repopulate with courses that match their request.
New Dynamic Elements in Edit Mode
When you're ready to start tweaking the course list design, dive into 'Edit Mode'. In this view, you can move your course titles, images, descriptions, icons, texts... anything.
Changes you make will be group-applied to all the courses in the list too.
If you delete anything and want it back, open the element tray and you'll find 13 new elements you can drag-and-drop that will reload dynamic information from your courses.
All of your Thrive Apprentice course data will be available as dynamic text too!
What does 'Dynamic' mean?
When we use the term 'Dynamic', we're referring to linked information from the front-end of your website (seen by visitors) to the backend (where you set it).
For example, dynamic text is used for a course title. It is not written directly into your course list. If it was, then when you want to change the name of your course, you'd have to manually change it in multiple places on your website.
Instead by loading the title text dynamically, as soon as you update the course title in the backend of Thrive Apprentice, every single course list will immediately update to reflect the new title. Easy!
The course list element connects lots of backend settings to the front-end of your website. It's ridiculously powerful!
Dynamic Course Colors, Topics and Labels
In Thrive Apprentice, you can set a topic and restriction label for each course. The restriction label is an easy way to communicate which courses are free or need to be purchased.
But both restriction labels and topics can have colors assigned to them, not just text.
Inside of the course list, you'll find a 'dynamic colors' tab available where you can choose to load the topic or label color onto an element.
Where are these topics and labels configured?
In the backend of Thrive Apprentice, under settings, you'll find all of your dynamic values that can be assigned to courses.
Filtering Your Course List
This... this is where things get really interesting.
When you click 'Filter Courses', a window pops up with an impressive amount of filter control over what courses will show on the page. Just have a look!
You can select individual courses to display, courses only by certain authors, or courses on a specific topic.
You can filter by restricted content level to only show free courses, or only show premium courses. You can also check or uncheck which difficulty level you want to display, and the courses that show will only be those that match your filter settings.
But it's that last box on the bottom right that holds the most power: Course access and progress filters.
The option you choose here will show different results based on the access and progress of the logged in user, and will change depending on who is visiting.
Just let that sink in...
That means you can choose to show a user only the courses they already have access to! Or, vice versa, only show them the courses they haven't purchased yet.
That means with this one element, you can create 'My Courses' pages that list a students incomplete courses... or you can use it to upsell your existing students to other courses.
Now do you see what a big deal this is?
Note: Right now, Thrive Apprentice still has a default course home page that lists your courses and is not visually editable. We will have an update in the coming few releases that will let you replace that page with this new course list element.
3. Thrive Apprentice Course Overview Page Is Now Visually Editable
Related to the course list, we've now made the Course overview area in Thrive Apprentice fully visually editable.
When you open the Course Details tab in Thrive Apprentice for any of your courses, you'll see we've replaced an old text area with two new options:
'Course overview' (editable with Thrive Architect), and 'Set a course summary'.
The text area that was there before will remain visible in Thrive Architect, but often it's not ideal to show this on your Course List since it's better suited to a few short sentences rather than a long spiel.
So we now have a 'Course summary' field. Whatever text you enter here will show only in the description field on Course lists, meaning this area here:
As for your course overview, when you first load this page, there will be a WordPress Content element containing your old course overview.
We recommend you delete this, and then get creative with rebuilding an exciting course overview page with our design elements and pre-made content blocks. Anything you add to the page will sit between the 'About this course' title and the call-to-action button.
4. Thrive Apprentice Resources
Do you want to give your students even more value?
There comes a time when you're building an online course and you want to give your students access to other files, PDFs, images, documents, or links to pages on or off your website.
These resources are additional support for the content of your lessons, and now... they can be added into Thrive Apprentice in a few clicks!
When you hover over any lesson in the backend of Thrive Apprentice, you'll see an 'Add resources' button.
Click it, and a window will popup where you can connect any resources to your lesson.
You'll have the option to link to an external file or URL, upload a file into your WordPress media library, or link to content on your own website.
Resources are set per-lesson and are dynamic content, meaning that if you don't add any resources, then the block will be hidden from your lesson view.
But as soon as you do, a resources box will appear beneath your lesson content and will remain updated with the links and information you load in the backend of Thrive Apprentice.
What about the icons? Our designers have a small library of specialized icons that will display intelligently depending on the resource type.
Notice how there's a PDF icon and an image icon above? They were automatically applied to the correct resource based on the file extension.
5. Duplicate Courses and Lessons
Such a small feature, and yet so highly requested... we are pleased to now give you the ability to duplicate entire courses and specific lessons.
To duplicate a course, hover over the course card in the backend of Thrive Apprentice and you'll see a duplicate icon.
Duplicating a course will duplicate all of the modules, chapters and lessons contained within, including all of their content, titles, images and media.
A duplicated course will be unpublished, and so too will its lessons. It won't have any access restrictions either, since we'd expect you to configure that per-course in your final step to publishing.
Individual lessons can be duplicated by hovering over the 3 vertical dots on the right-hand-side of a lesson view.
A duplicated lesson contains all of the Thrive Architect content and media associated with the original.
6. Reset URLs of Courses and Lessons
This feature, also highly requested, goes hand-in-hand with the new duplication option:
You can now easily reset or edit the URLs of courses and lessons in a few clicks.
On the course details tab, type out your new permalink and it will instantly update. Links to the old URL will be redirected to the new one, unless another page on your site starts to use the old address.
For lessons, click on 'Edit summary' to get the lesson edit screen.
From here, enter your new lesson URL and you're done. Once again, links will redirect and your course breadcrumbs and internal links will immediately update when you click save.
It's a small feature, but very useful when you're now able to duplicate courses and lessons as a starting point for your course building.
7. Dynamic User Image
Did you know that images can be dynamic?
A dynamic image will change what's displayed depending on the source, and we've now improved our image element to load a dynamic User Image.
When you drop an image on the canvas, click 'Use dynamic source' rather than selecting from your media library.
Since you'll be logged in at the time, you're going to see your own image. Afterall... you are the user.
But this is different to an author image because it will dynamically display the user image for whoever is the logged in user. If you logged into my website, you wouldn't see my face in that image above... you'd see yours.
Profile pictures are locked in a 1:1 square ratio, since that's the standard of WordPress.
WordPress loads profile pictures from Gravatar, according to whatever email address a user registers on your website with.
Gravatar is a great way to globally set a profile image that works all across the web. You can change your Gravatar image by entering Users >> Profile in the backend of your WordPress site.
Why would you want to display user profile images?
With dynamic text, you can already create profile pages so that users can see their information. With the User Profile element we released last month, they can edit their name, email address, password and more.
Now you can include their image in their profile too.
If you're unsure how and why to use this yet, check out this article on how to build profile pages. Otherwise, don't worry too much... with this feature, we're laying the groundwork for more Thrive Apprentice changes to come.
8. Developer Documentation for 3rd Party Plugins
"What's that in the footer...?"
Over the last 8 months, we've been secretly reconfiguring how the code that drives our tools works.
One of the convenient side-effects of these changes is that we can open our tools to integrate more easily with 3rd party plugins and developers inside the WordPress ecosystem.
In other words, if you are a developer and you know what you're doing (or you hire someone that does), you can build your own custom plugin that talks to our tools through action hooks and custom functions.
In order to do this, you'll want to see our Developer Documentation which is now linked in the Thrive Themes website footer.
If you are a developer and you have any questions, or there are specific hooks and functions that you would require for a specific use case, reach out to support team.
They'll help you get started and can log your feature requests in our system.
One more thing... Tutorials!
Do you want to know how to make the most of our tools?
Our documentation team have been working hard to build the most impressive knowledge base consisting of dedicated video tutorials, step-by-step walkthroughs and articles.
We launched our new knowledge base last year and already it's being viewed over 40,000 times per month!
These aren't just "click here, do that" articles. Many of these tutorials show you how to combine features in new and powerful ways to build a better online business.
So, we're launching a new monthly tutorial newsletter, where you'll be notified of brand-new tutorials once per month.
This is in addition to our marketing newsletter, meaning you can subscribe and unsubscribe from the tutorial newsletter without affecting any other mailing lists.
Want in? Click below to sign up!
And as always-- we love hearing your comments, thoughts and feedback, as well as seeing how you're going to use these new features.
So please, drop us a comment below!