Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Image

Feature Heading

Add clarity and highlight the benefits of this feature

Image

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Image

Feature Heading

Add clarity and highlight the benefits of this feature

Image

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Statistic Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

87%

Increase in Productivity

80%

Reduction in Manual Tasks

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Statistic Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

87%

Increase in Productivity

80%

Reduction in Manual Tasks

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Logo Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Logo Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Transparent Divider" in Column One when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Transparent Divider" in Column One when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Statistic Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

87%

Increase in Productivity

80%

Reduction in Manual Tasks

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Statistic Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

87%

Increase in Productivity

80%

Reduction in Manual Tasks

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Statistic Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

87%

Increase in Productivity

80%

Reduction in Manual Tasks

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Move-After Script

What Does This Do and Why Is It Useful?

The builder doesn't natively allow multiple column rows to be added within a single column. However, with this custom code, you can overcome that limitation. By following the steps, you'll be able to "move" a multiple-column row into another column, enabling more advanced and flexible layouts within your designs.

This enhancement makes it easier to create visually complex sections that improve the functionality and appearance of your site without needing additional tools or plugins.

For a video walkthrough visit higherframe.com/move-after

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

<script type="text/javascript">

$(function () {

$('[class*="move-after-"]').each(function(){

var fullClass = $(this).attr('class');

var afterPart = '';

var match = fullClass.match(/move-after-([a-zA-Z0-9-_]+)/);

if (match) {

afterPart = match[1];

console.log(afterPart);

}

$(this).insertAfter($('#' + afterPart));

});

});

</script>

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Image

Feature Heading

Add clarity and highlight the benefits of this feature

Image

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Image

Feature Heading

Add clarity and highlight the benefits of this feature

Image

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Statistics Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

87%

Increase in Productivity

80%

Reduction in Manual Tasks

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Statistics Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

87%

Increase in Productivity

80%

Reduction in Manual Tasks

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Logo Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Logo Columns" to appear after the "Main Paragraph" when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length headline fits here

Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

  • Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Transparent Divider" in Column Two when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side Buttons & Move-After Script

Side-by-Side Buttons

  • The code element below automatically aligns buttons side by side in both preview and live view.

  • Customize each button as needed—they will maintain alignment when previewed.

  • Delete this instruction box once the script is applied.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

🎥 For a step-by-step guide, visit: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Move-After Functionality

  • The code element below automatically repositions the row containing "Feature Columns" to appear after the "Transparent Divider" in Column Two when the page loads.

  • This allows for dynamic layout adjustments beyond standard builder limitations.

Want to learn how to use Move-After?

Understanding this script lets you reposition elements freely and unlock advanced design flexibility.

🔍 Learn more & explore advanced customization options: higherframe.com/move-after

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Feature Heading

Add clarity and highlight the benefits of this feature

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

01

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

02

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

03

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

01

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

02

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

03

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

04

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

Side-Buttons CSS

What Does This Do and Why Is It Useful?

The site builder provides a couple ways to position buttons side by side, such as using separate columns for each button, or aligning content horizontally within a single column. However, these options fall short if you want buttons placed side by side within a single column that also contains other stacked content or elements.

With this custom CSS, you can overcome these limitations. By following the steps, you'll be able to create clean, side-by-side button layouts within a single column while maintaining flexibility for vertically stacked content. This approach enhances your design capabilities without compromising the layout or requiring additional workarounds.

For a video walkthrough visit higherframe.com/side-buttons

/* Target the parent column with the custom class 'side-buttons' */

.side-buttons .vertical.inner {

display: inline-block !important;

/* Ensure the parent column behaves as needed */

}

/* Target buttons specifically inside the columns with the custom class 'side-buttons' */

.side-buttons .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

/* Ensure no left margin by default */

}

/* Add margin to every button except the first inside the columns with 'side-buttons' class */

.side-buttons .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* For centering the column vertically, add the custom class 'center-column' to the row */

.center-column .c-column {

align-self: center;

/* Centers the column vertically */

flex: 0 1 auto !important;

/* Allow manual width control while keeping the column centered */

}

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

01

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

02

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

03

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

01

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

02

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

03

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

04

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Side-by-Side Buttons

  • The code element below automatically places your buttons side by side in preview and live view.

  • Customize your buttons as needed—they will align when previewed.

  • Delete this instruction box before publishing.

🚀 Want to see the buttons side by side in the builder?

  1. Copy the script below and add it to the Custom CSS (Paintbrush icon in the top toolbar).

/* SIDE BUTTONS - LEFT ALIGNED */

.side-buttons-left .vertical.inner {

display: inline-block !important; /* Ensure proper column behavior */

}

.side-buttons-left .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important; /* Remove margin from first button */

}

.side-buttons-left .vertical.inner .c-button + .c-button {

margin-left: 10px !important; /* Add spacing between buttons */

}

/* SIDE BUTTONS - CENTER ALIGNED */

.side-buttons-center .vertical.inner {

display: block !important; /* Keep default stacked layout */

text-align: center !important; /* Center text & buttons */

}

.side-buttons-center .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-center .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* SIDE BUTTONS - RIGHT ALIGNED */

.side-buttons-right .vertical.inner {

display: block !important;

text-align: right !important; /* Align text & buttons to the right */

}

.side-buttons-right .vertical.inner .c-button {

display: inline-block !important;

margin-left: 0 !important;

}

.side-buttons-right .vertical.inner .c-button + .c-button {

margin-left: 10px !important;

}

/* CENTER COLUMN - VERTICALLY CENTER CONTENT */

.center-column .c-column {

align-self: center !important; /* Vertically centers the column */

flex: 0 1 auto !important; /* Allows for proper width control */

}

  1. Delete the custom code element after applying the script.

📹 Need a tutorial?

Watch a step-by-step video at: higherframe.com/side-buttons

🚨 IMPORTANT: Delete this instruction box before publishing to ensure a clean layout. 🚀

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

01

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

02

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

03

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

01

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

02

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

03

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

04

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

HigherFrame

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

A medium length heading fits here

Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further

Copy Template Name

Template name copied!

Next, paste it into the 'section templates' search bar in the site builder to find and load the template.