Shortcode

Content Controls

Shortcode

This section focuses on the primary content of your element. Here, you can input and manage the actual shortcode that will be executed within your webpage. It’s the heart of the element, where the specific functionality or content you want to display is defined.

• Full Shortcode – Here you can enter the exact shortcode you wish to use. This is the direct instruction that tells your webpage what content or function to display.

Design Controls

Container

Design controls allow you to customize the appearance of your shortcode’s container. Adjust size, color, and styling options to ensure your shortcode visually aligns with the rest of your page. This section gives you creative control over how the shortcode integrates into your site’s design.

• Width – Adjust the width of your shortcode container. This determines how much horizontal space your shortcode takes up on the page.
• Height – Set the height for your shortcode’s container, affecting how tall it appears on your site.
• Background – Choose a background color for your shortcode container, adding a visual pop or seamless integration with your site’s design.
• Padding – Control the inner spacing of your container, giving the content inside some room and making it more readable.
  • Padding – Define the specific padding values for top, bottom, left, and right sides of your container for precise spacing control.
• Borders – Customize the borders of your shortcode container. This includes the radius for rounded corners, border styling, and shadow effects for depth and emphasis.
  • Radius – Set the border-radius to create rounded corners for a softer, more modern look.
  • Styling – Choose border styles such as color, width, and pattern to match your site’s aesthetic.
  • Shadow – Add a shadow effect to your container, giving it a lifted appearance and helping it stand out on the page.

Typography

Control the typography within your shortcode for cohesive visual design. This includes font style, size, color, and alignment to ensure readability and aesthetic harmony with your site.

Spacing

Spacing controls let you manage the external spacing of your shortcode element. Adjust the margins to position your shortcode perfectly within the layout, ensuring it has the right amount of space around it.

• Margin Top – Set the amount of space above your shortcode element, controlling its distance from other elements or the top of the page.
• Margin Bottom – Adjust the space below your shortcode to ensure it doesn’t crowd other elements and maintains visual balance.