Grid Flex

Instructions

Want to make your homepage stand out? Follow these simple steps to create eye-catching visuals and engaging content.

In this example, we'll show you how to copy the layout and styling of this exact full-width example, allowing you to customize the background image, text and link. Some coding experience is necessary, as you'll need to know where to place the code to insert the full-width section into your homepage.

If you're just looking for the magic, it's in the CSS. You can add this styling to almost any section you want to display full-width. This is just one of the many ways to apply this style to the Lionheart2 theme.

Let's get started.

Before making any changes to the Layout or CSS Override sections of your account, always remember to create a backup of your existing code if you have any previous customizations. Copy the existing code and save it in a plain-text editor, just in case.

Step 1: Create a Record Set

  1. Navigate to Website > Records and click "+ Add Record Type"
  2. Give your Record Set a name. If you're following this example exactly, let's call it "GridFlex". However, feel free to choose a unique name that suits your needs. Just remember to update the code below accordingly. (Find and replace any instance of GridFlex with your UniqueName.)
  3. Create six fields in the Record Set:
    • Add a Text field and name it "Headline". This field will be the captivating top line of your section.
    • Add another Text field named "Description". This field will serve as the engaging second line of your section.
    • Add an Image field named "Image". Specify the folder where these images will reside (choose any name that makes sense, example "banners").
    • Add a Text field named "CTA". This field will showcase the enticing call-to-action text for your button.
    • Add a Text field labeled "URL". This field will store the URL that the button will direct to.
    • Add a Text field labeled "Class". This field will store a unique identifier used as a CSS class and grid area. If you are inserting the full-width section into an area controlled by a grid area template (as the homepage is), you must use this identifier to update to code accordingly.
  4. Add a new Record by navigating back to the list of Record Sets and clicking on the "+Add New" button. Each record you add will generate one section. If you add multiple records, the sections will stack, one after the other. If you want multiple, separate, full-width sections, you'll need to duplicate these steps and give it a unique name.

Step 2: Copy and Paste the Layout

  1. Copy the following code block to your clipboard:
    {{#each records.GridFlex_created_asc_all}} <div class="boxed-section" style="{{#if Image}}background-image: url('{{Image}}');{{/if}}{{#if Class}}grid-area:{{Class}}{{/if}}"> <h2>{{Headline}}</h2> <p>{{Description}}</p> <a href="{{URL}}">{{CTA}}</a> </div> {{/each}}
  2. Navigate to Website > Design and paste the code into your Homepage Layout. Please note that this step requires an advanced understanding of the code within the layout. If you're unsure about the placement, it's best to seek guidance to avoid any mishaps. Always make a backup if you have any customizations to your layout. If you're comfortable with the markup, in this example we have placed it between the Slider and the Default Hero Units, and after the Default Callouts. Place the content into the layout, where you would like it to appear.

Step 3: Copy and Paste the Style

  1. Now it's time for the magic. Copy the CSS code provided.
  2. Paste it into the CSS override section of your account. Be sure to place it after any existing styles you may have. You will need to update some sections of this code in order to apply it to your unique use-case. You can also customize the colors of the text, button, and specify a background color if you don't want to use an image. Further instructions are included in the comments of the CSS.

    3. Voila! You've successfully created captivating full-width sections on your homepage.