Introduction
In this video we’ll take a look at what the free version of Modules Anywhere is and how you can use it in your Joomla website.
Modules Anywhere makes it easy to place modules anywhere in your site by placing - what we call - a module tag.
We can include single modules - or complete module positions - inside articles, inside other modules, or even inside 3rd party components and template overrides. Simply … anywhere we want.
The free version of Modules Anywhere covers most of what we might need, while the Pro version offers even more in-depth control.
Now we’ll take a look at the Free version of Modules Anywhere. We will get into the Pro version in another video.
To use Modules Anywhere we will - of course - need to install it first. You can view the Modules Anywhere installation video to see how to install it.
We now have the latest version of Modules Anywhere installed, which at the moment is version 7.8.0. And what you see here is a Joomla 3.9.1 setup. If you are using newer versions, things might look a bit different.
Single module
These are the modules we currently have on our website. For example, let’s say we want to take our “Login Form” module, and place it inside an article.
We’ll go to the articles... And here we’ll play around in this main ‘Home’ article.
All we need to do is place a {module} plugin tag in the editor, using curly braces.
{module}
Then inside this tag, we tell Modules Anywhere which module to show. So in our case the ‘Login Form’.
{module Login Form}
When we now view our ‘Home’ article on the frontend, we can see that the ‘Login Form’ module is placed inside the article.
It’s really that simple!
We just used the title of the module in the plugin tag. But we can also use the id of the module. In this case, the id of the Login Form module is ‘16’.
{module 16}
And yes, that also works. Use whichever suits your needs best.
Editor Button
Modules Anywhere also comes with an editor button, which is very easy to use.
Instead of having to type the syntax manually every time, the editor button allows us to simply select the module we want from the list of modules. So we click on the title of the module we want to show. As you can see, that will generate the syntax using the module title.
But you might want to use the ID in the module tag, as we saw before. In that case we simply click on the ID button instead.
And now the module tag is using the ID.
Overruling HTML styles
Modules Anywhere also allows us to individually control the style of the module by adding extra parameters inside the tag.
We could type the syntax manually, but we can achieve this more easily with the editor button.
Here we have a “Module Style” dropdown. This by default will show a list of the basic styles available in Joomla modules. We can customize the list of styles via the Modules Anywhere Plugin Settings.
As an example, let’s use the “well” bootstrap style.
And we then select the module we want to show.
The Editor Button generates the correct code for us, making the process very easy.
{module title="Login Form" style="well"}
As you can see, the syntax has an additional “style” attribute.
And also the title of module is placed in its own title attribute. This is required when we add attributes to the module tag.
Anyway, let’s check out the result on the website.
Now the ‘Login Form’ in our article is surrounded by the “well” bootstrap style our template provides.
Show or Hide Title
As you might have noticed earlier, this editor button also has a “Show Title” option. This allows us to control whether to show the title of the module or not.
If we want to hide the title, we can simply select “No” here. We’ll also select that well style. And click on the module title button again.
{module title="Login Form" style="well" showtitle="false"}
A “showtitle” attribute gets added, with a value of either “true” or “false”, depending on our choice.
And now the module title is gone.
Module inside another module
A great advantage of Modules Anywhere compared to the {loadmodule} plugin that comes with Joomla's core, is that you can use these module tags anywhere you can enter text. So not only in articles. We can use the {module} tags inside components, template overrides. It works inside menu items. And even inside other modules.
Let’s try that. We’ll place our ‘Login Form’ module inside another module.
So we’ll first go to the modules. And we’ll place it inside the… “My Module”.
First, we’ll change this to a custom text we want to place above the Login Form.
And then, we insert our Login Form module here like we did before.
Insert username and password to Log into the website:
{module Login Form}
Here we go, we now inserted our Login Form module inside a Custom Text module.
Modules Anywhere works… well... anywhere!
Module position
We can, of course, also place entire module positions anywhere we want. To do so, instead of using the module tag, we use a modulepos tag instead.
{modulepos}
And then inside the tag, we simply add the name of the position we want. For example, ‘position-7’.
{modulepos position-7}
We can use the editor button to insert module positions as well.
We simply click on the position name we want on the side here.
Let’s see what that looks like.
Now, the whole ‘position-7’ is placed inside our article.
And that pretty much covers the free version of Modules Anywhere.
Pro version
The Pro version of Modules Anywhere adds the useful ability to overrule module parameters, as well as advanced security control. We will get into Modules Anywhere Pro in the next video.
Recap
So just to recap.
We have seen how easy it is to insert a single Module anywhere.
We’ve seen how to customize the style of the module… and how to use the Editor Button to help us along.
We have also seen how to insert a complete Module Position anywhere.
And we’re now excited to see what the Pro version can do!
Let’s head over to the next video that will cover the Pro version. Or, if you need, first watch the installation video to see how easy it is to get Modules Anywhere installed.