Using Border Controls in the Page Builder

About Border Controls

Border Controls provide a centralized way to add and style borders on supported elements within the Page Builder for your funnels and websites. This feature allows you to apply a consistent border style, adjust its width on different sides, set the corner roundness, and choose a color, all from a single panel. You can use it to add subtle definition or create bold, custom frames for elements like buttons, images, and videos.

Benefits of Using Border Controls

Using the Border Controls offers several advantages for designing your pages:

• Granular Styling: Achieve the precise look you want by controlling every aspect of the border's appearance.
• Side-Specific Widths: Set different border widths for the top, right, bottom, and left sides of an element independently.
• Custom Corner Rounding: Apply a uniform radius to all corners or set a unique radius for each corner to create distinctive shapes.
• Enhanced Visual Options: Choose from a variety of border styles, including double lines, grooves, and ridges, to add depth and texture to your design.

Border Control Settings

The Border panel consolidates various styling options. It is available for supported elements in the Page Builder, which typically include buttons, images, and videos.

• Border Style: Defines the visual pattern of the border line.
• Border Color: Sets the color of the border.
• Border Sides: Controls the border width. You can set a single width for all sides or unlink the values to specify widths for the top, right, bottom, and left sides separately.
• Corner Radius: Adjusts the roundness of the element's corners. You can apply a uniform value or unlink the controls to set a different radius for each corner.

How to Configure Border Controls

Follow these steps to apply borders to an element in the Page Builder:

1. Open a funnel or website in the Page Builder.
2. Click on a supported element, such as a button, image, or video, to select it.
3. In the sidebar on the right, navigate to the Styles tab.
4. Scroll down to find the Border panel and click to expand it.
5. Select a Border Style from the available options.
6. Choose a Border Color.
7. Set the Border Sides values. Use the link icon to toggle between a single value for all sides or individual values for each side.
8. Set the Corner Radius values. Use the link icon to apply the same radius to all corners or to set them independently.
9. Review the changes on the canvas and adjust the values as needed.
10. Save and publish your page when you are satisfied with the design.

Frequently Asked Questions

Can I set a different border width for each side of an element?

Yes. Within the Border Sides setting, click the link icon to unlink the values. This allows you to enter a unique width for the top, right, bottom, and left borders.

Will changing these settings affect my previously published pages?

No. Existing pages that use older border configurations will continue to display as originally designed. These controls only affect the elements you are currently editing.

Is the Border Control feature available for both funnels and websites?

Yes, you can use Border Controls when editing elements in both funnels and websites via the Page Builder.

Can I round each corner of an element differently?

Yes. In the Corner Radius setting, click the link icon to unlink the values. You can then specify a unique radius for the top-left, top-right, bottom-right, and bottom-left corners.