- Header
- Hero
- Feature
- Call to Action
- FAQ
- Testimonial
- Pricing
- Team
- Footer
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?
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 */
}
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
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?
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 */
}
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
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?
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 */
}
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
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?
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 */
}
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
A medium length heading fits here
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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?
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 */
}
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
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?
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 */
}
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
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?
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 */
}
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
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?
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 */
}
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 longer, more descriptive headline fits well 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?
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 */
}
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. 🚀
Long heading is what you see here in this call to action section
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?
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 */
}
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. 🚀
Short Heading
Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.
Short Heading
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?
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 */
}
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. 🚀
Short Heading
Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.
Short Heading
Here is a detailed sub-headline that highlights the main feature, providing further context and showing how it benefits the audience.