You will find a discussion of how containers and grids are organized toward the bottom of this support post.
Containers
Within the Layout category in your Palette tab, you will find the container icon. Your QuickStart Cloud pages have been built using the base_layout, and already have several containers in place.
If you are using a master page, you can add containers to your page by dragging and dropping the container icon from your Palette tab to the desired location on your page.
After a container has been added to your page, you may drag and drop virtually any other icon into the container to publish as much content as you would like. This includes grids, text, images, links, etc.
Sticky Container
To use the sticky container, simply drag and drop the sticky container icon into your page and publish content into it as you would any other container. You can even add grids to your sticky container!
Background & Transition
By default, your sticky content will be displayed against a clear background but you can alter the background color of your sticky container by defining the “Background & Transition” variables within your creative studio.
When editing these variables, you will be able to update the background color, the background color transition effect, and also the duration of your background transition. For example, if you want the platform to slowly ease into the sticky container’s background color, you can increase the amount of time specified within the background transition duration.
Layout When Sticking
Your sticky container will be centered and will take up the full width of your screen by default. You can use the “Layout When Sticking” variables though to offset it from the top and also to define a fixed width and height. The offset feature is particularly helpful if you don’t want to have your content stick directly to the top of the screen.
Grids
The Layout category in your Palette tab also includes icons that allow you to add a grid to your containers. Grids are used to add columns and rows to your containers, which in turn will help you structure your page however you would like.
There are two types of grids to choose from within the Palette tab – a standard grid and a responsive grid.
The standard grid will have a fixed width, and the responsive grid will allow you to define a grid structure that is flexible and can be altered for varying screen sizes and devices.
Please note that the responsive grid icon is only shown when working in pages built from the base_layout. Your QuickStart Cloud pages have all been built from this layout, and will have the responsive grid icon option available in the palette.
To define a column structure for your container, simply drag the grid icon into a container. By default, your grids will include three columns in a single row. You may publish any type of content into any of the three columns available within your grid by dragging the desired Palette icon into a column within your grid.
Rows & Columns
You can add another row to your grid by dragging the row icon into your grid.
You will also find a column icon in your Palette tab that can be used to add more columns to your row.
Working with Grids
After adding a grid to a container, you will be able to alter the width of your grid columns and also alter the layout of your rows. When hovering over a grid, you will see column borders that you can click and drag in either direction to alter the width of a given column.
You can also alter how content within a given row is displayed. When editing an element within a given row, the element badge will include a row settings icon that allows you to quickly change the layout of that row. Clicking the row settings icon will open a screen with options to display content horizontally, stack your columns vertically, place your content in a 2×2 grid, a 3×3 grid and also an option to simply distribute your columns evenly horizontally. The “distributed” option is a great option for instances where you add columns to your grid and want them all to be the same width.
Hierarchy of Containers
Containers are your highest level editor into which all content is published. When working within a container, you may add anything from your Palette tab including text, images, links, etc.
Grids are published into containers as well. If you are working in a Quick Start creative, responsive grids will have already been placed inside of containers. If you are looking to add a new grid to your page, you will want to publish it into a container.
By default, your grids will include three columns in a single row. You may add more columns to a grid by dragging the column icon from your Palette tab into your grid.
You may also add rows to your grid by dragging the row icon from your Palette tab into your grid.
You will find blue badges at the top left of the element you are editing. These badges are a great way to review the hierarchy of the element you are working on. You may use the hierarchy icon (far left, up arrow) to quickly navigate to a higher element. For example, if you are editing an image within a column, hovering over the hierarchy icon will allow you to select either the column, row or the entire grid that the image is in. Remember, grids contain rows; rows contain columns; and columns contain content.
*NOTE: The new Base Layout master page includes one container by default. If you are working on a master page and want to add a grid, drag the grid (or responsive grid) into the base container. Other master pages may not include a container. You may drag containers into master pages and subsequently add grids to those containers.
Please also note that the responsive grid icon will not be available within master pages but rather will only be available for the base_layout used by QuickStart Cloud creatives, and when building a creative from scratch.
Layout adjustments
The “Layout” styling options available will allow you to adjust the margin, padding, dimensions and the CSS float property of the element you are editing. To alter the margin or padding of a given element, simply select the side(s) of the element you would like to update and define the number of pixels, ems or percentage you would like to apply to the element’s margins and/or padding.
Padding creates spacing inside a container or an interactive component. Margin refers to the spacing outside of the element or interactive component.
To adjust the dimensions of the element you are editing, simply enter the width and/or height you would like to apply to the element. You also have the option to define the dimensions of your element in pixels, percentage or em.
Changing the display style is done by selecting the desired style from the Display dropdown menu. The dropdown gives you options for common display styles like inline, inline-block, block, table and many more.
Defining the CSS float property is as simple as selecting whether you would like the element to float left, right or not at all. You can also check a box to clear other float commands around the element you are editing.
Positioning
You will also find a Position section that will allow you to move content around on your page. When altering the position of a given element, you will have three options – Offset, Layered and Fixed.
Using the Offset option will allow you to move a given element away from its current location without affecting the position of other elements on the page.
For instance, if you would like to move an element up or down on the page without affecting the position of anything else on the page, you could use the Offset option and then alter the “Top” value.
A positive “Top” value will move your content down and a negative value will move it up from its original position. Enter a positive “Left” value to create space between your content and the left margin which in turn would move content to the right. A negative “Left” value will move your content to the left. If you have offset multiple elements, you can also define what will be in the front by increasing the “Layer” value for the element you would like to have in front.
The Layered option will in essence pop the element out of its current location and pull the other content in the container up above where the original element was published.
When using the Layered option, you will find two toggle buttons for Top/Bottom and Left/Right, respectively. You may alter the position of a “Layered” element by adjusting the values that are applied to either the Top/Bottom and Left/Right options. You can also adjust the “Layer” for your element as well to move it to the front or back of other elements.
As a shortcut to Layered positioning, you can also simply click the pin icon on your element and then use the arrows in the element badge to move your content around your page. For more information on using the pin icon for Layered positioning, click here.
Finally, you will find the Fixed position option. By fixing your content, it will not move from its location on the screen while respondents navigate through the page. For example, you may want to fix the footer in order to keep it visible as respondents scroll through the page.
If you have any questions, please contact us on [email protected].
