The Grid

    The Grid Widget lets you set up a framework of widgets and you will have the ability to make it look the way you want.

    When you add the Grid widget you get to set up the general look of the grid, and choose what widgets you want it to contain.

    Rows

    A Row is a kind of shelf for the columns in the grid, and each row has a total column width of 100%. Say you wanted three columns on your row each of these would have to have a column width of 33%.

    Columns

    Columns are the boxes wherein you create your content when working in a grid. Most of the grid widgets require you to set a column width. This is because it sets the width for how big the box will be and by that determine how many consecutive columns can be in a row.

    Rows and Columns

    Using the Grid

    It can be very beneficial to be using a grid because it makes sure that everything stays in the alignment that you have set up for the grid. The grid is good for multiple reasons. It keeps your page-aligned beautifully and also provides you with a lot of great tools such as Navigation or Line break.

    Customizing the grid

    The grid widget comes with a set of configuration options that can be used to customize how the grid is presented on the frontend.

    It includes options such as deciding the alignment of the content, how close the columns should be placed together as well as a few options to change colors or adding a background image.

    Finally, there is also an option called "animate". When this is checked, the content in the grid will appear with a "fade-in" animation as the visitor scrolls down the page.

    The best way to learn about how to customize the grid is to create a few widgets and then test out the various configuration settings. In the section below, you can find a complete list of the options available.

    Configuration options

    These are the options you will have to customize your grid, each of these options plays an important part in making your grid exactly how you like it.

    Grid Settings

    • Container Width
    • Remove Column Gutter
    • Compact
    • Horizontal Align Columns
    • Vertical Align Columns
    • Background Image - This lets you add a background image to the entire grid.
    • Background Color - This lets you add a background color to the entire grid.
    • Text Color - This lets you change the text color in your grid.
    • Animate - This gives your grid an animation that makes it fade into view when the user arrives at the grid.

    Presentation widgets

    These widgets are tools to make your grid as nice look as possible, each of them offers unique functionality, that in some way has the potential to improve the overall look of your grid.

    Content widgets

    These widgets are tools to help you get your desired content shown in the best possible way, each of them offering unique functionalities to display content.

    Media widgets

    These are great tools for adding media to your grid in a manageable fashion. Please note that video files needs to be MP4.