Launch Pad 1 Template | Axero Documentation

The Launch Pad 1 template displays links and images in a grid. The template is a built-in template and comes with your Axero site.

How to Create the Sample Menu

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Widgets tab.
3. Drag a Navigation widget onto the page.
4. On the Navigation widget, click the gear icon > Edit properties.
5. Update the widget Title.
6. In Navigation items, configure an item:
   • Title: Enter the text to display
   • Item type: Select URL
   • URL: Enter a URL
     Example:
     
7. Click the Advanced tab for the navigation item.
8. Click Foreground image.
9. Upload an image.
10. Crop the image then click Save twice.
11. Save the navigation item.
12. Add more navigation items and configure them similarly.
13. Click the Template tab.
14. Select the Launch Pad 1 template.
15. Click Save Widget.
16. Click Publish changes.

Customize the Launch Pad 1 Template

Change how many items appear per row

You can customize a launch pad widget to display 2 or 12 items per row.

1. Go to Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Styles for launch pad: 2-12 items per row*/
   .axero-widget-launchpad.launchpad-row-2 .axero-widget-content .lp-content ul li {width:50%}
   .axero-widget-launchpad.launchpad-row-3 .axero-widget-content .lp-content ul li {width:calc(100%/3)}
   .axero-widget-launchpad.launchpad-row-4 .axero-widget-content .lp-content ul li {width:25%}
   .axero-widget-launchpad.launchpad-row-5 .axero-widget-content .lp-content ul li {width:20%}
   .axero-widget-launchpad.launchpad-row-6 .axero-widget-content .lp-content ul li {width:calc(100%/6)}
   .axero-widget-launchpad.launchpad-row-7 .axero-widget-content .lp-content ul li {width:calc(100%/7)}
   .axero-widget-launchpad.launchpad-row-8 .axero-widget-content .lp-content ul li {width:12.5%}
   .axero-widget-launchpad.launchpad-row-9 .axero-widget-content .lp-content ul li {width:calc(100%/9)}
   .axero-widget-launchpad.launchpad-row-10 .axero-widget-content .lp-content ul li {width:10%}
   .axero-widget-launchpad.launchpad-row-11 .axero-widget-content .lp-content ul li {width:calc(100%/11)}
   .axero-widget-launchpad.launchpad-row-12 .axero-widget-content .lp-content ul li {width:calc(100%/12)}

3. Click Save CSS Overrides.
4. Click System > Page Builder.
5. Edit the page that contains the launch pad Navigation widget.
6. Edit the launch pad Navigation widget.
7. Click Advanced.
8. In Custom CSS class, enter launchpad-row- followed by a number from 2 to 12. The number determines how many items appear per row. So if you want 5 items per row, enter launchpad-row-5 .
9. Save the widget and page.

Example result:

Template HTML

Below is the HTML of this template for your reference.

<div class="axero-widget axero-widget-launchpad {{CustomCSSClass}}{{#if HideContainerBorder}} axero-widget-no-border{{/if}}">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-content axero-widget-content-padded">
        <div class="lp-content">
        <ul>
	     {{{Contents.ChildWidgetHTML}}}
        </ul>
        </div>
    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
        {{{FooterHTML}}}
    </div>
    {{/if}}
</div>