Getting Started with FireFlex
FireFlex Theme Settings
FireFlex is designed to be easy to configure and use to build your website out of the box.
Everything is designed to give you options and flexibility while keeping you and your team on brand for your organization.
First, you will want to setup your Brand Identity in the Settings of your HubSpot portal. FireFlex will pull as much from there by default. You will also be able to over ride those options if you need in the theme itself.
Next, create a page using FireFlex so you can edit the Theme Settings under Edit > Theme.
Here is where you will setup your default brand and behaviors that will appear throughout your theme. You will be able to over ride anything you wish at the page level if you need something more unique for a specific journey you are creating for your prospects.
Everything is designed to be Mobile first. For example, in the Typography settings, everything you set will be for Mobile devices first. There are options to adjust the size of the fonts up by device size, medium and large. This way everything stays in sync.
Header and Footer
After all your theme settings are setup, you should then dive into the Header and Footer modules.
These elements will behave globally to your configuration options.
The header is the first place to start. In here are a lot of options. There is an Alert Bar if you want something to appear above your site that is an announcement. Much like HubSpot's built in CTA options.
There is a Utility Bar option. This is used primarily for a thin strip at the top with important CTA links like a phone number or login links.
The Navigation area is next and where you will make important decisions like does your header scroll with you down the page. You can select a different logo to appear on scroll to make it more narrow. Mobile devices all get a nice off canvas menu. You can keep that for desktop or swap it over to a traditional navigation as well. You can select 'Click to Activate' subnavs, turned on by default, to make sure all touch devices are accessible to your subnavs. A mega menu is also an option with several layout decisions or custom text in different columns.
The footer has several layout options. A simple layout, and others that are designed to have your entire navigation laid out as well. The social links are all optional and custom ones can be added as well.
Modules and Configuration
FireFlex is designed to be modular. These modules are like Lego blocks that you can customize and configure for every instance of that module.
There are some default settings that will allow everything to look nice. As you start exploring these settings, you will be able to create incredible designs without any development assistance.
Each module has a standard set of Style options that allow for all the options you could want.
Background options allow you to set an image, color gradient or even a video as a background element. You can also change all the text / content white if your design piece is a little darker. If you need to darken up the content, there is a shader option that will allow you to place any color and opacity you want over the background element and behind your content.
Spacing options allow you to set the padding above and below a section. There are default options that allow you and your team to move quickly while keeping your pages looking the same. There are also container width options, column width options and more. All these are designed to work with desktop and mobile devices.
Animation options allow you to select the piece of content, choose an animation and then select the delay and duration of that animation. If you are using a three column module, animation options are unique for each column so you can play movie produce with your content as your prospects are scrolling down your page.
Every module also has content options built into them. If you want some accordions with some content, you can simply choose the Accordions module and content is an option that will appear above the accordions.
Every module has options for the type of items / content they are displaying. What will you build?