Quix 4.0 is here! Header Builder, Inline Editing, Fastest Template Framework & More...
đź’ˇ Quix Course
Enroll to our comprehensive Quix course here

Joomla Module Element

Joomla modules are lightweight and flexible extension that are used for page rendering. These modules are situated in the Joomla administrator panel. You can create a new module or use the existing one. After creating a new module you need to enable it from Joomla administrator panel and only then you can use in your Quix page. Joomla module element connects with the admin panel and allows you to bring the changes.

To know more about Joomla module you can click here.

To edit the modules from your Quix page, follow these steps:

  • Select Add New Element from column
  • An elements list modal will open
  • From there select Joomla Module element

Here you’ll find the following tabs - General & Advanced.These tabs will help you to modify the element in your own way. You can add new fields, edit settings, apply animations etc. The details are given below.

General Tab

The general tab holds the basic settings of Joomla module element. You can do the following changes here:

  • Module- Before selecting module, you have to enable it from Joomla module. Follow these steps to enable modules.
    1. Joomla administrator panel > Extension > Modules
    2. Select Module > Publish

After that, go to Quix page and select Joomla module from element list. Now from there select the module you want to use.

joomla module

Advanced Tab

The advanced tab has the advanced level of settings. You can edit them if you find it necessary or just leave it just the way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.

  • Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
  • Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
  • Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
  • Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
  • Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
  • Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.
On This Page