Published on 03/23/2021
Help Article Intro To Leiout
Jason Hoover
Leiout Developer
Katy Wellington
UX/UI Designer

In this Leiout tutorial you will learn how to use and set up the plugin element for flexible and easy to update components on a Trolley Web website.


Plugins are best used for more complicated layouts such as components that require more nested divs and wrappers. They are also great for making pre-set layouts in which all the user needs to do is fill in the corresponding inputs. It's follows the model of a wrapper and slides, where each slide is a predefined layout that repeats. It's useful for making customized layouts in addition to integrating with a javascript library that requires a certain markup in order to operate. Throughout this tutorial we will demonstrate a few examples of plugins. These examples will also be broken down.

Plugin Example 1
Screen Shot 2021-03-19 at 10.50.51 AM.png

For this landscaping service website, we made a testimonials plugin so that the structure of the testimonial card was laid out and for further testimonials, we would simply have to fill in the information for the next card. 

To build out this testimonials plugin, first you would add a section to your page. The entire plugin will sit in a single column. Next you drag and drop the plugin element. Next, you will need to open the plugin template. This can be found in the plugin element toolbar or if you hover over the plugin element cog on the handle.

In this plugin each of these cards has a name, date, rating, and quote in it. Think of each of these cards as a separate plugin slide. When creating the slide template, you will want it to follow this design. In the slide template you will write out the HTML for a card that has name, date, rating, and a quote. In this particular example, we used the bootstrap card structure. 

The HTML for the slide is:

The outer most div specifies the column size based on screen size breakpoints.  The class, slide, is added which allows you to edit the slide individually on the builder screen. Inside the card body the name, date, rating, and quote are mapped out.

Since this template is for all of the testimonial slides, you do not want to actually put any one person’s name, a specific date, or text here. Instead you will put placeholder variables which will be defined per slide. 

Once you are done creating the slide template, make sure to press update plugin slide. Next you will want to define the structure of the wrapper. The HTML for the wrapper is:

If you take a look at your slides you will see all of the variables ready to be filled in based on what was created in the slide template. 

Screen Shot 2021-03-19 at 11.04.56 AM.png

Helpful Hint:

Say that you realize that not all of the testimonials are going to have 5 stars. You can go back to the plugin template and create another slide template so that you can choose if the testimonial has 4 stars or 5 stars. You can rename each slide template accordingly.

The number in parenthesis lets you know how many slides are using this template. 

Screen Shot 2021-03-19 at 11.07.50 AM.png

In order to change some of the styling you can add CSS specific for these slides under the CSS tab of plugin template. If you wrap the CSS in plugin-unique_id (which we specified in the wrapper HTML) this will ensure that the CSS only applies to slides in this plugin. The CSS for this plugin is:

In the plugin toolbar that you can see all of the slides and you can change their order, edit them, or delete them. 

Screen Shot 2021-03-19 at 11.11.44 AM.png
Plugin Example 2

We can use plugins for all sorts of things. Here is a cool menu created on the expo template using a plugin.


This plugin is an example of when we would use the "text: multiple options" variable because in this menu we wanted to be able to put menu items in different categories. 

Plugin Example 3

In many Trolley Web templates, there is an owl carousel that shows logos of various clients. Looking at the template, you can see that the slide is simply made up of an image and the wrapper needs specific owl carousel classes as well as an id of plugin- unique_id, which will print out a unique number specific to this plugin. This can be appended to any name to make it unique.


HTML for slide:

HTML for wrapper:

This is a great example of a plugin with JS and CSS files appended to it. When you append a file, Leiout searches through files you have already uploaded.

You can also upload these files directly to this plugin instead of applying them to the entire site.   

Screen Shot 2021-03-19 at 11.35.19 AM.png

You can also place all other important javascript for this plugin in the JS tab. If you wrap the item in the unique-id variable then the plugin won't get initialized multiple times if you have multiple instances of it on the same page. 

One last piece we haven’t mentioned yet is the includes tab. This is where you can include your CDN for JS and CSS. 

Plugins are a great tool and I hope this tutorial has provided a better understanding of them for you.

Related Articles

Plugin Options

This article explains how to add and use multiple plugin options.

02, Aug 2021
Help Article Plugins

In this Leiout tutorial, you will learn about the different parts of the toolbar. You will learn about and how to use common toolbar options that all containers and elements have.

23, Mar 2021
Help Article Intro To Leiout
Navik Menu Horizontal

This article shows you how to install and display the Navik horizontal menu in Leiout!

16, Jul 2021
Help Article Design
Navik Mega Menu

This article explains how to create and use the mega menu functionality in Leiout navigation menus.

20, Sep 2021
Help Article Design