The drag and drop editor makes it easier than ever to customize your KickoffLabs pages by adding additional sections and customizing these sections through content snippets. It’s as easy as finding a snippet, dragging it onto your page, and dropping it in the block you want it to appear in. Keep reading to learn how to add and manage content on your KickoffLabs pages.

Not sure what the difference between a section and a snippet is? A section holds the snippets that make up your page. Your page can include as little as one section, or as many sections as you want. Sections are great to use if you want to have different background images (or colors). A snippet is used to add your content (text/images/etc) inside of a section.

In this guide:
Add a new section
Add a new content snippet
Manage your sections
Manage your content snippets

Adding a new section to your page:

  1. In the editor, click the “Add Content” button on the left menu. Then, click the green “Add Section” button.
  2. Next you will be prompted to choose a section style. Choose the one that best suits your needs. You can add and remove content snippets and adjust the styling of any section, so if you need to make adjustments, don’t worry!
  3. New sections are added to the bottom of your page, by default, but you can use the arrows in the lower right corner to move the section up and down.

Adding a content snippet to your page:

  1. In the editor, click the “Add Content” button on the left menu. You will be presented with a list of the various types of content snippets we offer. You can also use the “General” and “Viral Boost” links to narrow the snippet selection down.You can add additional columns to nearly any snippet after you’ve dropped it into place on your page.
  2. Once you find the snippet that best suits your needs, click and drag it onto your page where you want it to appear

  3. That’s it! You can add as many snippets to your page as you need.

Managing your sections:

  • In the lower right corner of each section are the section options. With these you can adjust the section Design, adjust the Height, move the section Up and Down, and Delete the section.
  • Clicking the Design button will open the design menu in the left panel.

    In the Design menu you can adjust your Background Settings, your section specific Design Options, and your Device Specific View Settings.With the Background Settings you can:
    – Choose a background color or image
    – Decide whether your image should have a color overlay
    – Decide what size your image should be
    – Decide whether or not your background image should be a Parallax Background Image (please note, parallax background images are widely unsupported on mobile viewing).
    In the section Design Options you can:
    – Choose the max-width of your section
    – Choose the default margins for your section
    – Adjust the section Padding
    – Decide whether you want to add a “Scroll to next section” button
    – Decide whether you want a shadow around the section
    With the Device Specific Views Settings you can choose which devices you want your section to be visible on. This means that you can create a section for desktop viewers which is hidden on mobile and tablet devices, and another section for mobile viewers which is hidden on desktop devices.

    This is a great way to custom tailor your pages for the best viewing experience on each device.

Managing your content snippets:

  • You can bring up your snippet options by clicking anywhere within your snippet. This will populate the pink option buttons at the top of the snippet you’re working on. For each snippet you have options to Move the snippet, access the Design menu for the snippet, move the snippet Up or Down on the page,  or Delete the snippet. Clicking a snippet will also bring up the option Content Section options. All the snippets in a particular section make up the Content Section. These options are found at the top and bottom of the Content Section. These allow you to manage the width and design options for the Content Section. As well as Add and Remove Columns, and Adjust Column Size (please note, adding/removing columns will be applied to the entire section, not individual snippets within a section)
    The active snippet will be highlighted with a pink border, while the complete Content Section will have a white solid border.
  • To Move the snippet, click and hold the Move button, then drag the snippet to it’s new location.
  • Clicking the Design button on the top of the snippet will open the Design menu for the snippet on the left menu panel. You can use this menu to adjust the padding on the snippet, add a background image, or adjust the background color.



    Adjust the background color by clicking the color square. Use the left slider to choose a hue, and the right slider to adjust the opacity.
  • Add a new column to your Content Section by clicking the green “Add” button in the top right corner of the selected Content Section.

    You can add snippets to the new column, adjust the width, add additional columns, or remove the column.
  • Clicking the Design button on the bottom of the Content Section will open the Content Section design menu on the left panel. Here you can choose the Color Scheme for the section, the default text alignment, and choose whether or not the Content Section should be in a box (a box adds a background to the section). You can adjust the Background Color and Opacity settings of the box with the “Box Background Color” option.

    You can also adjust the position of the Content Section in the section itself, as well as adjust the margins for the Content Section (when not centered).
  • Finally, you can use the Width option to adjust the width of the Content Section in the main section.

 

Trying to add a video to your page? Check out our video specific guide.

Want to add images to your page? Find our tips and tricks on selecting and adding the best images!