Getting Started

When you purchase our Joomla! template, you’ll then be taken to the Downloads page. Click on the “template” file name to download or you can check back anytime by going to Customer Area page.

Template Installation

Download the template installation package template_j3_VERSION.zip and install it by following the official Joomla template installation instructions.

Joomla Demo Packages

Browse the Customer area and download one of the Joomla demo packages NAME_joomla_quickstart_j3.zip. Unzip it to your web server directory. Now just follow the regular Joomla installation instructions:

Step 1 - Navigate to your domain and start the installation process

Step 2 - Database: select database type, host name, Database Username, Database Password, Database Name

Step 3 - Configuration: add Site name, Admin email, Admin username and password

Step 4 - Remove/Rename "installation" folder: for security purpose, you need to rename or remove the "installation" folder

Once this final step is complete you’ll have a fresh install of Joomla, along with the template and all the settings and content needed to match the demo, including sample article content.

Open Video Guide

Updating

This is the biggest update for our templates that based on Helix Ultimate, new Joomla module positions and new feature settings are added. If you are using older version, you can follow this tutorial to import/export the settings from new version too old version.

List templates effect on this update: Tixo II, Factory II, Minima II, Blank II, BusinessX, Cleaner, Bold, Edu II, Mida II, Construction II, Rachel II, Nitro II, Finadvisor II, Enterprise II, Nova II, MMA, Fixnox, Lemo

You can install the new Quickstart in localhost or live hosting then export the settings (json file) by following:

Export Settings

Open the template settings, go to Settings → Advanced → Import & Export

Import Settings

Next, open the template_name.json file settings using Notepad/Atom/Visual Code. Copy all json code then move back to your old site that you want to import the new layout settings. Go to Settings → Advanced → Import & Exportand paste the JSON code into the field, click Import Settings.

Here the result for header layout (Tixo) after import the settings

Access to settings

After you installed and activated Warptheme template, open the Joomla Template Manager by going to Extensions → Templates → Styles, edit a style which is based on the helix ultimate framework template and click on the Template Options button.

To the left side of the screen, you get the Helix Ultimate default settings options categorized in group like Basic, Presets, Layout Builder, Navigation, Typography, Blog, Custom Code, and Advanced. Let’s learn about each of these options in next sections below.

The Basics

If you are new to Helix Ultimate, these guidelines will help you understand the basics of working with our powerful Helix Ultimate template.

Overview

Helix Ultimate is an advanced, functional and ready to use template framework for Joomla. It’s a user-friendly, modern, and highly customizable tool to build Joomla templates easily. Our Joomla templates are based on Helix Ultimate Framework and the front-end framework UIkit.

The Logo is the brand identity of a website. By default, it is always displayed on the top left of each page. This can be changed by choosing a different predefined header layouts.

Logo Text

Type in the Logo Text that will be used in case no Logo Image from your media library has been picked.

Logo Image

Upload your logo in the SVG file format for best quality on all screens. Alternatively, you can use PNG or JPG in a high resolution so that the logo looks sharp on all displays.

Toolbar Position

Position Description
toolbar-left toolbar-right These toolbar positions are located above the theme header. By default, the social icons and contact info are located in these positions.

The toolbar is only displayed when the toolbar-left or toolbar-right positions have anything to display on the current page. For example, social icons or the search might be configured to show in the toolbar. By default, the content of the toolbar is constrained to the default container width.

Set the maximum content width for the Toolbar using the Max Width setting. The Default, Small, Large and Expand options add a horizontal padding which adjusts to the viewport width.

Setting Description
Max Width Set the maximum toolbar width.
Center Center the toolbar so the toolbar-left and toolbar-right positions appear in the middle of the page.

Prepared header layouts define the position of logo, navigation and search. The header layouts consist of three visual positions: logo, navbar and header.

Position Description
Logo This position displays the logo.
Navbar This position displays the navbar itself as well as the navbar module position.
Header This position displays the header module position.

You can select whether the social icons and the search show up in the navbar or header position.

Settings Overview

The header and its elements are visible on every page. These header settings apply to desktops and larger devices. All settings for the mobile version can be found in the Mobile documentation.

Max Width

Set the maximum content width for the header and navbar using the Max Width setting. The Default, Small, Large and Expand options add a horizontal padding which adjusts to the viewport width. Additionally, the logo padding can be removed for layouts where logo is positioned on the left.

There are three options available to control the header navbar position and its behavior.

Setting Description
Static The navbar will move out of the viewport on scrolling.
Sticky The navbar will stick at the top of the viewport on scrolling.
Sticky on scroll up The navbar will move out of the viewport when scrolling down, and it will become sticky on scrolling up

Favicon

The Favicon appears in the browser tab and your bookmarks as soon as you bookmark a website.

Header Height

Set the header height to increase the height for navigation bar, default: 80px

Header Off Canvas

Choose between Slide, Reveal and Push offcanvas modes. Additionally, you can overlay the site with the background color to prevent from scrolling and navigating the page when the offcanvas bar is open.

Option Description
Slide The offcanvas bar slides on top of the page content.
Reveal The page content moves out of the viewport revealing the offcanvas bar underneath it.
Push The offcanvas bar pushes the page content out of the viewport.

Mobile

On mobile devices the header is replaced by a mobile version, which just shows the logo and a menu toggle to display the navigation. The header that is displayed on desktops and large devices can be configured in the Header section.

Breakpoint

Use the Breakpoint setting to define the device size at which the desktop header is replaced with the mobile version. The optimal breakpoint setting highly depends on the number and sizes of navbar items in your header.

Breakpoint Description
Small Show the mobile header if the device width is below 640px.
Medium Show the mobile header if the device width is below 960px.
Large Show the mobile header if the device width is below 1200px.

There are three options available to control the mobile navbar position and its behavior.

Setting Description
Static The navbar will move out of the viewport on scrolling.
Sticky The navbar will stick at the top of the viewport on scrolling.
Sticky on scroll up The navbar will move out of the viewport when scrolling down, and it will become sticky on scrolling up

Logo and Menu Toggle

The mobile header consists of two visual parts: the logo and the menu toggle.

Options Description
Logo Choose between left and right alignment, center the logo or hide it.
Menu Toggle Choose between left and right alignment or hide the toggle.
Menu Toggle Text Show the text label Menu next to the hamburger icon.

Offcanvas Accordion

By default, child menu items are always visible (offcanvas mode). Enable this option to apply an accordion effect and multiple open subnavs.

Accordion not enabled

Accordion enabled

Menu Style

Choose the Menu Style and center the menu and the content horizontally.

Options Description
Menu Style Choose between the Default menu and the Primary menu with a larger font-size.
Center horizontally Center the menu text and the content of the mobile position.

Menu Animations

There are three different menu animations to display the menu when toggled.

Animation Description
Offcanvas An offcanvas sidebar slides in from the left or right side of the page.
Modal A fullscreen modal fades in while covering the whole page.
Dropdown A dropdown slides in from the top of the page.

Optionally, for the offcanvas and the modal animations, you can choose to center the menu and the content vertically.

Mobile Off Canvas

Choose between Slide, Reveal and Push offcanvas modes. Additionally, you can overlay the site with the background color to prevent from scrolling and navigating the page when the offcanvas bar is open.

Option Description
Slide The offcanvas bar slides on top of the page content.
Reveal The page content moves out of the viewport revealing the offcanvas bar underneath it.
Push The offcanvas bar pushes the page content out of the viewport.

Search Position

As described in the Header Layout section above, you can choose to display the search either in the navbar or the header position.

Seach module on navbar position

Seach module on header position

You can also assign any Joomla module to the navbar or the header position. Example screenshot above, you can see we added custom html joomla module for contact button to header position

Search Style

Choose between the Default and the Modal search style. The Modal style only displays an icon, and the actual search will appear in a fullscreen modal on click. As a result, this style is not available for the offcanvas and modal header layouts.

Body

Preloader

In the Body section, you can turn the website preloader on or off. If you turn on the preloader, a spinning circle will be shown while loading your site.

Layout

By default, the website expands to the Full Width of the browser window. You can also choose a Boxed Layout layout which will wrap all of your page content into a boxed container. The background of the boxed page layout will show a solid background color or background image which depends on your chosen style.

Boxed Page Layout

Setting Description
Alignment Position the page layout in center.
Top Margin Add the top margin to the page layout.
Bottom Margin Add the bottom margin to the page layout.
Header Position Position the header outside the container.
Transparent Header Make the header transparent and overlay the page background. This option won't have any effect unless Display header outside the container is enabled.

The footer is the last section on your website. It usually contains copyright notices, links and contact information

Tip! Use {year} to get auto-updated year.

Social Icons

You can choose to display the social icons in the navbar, header, toolbar-left, or toolbar-right positions.

Display the social icons in the navbar position.

Display the social icons in the header position.

Display the social icons in the toolbar-left position.

Display the social icons in the toolbar-right position.

Contact Info

You can choose to display the Contact info in the toolbar-left, or toolbar-right positions.

Coming Soon

With Helix Ultimate, you can display a customized maintenance mode page (e.g. under maintenance, coming soon, site offline or so on) on the frontend of your site when your site is under construction.

Error Page

A website may face several errors like 404 and so on. You can create a custom page for these errors. Use the Error Page option to do so. Upload a custom background image and a logo to display on the error page(s).

Presets

The Presets tab gives you the ability to quickly and easily configure color settings related to the appearance of the Helix-powered template. This includes being able to switch between pre-configured presets and custom color sets.

Panel Description
Toolbar This panel contains global variables for Toolbar position.
Body This panel contains global variables for Body like Color, background , link, link hover.
Header This panel contains global variables for Header.
Headerbar Top This panel contains global variables for Header Bar top position.
Headerbar Bottom This panel contains global variables for Header Bar bottom position.
Menu This panel contains global variables for Menu.
Footer This panel contains global variables for Footer.

Change any aspect of your site’s appearance like colors, background, etc...

Open Video Demo

The Layout Builder

Layout Manager allowing you to build flexible layout based on module positions. Layout Builder is one of the unique features of Helix Ultimate which allows anyone to customize the existing template in almost any shape without code customization.

Predefined Headers

We added 16 predefined header layouts for Helix Ultimate based theme, the following settings can be found in the Layout Builder -> Predefined Headers panel of Template Settings.

Open Video Demo

Layout Grid

Helix Ultimate Layout is based on 12 column layout from Bootstrap 4. It includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes.

You can choose columns preset or set your own grid. The grid system is responsive, and the columns will re-arrange depending on the screen size.

  • In current version of Helix Ultimate you can use Predefined Headers. We’ve added 16 built-in header variations to Helix Ultimate that will enrich the scope and versatility of your sites created with the framework.
  • Each Row can have its own column structure and unique settings.
  • Icon with arrows allows you to change positions of rows by moving them up or down.
  • Use plus icon to add new Row, then choose column structure and select module position(s) used there. We also suggest to insert short ID name for the new Row.

How to use module below/above component area

You can publish any module below or/and above component area. For this purpose we created two built-in module positions: Content Top & Content Bottom, just choose them from the list Joomla Position. They are not visible in visual Layout grid, but you can use them in all templates based on Helix Ultimate framework.

How to create custom header

By default there are 16 predefined Headers. But any time you can disable this option and build your own custom header variation. Watch Video tutorial (English language) or directly from youtube.

Row Options

There are three options available to control the row options and its behavior: General, Style, Responsive.

General Settings
Setting Description
Section Title Insert section title (should be short, without extra languge native marks)
Fluid Width Enable this option to make this section fluid. A fluid row will help you to publish full-width content like google map.
Custom CSS Class If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file.
Style Settings

Define Row Style: margin, padding, text color, link color, link hover color, background color and choose background image.

Responsive Settings

Allows to control of visibility of rows. You can hide Row on selected devices, related with screen resolution:

  • Hidden on Smartphone - screen width less than 576px
  • Hidden on Largen Smartphone - screen width equal to or greater than 576px
  • Hidden on Tablet - screen width equal to or greater than 768px
  • Hidden on Smaller Desktop - screen width equal to or greater than 992px
  • Hidden on Desktop - screen width equal to or greater than 1200px

Columns Options

Make Component Area - Enable this option to make this column as a Component area. If you already selected component area for another column then unselect that one first then select this one. Joomla message section will also be loaded inside this column. Only one column in whole layout can be used for showing component.

Module Position - Select any suitable module position from the list (below). Do not set this same module position to multiple position. Each should have unique name. Below is the list of all available module positions, which you can use in columns:

  • title
  • toolbar-left
  • toolbar-right
  • logo
  • header
  • navbar
  • menu
  • search
  • slide
  • user1
  • user2
  • user3
  • user4
  • left
  • right
  • feature
  • slider
  • position1
  • position2
  • position3
  • position4
  • position5
  • position6
  • position7
  • position8
  • content-top
  • content-bottom
  • bottom1
  • bottom2
  • bottom3
  • bottom4
  • breadcrumb
  • footer1
  • footer2
  • comingsoon
  • offcanvas
  • pagebuilder
  • 404
  • debug
Above and below component area there are two module positions: content-top and content-bottom which can be used to publish there any module.
  • Custom CSS Class - If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file.
  • Grid - allows to control of responsive layout, it’s based on Bootstrap 4 grid system. There are five grid breakpoints, one for each responsive breakpoint. Grid breakpoints are based on minimum width media queries.
  • Responsive settings - allows to control of visibility of columns. You can hide columns on selected devices, related with screen resolution:
    • Hidden on Smartphone - screen width less than 576px
    • Hidden on Largen Smartphone - screen width equal to or greater than 576px
    • Hidden on Tablet - screen width equal to or greater than 768px
    • Hidden on Smaller Desktop - screen width equal to or greater than 992px
    • Hidden on Desktop - screen width equal to or greater than 1200px

Page Title

The page title allows you to add the Alternative Title, Page Subtitle, Background Color/Image for special pages or joomla articles.

The following settings can be found in the Menus → Main Menu → menu item then click tab Page Title

Setting Description
Enable Page Title Enable/Disable page title for menu item.
Alternative Title Alternative title will override Joomla default menu title.
Page Subtitle Add a brief description about the page as page subtitle.
Heading H1 or H2 Set the page title to be either an h1 or h2 element
Background Color Background color for the title area.
Background Image Background image for the title area.

Page Builder

WarpTheme using SP Page Builder to build and design the page layouts visually, without having to write any code.

We created 50+ Extra Add-ons for SP PageBuilder and these add-ons included in the template (pro) for FREE. See more detail about 50+ extra add-ons here https://warptheme.com/extra-addons-pagebuilder/

SP Page Builder 3 is a revolutionary product of flexible drag & drop page building for Joomla. If you are new with SP Page Builder, you can read full documentation below.

SP Page Builder Documentation

Installation

Install SP Pagebuilder Free version into your existing Joomla site or start with one of our thematic demo websites (SP Page Builder already installed for Quickstart packages).

Download the free SP Page Builder Lite version here: https://www.joomshaper.com/downloads/extension/sp-page-builder-free

You need to register free account to download the sp page builder.

Open the Page Builder

There are two ways to open the page builder: Front-end and Back-end.

Back-end Editing

To use the sp page builder, add a new page by clicking SP Page Builder → Pages → New. Enter a title and save the page. You can then start adding new sections and add-ons to your page layout.

Front-end Editing

You can also open the sp page builder on the front-end without accessing the Joomla administration area. Log in to the front-end of your site and navigate to the page that created with sp page builder. The Edit Page button is situated in the right top corner.

Or you can access front-end editing directly via back-end editor by clicking Front-end Editor button.

When editing a page in front-end mode, you can access full extra add-ons in the left panel.

Module Builder

Design single module individually by using the sp page builder.

To use the module builder, add a new Joomla module by clicking Extensions → Modules → New → SP Page Builder.

You can then start adding new sections and add-ons to your module layout.

The following settings can be found in the Settings → Navigation panel of template.

Setting Description
Dropdown Width Dropdown Menu Width value would be to set it to the width of your submenu size content area. By default 240px.
Dropdown Animation MegaMenu offer serveral transition options for your dropdown submenus:No Animation, Fade In, Fade In Up, Fade In Down, Zoom In, Rotate In, Pulse

Typography Settings

Typography in websites is arguably more important than other design elements since type is the one thing that is consistently rendered across different browsers.

Google Fonts

In general typography in Helix Ultimate templates is mainly based on Google Fonts collection (850+ fonts). With so many unique fonts to use, you're bound to find something you like! This settings area allows you to easily choose font(s) from the Google Font Directory to your Joomla! template. You can also assign the Google fonts to specific CSS elements only.

Fonts from Google

All available Google fonts are released under open source licenses. You can use them in any non-commercial or commercial project. They works on the vast majority of modern mobile operating systems, including Android and iOS (iPhone, iPad, iPod).
Only some of the fonts in the Google Font Directory support full range of subset - multiple scripts (like Latin, Latin Ext, Cyrillic, and Greek for example). Notice, not all fonts are fully support your native language diacritical marks (signs).

Arial, Verdana, Georgia..

Beside Google Fonts you can choose widely-supported cross-platform fonts: Arial, Tahoma, Verdana, Helvetica, Times New Roman, Trebuchet MS and Georgia. “Web Safe” fonts mean that they will look perfect no matter the browser you are viewing them from. Also, these fonts are very popular and pre-installed on operating system: Windows, iOS or Linux. They are not loaded during loading a website, no delays because of that. You can save bandwidth and keep fast loading pages.

Default Font

If none of Typography option will be enabled, the default fonts are used from Bootstrap 4. Helix Ultimate use “native font stack” for optimum text rendering on every device and OS.

This font-family is applied to the <body> and automatically inherited globally throughout Bootstrap 4.

Body

Enable or Disable using  Fonts integration. Which gives you the ability to assign default System Font (Arial, Tahoma, Helvetica, Georgia etc.) or the Google font to whole Body of your website. Choose Font Size, Font Weight, Style and Subset (for Google Fonts only).

Typography - Google fonts and OS fonts

Headings (h1-h6)

Enable or Disable using Fonts integration. Which gives you the ability to assign default System Font (Arial, Tahoma, Helvetica, Georgia etc.) or the Google fonts to specific Headings (h1-h6) used inside your website content. Choose Font Size, Font Weight, Style and Subset (for Google Fonts only).

Navigation

Enable or Disable using  Fonts integration. Which gives you the ability to assign default System Font or the Google font to main navigation of your website. Choose Font Size, Font Weight, Style and Subset (for Google Fonts only)

Custom

From here you can choose default System Font (Arial, Tahoma, Verdana, Georgia etc.) or Google Font for custom CSS Selectors (class, ID, element). A CSS selector can contain more than one simple selector. Just enable option, choose font settings and in  field below insert name(s) separated by comma.

Update Font List

This feature allows you to refresh the list of available Google fonts. So if there are any new ones, this button allows you to quickly update fonts with just one click, and they will be automatically added in to Helix Framework database. Which allows you to use them after update.

Blog Settings

Customize the blog layout of your Joomla website. The following settings can be found in the Template Settings → Blog panel of template. Make sure to browse to the blog in the preview on the right to see the changes immediately.

Open Video Demo

Layout

Use the following options to style the blog layout.

Setting Description
Column Gap Set the size of the gap between the grid columns.
Row Gap Set the size of the gap between the grid rows.
Breakpoint Set the breakpoint from which the grid items will stack.
Masonry Enable masonry effect and create a layout free of gaps even if grid items have different heights.
Parallax Enable parallax effect and move single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels.

Note The number of columns displayed on the blog overview page can be defined in the Article Manager Options in Joomla under Blog/Featured Layout. Mind that setting the number of columns in the Menu Item will override the option from the Article Manager.

Use the following options to style the post title, link heading and margin.

Content

Use the following options to style the post title, meta text, content and link in the blog overview.

Setting Description
Alignment Center the title, meta text and button.
Title Style Set the title style.
Title Margin Set the top title margin.
Meta Margin Set the top meta margin.
Content Length Limit the content length to a number of characters and add the "Continue Reading" button.
Content Margin Set the top content margin.
Content Alignment Center the content on the blog overview page only.
Button Set the style for the "Continue Reading" button.
Button Margin Set the top button margin.

Image

Used to set image size and resolution (“Blog Option” tab only) used inside different article views.

Setting Description
Crop Quality It allows you set image quality for better compressions for images size resolution. Applicable for JPG images only.
Image Margin Set the top image margin.

List

Setting Description
Blog List Image Select an image size for blog list. By default, if a featured image will be shown if available.
Leading Article Image Select an image size for leading article. By default, if a featured image will be shown if available.
Hide Tags Hide Joomla article tags only form the list view of articles.

Article Settings

Customize the articles layout of your Joomla website.

Setting Description
Alignment Center the title and meta text.
Title Margin Set the top title margin.
Meta Margin Set the top meta margin.
Image Margin Set the top image margin
Content Margin Set the top content margin.
Drop Cap Set a large initial letter that drops below the first line of the first paragraph.
Social Share Show or Hide social share buttons (Facebook, Twitter, LinkedIn, Google+) above content of single article.
Disable Modules This option will disable all modules from the left or right sidebar from article details page.
Author Info This option will show user bio as author information along with author Gravatar if the profile plugin is enabled.
Enable Open Graph This option will add open graph content to the article so that social media like Facebook & Twitter can show correct image for the article. Disable this option if you want to use 3rd party open graph extension.
Reading Time Progress Bar Show reading progress bar in blog details page.
Related Articles Show related articles in article details page based on category and tags.
Comments This build-in option allows you to add IntenseDebate Comments system, Facebook comments and / or Disqus Comments to your site.

Custom Code

You can easily customize Helix Ultimate Framework with your own custom code, for example: CSS, JavaScript, Metatags, links and verification code by using the custom fields in that section of settings. Inserting custom code before your Joomla website’s </head> and/or </body> tags is a common requirement for a variety of scripts and services (e.g. Google Analytics).

Those methods should help you to create custom sites that stay exactly how you want them to, no matter what new updates roll out.

Advanced Settings

Compression

Setting Description
Compress CSS Files Enable this option to compress and combine all CSS files to increase website performance by reducing loading time.
Compress Javascript Files Enable this option to compress and combine all Javascript files to increase website performance by reducing loading time.

Note: Do not enable these options in a development phase.

SCSS

Enable this option will compress all SCSS files during each load of your website if the SCSS file has been changed or edited. Turn off this option if your site is in production mode.

Import & Export

This feature is useful only if you want to transfer basic template setting between templates, for example, Font selection, Layout settings, Color Preset chosen etc. It can not be used for transfer demo data like articles, nor module content.

Show a banner to inform your visitors of cookies used by your website.

Setting Description
Position Choose the position of the cookie banner.
Style Choose the style of the cookie banner.
Content Enter the cookie consent message.
Consent Button Style Choose the consent button style.
Consent Button Text Enter the consent button text.

Mega Menu Builder

A Mega Menu is the name given to a large panel of content which is displayed below a menu item when the user hovers over the menu item. Mega Menus can contain sub menu items and modules. We all know how it helps a site be more navigable.

With Helix Ultimate you are able to build such mega menus on your site easily. Helix Ultimate mega menu builder offers you different layouts to give diverse looks of your menus. Styling menus has been made easier for your convenience. Add as many menu items as you need.

Inside each menu item you can find new tab "Mega Menu" - It came from Helix Ultimate Framework. Inside this tab, you can find several switchers, responsible for additional features.

Mega Menu

To enable/disable advanced Mega Menu options. It is simple way to create highly customized and creative mega menu configurations. You can add and use row and column based menus, also drag and drop the modules to the menu positions from the modules list.

Setting Description
Width Allows you to choose total width of submenu area.
Alignment Choose submenu area alignment to the right, left, center, or set full width.

General tip: building a two or three columns sub-menu is easy process - all starts from Menu Manager, where you have to add all those sub menu items. For main submenu headers you can use "Menu Heading" or "External Links" menu type.

How to use Mega Menu to build columns for menu items:

  1. Click “Add New Row” button
  2. Select Menu layout: single row or rows with columns, you have 9 options to choose from.
  3. Then click “Save” button from top bar to refresh/rebuild content.
  4. After refreshing you should be able to see submenu items, if were added before. Using drag and drop function in Mega Menu, you can easily arrange columns, move elements or modules into another position, from one column into another.
  5. In addition, you can also select existing module(s) from the right sidebar and put into column.
  6. Trash icon - allows you to remove undesired row.
  7. Close “X” icon - allows you to remove undesired element.
  8. Remember to save setting after all changes (“Save” or “Save & Close”).

Setting Description
Show Menu Title By default enabled, it allows you to hide Menu Title from menu, but alias in system will stay. It's good method to create hidden menu item for short url. This may be useful also when you want to show only icon instead full menu item name, for Home or Search position.
Dropdown position It allows you to change dropdown submenu position, to the right or to the left side.
Menu Icon Mega Menu allows you to set an icon for each menu item in your menu.
Custom Class This field is needed in the case when your template has a particular menu location and it needs adjustment.
Badge With Helix Ultimate, we give you the system to highlight your menu item(s) with name badges (for example with word “sale” or "new").

Module Positions

Position Description
toolbar-left toolbar-right These toolbar positions are located above the theme header. Find the toolbar settings in Basic → Toolbar.
navbar header These are the two theme header positions. Find the header and navbar settings in Basic → Header.
mobile This position allows publishing modules in the mobile navigation, i.e. the off-canvas, modal or dropdown menu. Find the mobile header settings in Basic → Mobile.
Left/Right These positions allow publishing Joomla modules to the Left or Right component area.
Content top
Content bottom
Yes, you can publish any module below or/and above component area. For this purpose we created two built-in module positions: Content Top & Content Bottom
bottom-1 to bottom-4
and Footer
These positions are defined via templateDetails.xml. Using layout builder to render the grid columns then assign the columns to these positions.

Preset Customization Issue

In some cases, the Custom Style not working while changing the color value or switching from predefined preset to custom style, in this case, you can turn off/on the custom style to solve the issue.

Press Command + Shift + R on Mac or Ctrl + R on Windows to clear browser caches.