Layout Element Blocks

Layout Element Blocks

This page dives into your layout element blocks, what they are for, and how you can use them. If you have any questions at all, please don’t hesitate to reach out to our team via live chat (weekdays 8 AM to 5 PM Pacific Time) or email at support@carrot.com.


Hero

Adding a Banner Image Using Hero Blocks

Hero blocks are the first block you see on the homepage. They are your call-to-action, conversion money-maker. Only one hero block can be added to a page.

Hero blocks add a large banner image at the top of the page for you to insert content and a form.

Features & Styles:

  • Styles – these settings apply to all content within the block
    • Columns add the content one the left side and the form on the left
    • Stacked adds the content above the form and centers both on the hero
    • Inline adds the content above the form and places all the form fields on one line
      • Ideal if you have less than three fields
  • Background Image
    • Updates the main banner image. Recommended size 1920 x 800
  • Call to Action
    • Select a form from the drop-down for your lead magnet
  • Advanced Settings – developers use this for custom markup (code)

Button

Add Buttons to Your Site Using Button Blocks

Button blocks are used to create links with a prominent button call-to-action.

Features & Styles:

  • Styles – these settings apply to all content within the block
    • Default – Sets the button width to the amount of text in the button
    • Large – Sets the button width to the amount of text and increases the height for a larger profile
    • Full-width – makes the button fit the entire page
    • Large & full-width – makes the button fit the entire page and increases the height of the button
  • Color Settings – we recommend a darker color and a brighter text
    • Background sets the color of the button
    • Text sets the color of the text on the button
  • Border Settings – border radius changes the buttons curvature from square (0) to rounded (50)
  • Link Settings
    • Toggle on to open in a new tab and keep someone on your page
  • Advanced Settings – developers use this for custom markup (code)

Cards

Your Cards block applies items in a column with a clean format to display a large, color-blocked heading above a short paragraph. They are great for introducing quick facts, such as a 3 step process.

You must first select the number of columns you want, then add your headings to each block and the content below those headings.

Features & Styles:

  • All features and styles for the group, heading and paragraph sections within their respective blocks
  • Advanced Settings – developers use this for custom markup (code)

Columns

Using the Column Block on Your Site

Column blocks section a portion of your page into equal amounts for the columns selected. The most common use is to create 3 or 4 columns for content display, such as a 3-step process.

You must first select the number of columns you want and then insert other blocks to build that column content. Any number of combinations can be made within the columns. For example, this tutorial is mostly two-column blocks. The first column has a video then a paragraph block. The second column has a heading and then a list block.

Features & Styles:

  • Column Settings – choose the percentage width of the columns by sliding the bar up and down the scale
  • Advanced Settings – developers use this for custom markup (code)

Credibility Bar

Credibility blocks place items on the hero section of the site to position details about your company that are credibility-boosting and important for visitors to know. We recommend testimonials or badges (such as BBB, As Seen On, or Veteran-Owned).

You must first select the type of credibility bar you want to use. We recommend the testimonial or gallery options. The testimonial will place a current testimonial within the block and Gallery will allow you to select images to place within the bar. The images will be automatically resized for clean formatting.
Your Custom Content option places a paragraph block within the block, styled so it is an opaque bar covering a portion of your hero image.

Features & Styles

  • All features and styles for the gallery and testimonial credibility bar are respective to those blocks.
  • Advanced Settings – developers use this for custom markup (code)

Group

Use the Group Block for Easier Formatting

Group blocks combine other block types together so you can add backgrounds, section them off for formatting, or create a reusable (exact-copy) block.

Features & Styles:

  • Color Settings – we recommend a darker color and a brighter text
    • Background sets the color behind all blocks contained within the group
  • Advanced Settings – developers use this for custom markup (code)

Media & Text

Use the Media and Text Block to Add Images and Content Side-by-Side

The media and text blocks allow you to add images alongside text and format them side-by-side.

Features & Styles:

  • Media and Text Settings –
    • Stack on mobile makes the image and content stack on top one another while on a mobile. This should be on for the best user experience
    • Crop image to fit entire column edits the image to the default setting (heights: 250 px, max width 782 px)
  • Color Settings – Black, grey, white, and your branding colors are available
    • Background color sets the color behind the image and content of this block group
    • Learn how to update colors here
  • Advanced Settings – developers use this for custom markup (code)

Separator

Add a Visual Separation Using the Separator Block

Separator blocks add a visual separation between items. This can be done using a line or dots, chosen within that block’s settings.

If you want a simple space, you should use the Spacer Block instead.

Features & Styles:

  • Styles –
    • Default style is a long dash
    • Wide line style is a line spanning the width of the content
    • Dots are three small dots in the middle of the page
  • Color Settings – Black, grey, white, and your branding colors are available
    • color sets the color behind the image and content of this block
    • Learn how to update colors here
  • Advanced Settings – developers use this for custom markup (code)

Spacer

Create Breaks Between Content using the Spacer Block

Spacer blocks add a visual separation between items. This can be done using a line or dots, chosen within that block’s settings.

If you want a visual separation, you should use the Separator Block instead.

Features & Styles:

  • Spacer Settings
    • Height in pixels is the amount of vertical space between items
    • Please note, pixels are the same on mobile devices and desktops and do not translate well. For that reason, we recommend 15 or less to avoid confusion and visitors wondering if there is more content on the page below the space.
  • Advanced Settings – developers use this for custom markup (code)