Using the Page Designer

  1. Home
  2. Support
  3. Using the Page Designer
  4. Add Custom Classes, ID’s and Custom CSS Code in Advanced Module Settings

Add Custom Classes, ID’s and Custom CSS Code in Advanced Module Settings

To create your module, row or section designs you don’t need to have any knowledge of coding, as the design tab already offers plenty of options to take full advantage of each module and optimize its appearance.

Still, if you are a developer or designer, you might feel the urge to include some coding lines into your design to customize it even more. The good news is that you can do it by using the advanced tab on the module settings of the Page Designer. It appears next to the Content and Design tabs when you press the settings popup.

CSS ID & Classes

You can apply a custom CSS ID or CSS Class and refer to them by adding a Code module in the page, or by simply placing your custom code in the Customizer > Custom CSS/JS section.

Custom CSS

Instead of using an external style sheet (using a  Code Module or the Customizer CSS/JS section), you can also add custom CSS to the option boxes within the Page Designer. This code will apply uniquely to the individual structural part of the module, meaning the code will apply to the specific class inside the module code.

Hover next to the title to make a question mark appear. If you click on it, it will show you which class inside the module is targeted.

Attributes

The attributes section only applies to some modules of the Page Designer. This option lets you, for example, insert a custom rel attribute for the buttons or define an alt text for an image.

Transitions

Adjust the transitions timing, delay, and speed curve when you hover over a module.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?