GoHighLevel Layout Editor

Convert your custom HTML content to any of the 7 predefined GHL-compatible layouts.

1. Standard Centered

Column constrained card

2. Full-Width BG

Background edge-to-edge

3. Edge-to-Edge Left

Left align, 25px padding

4. Edge-to-Edge Right

Right align, 25px padding

5. Edge Left 25%

Left align, 25% padding

6. Edge Right 25%

Right align, 25% padding

7. Edge BG / Center

BG edge-to-edge, centered

Enter Your Content

How to Use:

  1. Enter your HTML content in the editor
  2. Select one of the 7 layout options above
  3. Customize colors if needed
  4. Click "Generate Code" to get GHL-compatible code
  5. Copy and paste the code into your GoHighLevel custom HTML element

GHL Implementation Tips:

  • Parent Container: For layouts 2-7, the parent Section/Row/Column in GHL MUST have Overflow: Visible & Padding: 0
  • Width Settings: Set your GHL column to "Full Width" for edge-to-edge layouts
  • Mobile Responsiveness: The layouts include responsive behaviors for mobile devices

Preview

Generated Code

GHL Layout Templates

These are the 7 layout variations you can use in your GoHighLevel sites.

1. Standard Centered Card

Standard Card Title

This content is constrained by the GHL column and card's max-width.

Best For: Regular content blocks, form containers, info cards

GHL Setup: Works in any column width setting

2. Full-Width Background

Full Width Background

This text content is centered, but the blue background extends edge-to-edge.

Best For: Hero sections, CTAs, highlight areas

GHL Setup: Parent needs Overflow: Visible & Padding: 0

Additional Layout Variations

The converter supports all 7 layout variations from the template, including:

  • Edge-to-Edge Left Align (25px padding)
  • Edge-to-Edge Right Align (25px padding)
  • Edge-to-Edge Left Align (25% padding)
  • Edge-to-Edge Right Align (25% padding)
  • Edge-to-Edge BG with Centered Max-Width Content

Select your desired layout in the converter above to generate the appropriate code.