Content Controls
Content
This section allows you to input and manage the different types of code used within your element, such as PHP, HTML, CSS, and JavaScript. You can also execute JavaScript directly and toggle visibility settings for the builder label.
- PHP & HTML Code – Input your PHP scripts or HTML markup here.
- CSS Code – Enter your CSS code here.
- JavaScript Code – Input your JavaScript code for client-side scripting.
- Execute JavaScript – Run the JavaScript code entered in the block immediately.
- Disable Builder Label – Toggle this to hide or show the builder’s label for this code block.
- Builder Label – Customize the label text for the code block builder. Note: This control is only available when the “Disable Builder Label” is not toggled on.
Design Controls
Wrapper
Adjust the outer appearance of your code block by modifying the wrapper’s width, background, borders, and padding. Create a visually distinct and neatly contained area for your code.
- Width – Set the width of the code block container.
- Background – Choose a background color for the code block container.
- Borders – Customize the code block’s borders with options for radius, style, and shadow.
- Radius – Define the curvature of your code block’s corners.
- Styling – Select border style, width, and color.
- Shadow – Add a shadow effect to your code block.
- Padding – Adjust the space between your code content and the borders of the block.
- Padding – Set the size of padding around all sides of the content within the code block.
Layout
Control the positioning of your code block with alignment tools, both horizontally and vertically, and manage the space between the code block and other elements on the page.
- Align – Set the horizontal alignment of the code block’s content.
- Vertical Align – Set the vertical alignment of the code block’s content.
- Gap – Determine the space between the code block and other elements.
- Horizontal – Further manage horizontal settings.
- Align – Fine-tune the horizontal alignment of the code block.
- Vertical Align – Fine-tune the vertical alignment of the code block.
- Vertical At – Choose at which screen size the vertical alignment setting should apply.
Typography
Configure the text appearance within your code block to enhance readability and match your website’s style.
Spacing
Adjust the outer margins of your code block to ensure it fits seamlessly with your page layout and provides a comfortable reading experience.
- Margin Top – Set the space above your code block.
- Margin Bottom – Set the space below your code block.
