Structuring Mobile Header Layout Using Ruby Template

Beginning from version 2.1.2, the Foxiz theme supports the creation of a mobile header using the template, enabling easier customization of your website’s layout.

To get started, follow the steps below:

  1. Create your template and copy the shortcode of the template, please navigate to Dashboard > Ruby Templates. To create a template, you can refer to this documentation: Ruby Templates
  2. In the Elementor control panel, search to the “mobile”.
    Foxiz – Mobile Collapse Toggle block, Foxiz – Mobile Search Icon block, Foxiz – Mobile Mini Cart Icon block: Those blocks are designed specifically for the Header template on mobile/tablet devices. Avoid using it for other areas to ensure the proper functioning of this feature.
  3. After searching to the “mobile” section, you can drag and drop blocks inside.
  4. You can rearrange the placement of those blocks to create your own custom header layout

To add a template, follow the steps below:

  1. Copy the shortcode of the template, please navigate to Dashboard > Ruby Templates.
  2. Navigate to Foxiz Admin > Theme Options > Header > Mobile Header > Header Mobile Template Shortcode
  3. Input the shortcode into the Header Mobile Template Shortcode option
  4. Click “Save Changes

How to Structure a Header Layout Using a HeaderTemplate

Still no luck? We can help!

Contact us and we’ll get back to you as soon as possible.