- 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. 🚀
HigherFrame
A medium length headline 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 headline fits here
Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further
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?
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 headline fits here
Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further
87%
Increase in Productivity
80%
Reduction in Manual Tasks
95%
Client Retention Rate
1K+
Total Users
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 headline 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 headline 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. 🚀
A medium length headline 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 headline 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. 🚀
HigherFrame
A medium length headline 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 headline fits here
Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further
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?
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 headline fits here
Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further
87%
Increase in Productivity
80%
Reduction in Manual Tasks
95%
Client Retention Rate
1K+
Total Users
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 headline fits here
Here is a more detailed sub-headline that expands on the main idea, helping clarify the purpose and engaging the audience further
Template name copied!
Next, paste it into the 'section templates' search bar in the site builder to find and load the template.