Skip to content
English - United States
Submit a Support Ticket
Login
  • There are no suggestions because the search field is empty.

Formatting Content in your Website Header

How do you format content in the header? What is a flow container? How do you edit or adjust it? Why is it important?

For introductory information on our Website Header template, please visit this article first.

Please note: We do not offer an ability to reverse individually saved changes in the Website Header editor. If editing has gone too far, and you need assistance, please make sure to reach out to Support.

Each Content Block allows users to format and edit the various attributes of each block: from changing the padding and the width of the block to transforming text size, color, and spacing. 

Flow Containers

Content should not be built or dragged and dropped into the Header template without a Layout or Flow Container. Content can be added to the header without a Layout or Flow Container, but the formatting will be limited. Adding your Content to a Layout or Flow Container first will make the editing and formatting of your Content easier and allow you to have more control.

Flow Containers can have up to 4 columns built into them. Depending on the type of Content being built and the way you want to build it will determine how many columns you should create. You can add the this container to your Header template by dragging and dropping the Layout box from the Layout tab. Once you've dragged the Layout box onto your template, you'll see the descriptor Flow Container when you click on your Layout box in the template.

You can always add more columns to a Layout Container later. If you only place 1 column in the builder, but you decide you need a second column, you can always add this later.

After dragging and dropping your Layout box, you can choose how many Columns you want your container to have. Once the amount of columns has been chosen, you'll notice a set of properties appear for each Column. These properties should be altered or adjusted based on the Content getting placed into the Column. 

Please note: When you open the template builder for the first time, you will see your current header based on your theme. Your current header will already have a Layout or Flow Container on the template. You can adjust these properties of the Columns once you click on the container.


Adding & Adjusting Content

Once you've created your Flow Container for your Content to live within, you can add and adjust the Content to sit within the confines of the Column of the Flow Container.

For example, I'd like to create a header with a Logo, Navigation Menu, Shopping Cart, and Magnifying Search Glass. I'm going to place all 4 types of Content across 2 Columns in my Flow Container.

However, I'd like to be able to extend my Navigation menu and move my Logo in to the right a little more. I'm going to adjust the width of the Columns of my Flow Container in order to lay out my Content better.

1. I've clicked in my first column that holds my logo. After making sure I'm working in the Column 1 Properties, I'm going adjust my Column Maximum Width on the Columns tab. This can be adjusted in either Percentage or Pixels. This adjustment will automatically adjust Column 2's width.

2. After adjusting Column 1's width, I'm going to center my logo in the Column 1 using Align Content.

3. Once my Logo has been centered in Column 1, I now need to adjust how my Navigation Menu is formatted. Since I'm happy with the width of Column 2, I'm just going to move my Navigation Menu Content to the far right with Align Content.

4. Although I like my Content moving all the way to the right, I want a small bit of padding to the right of my menu so it's not pushed all the way into the corner. I'm going to click on the Container Layout tab (these are the settings for the entire Layout or Flow Container), and I'm going to add Padding Right.