Properties Panel
Properties Panel is a powerful tool that allows you to customize the look and feel of your content. It's particularly useful when you have an existing section that you like but want to tweak it slightly without asking a developer. The panel provides an interface for adjusting visual properties of elements on your page, making it easy to create polished designs without needing any coding knowledge.
Coming Soon: AI Styling
We're building an AI assistant that will handle styling for you automatically. Soon, you'll be able to simply describe the look you want ("make this section feel more premium" or "create a newsletter signup that stands out") and the AI will adjust all these properties behind the scenes. This will make creating beautiful, on-brand content even faster and easier!
Getting Started
To start customizing your content, go to the Customizer and click the crosshair icon in the bottom right corner. This lets you click on any part of your page and instantly edit how it looks using the panel on the right side.
What You Can Customize
LAYOUT
Display
- Block: Perfect for headers, paragraphs, or any content that should take up its own line
- Inline: Great for buttons or text that should sit side-by-side with other content
- Flex: Ideal when you want to arrange multiple items in a neat row or column
- Grid: Best for creating organized layouts with multiple sections
Common use case: You have three feature cards that are stacking vertically, but you want them side-by-side. Change the container to "Flex" to arrange them in a row.
Position Use the dropdown to choose how the element is positioned, then adjust:
- Top/Bottom: Move elements up or down on the page
- Left/Right: Move elements left or right on the page
Common use case: You want to add a "Sale!" badge that sits in the top-right corner of a product image, or move a signup form closer to your headline.
DIMENSIONS
Width: Make your content boxes, images, or sections wider or narrower. You can use exact pixel sizes (like 300px) or percentages.
Height: Control how tall your elements are, using pixels or other units.
Common use case: Your call-to-action button feels too small and gets lost on the page - increase the width and height to make it more prominent and clickable.
SPACING
Margin: Adds breathing room around your content - like creating a buffer zone between elements. You can set different values for all sides.
Padding: Adds space inside your content box between the edges and your actual content - perfect for giving text more breathing room or making buttons feel less cramped (note: this will make the content area smaller within the box). You can adjust padding for all sides.
Common use case: Your sections feel cramped and hard to read. Add margin to create space between sections, and add padding to give text more breathing room inside each box.
BACKGROUND
Background Color: Click to add a color behind your content to make sections stand out or match your brand colors.
Common use case: You want to highlight an important announcement or make your testimonials section stand out from the rest of your page by giving it a colored background.
TYPOGRAPHY
Color: Click to add color and change your text color to match your brand or improve readability.
Font Size: Make text bigger for headlines or smaller for fine print using pixel values.
Font Weight: Use the dropdown to make text bold or adjust how thick/thin it appears.
Line Height: Adjust spacing between lines of text for better readability.
Letter Spacing: Spread out or tighten up letters for stylistic effect.
Text Align: Use the dropdown to center headlines, left-align body text, or right-align content.
Common use case: Your headline doesn't feel important enough - make it bigger, bolder, and center-aligned. Or your paragraph text feels too dense - increase the line height for easier reading.
BORDER
Border Width: Add thin or thick borders around content boxes using pixel values.
Border Radius: Create rounded corners for a modern, friendly look using pixel values.
Border Style: Use the dropdown to choose solid lines, dashed lines, or dotted borders.
Border Color: Click to add color and match borders to your brand colors.
Common use case: You want to make your signup form look more modern by adding rounded corners, or create a visual separation by adding a subtle border around your pricing table.
EFFECTS
Box Shadow: Add subtle shadows to make elements appear to "pop off" the page - great for call-to-action buttons or important sections.
Common use case: Your main CTA button blends into the page too much - add a subtle shadow to make it appear elevated and more clickable.
Pro Tips for Success
Start with the Right Element: Always check that you've selected the specific piece of content you want to change. The properties you see will only affect what's currently selected.
Nested Content Styling: Some content is organized in layers (like an accordion with multiple sections inside). If you style the outer container but don't see changes, you might need to select and style the inner content pieces individually.
Example of changing the color of text in an outer container (notice the inner content is not affected)
Example of changing the color of text in an inner container (notice the inner content is affected)
Preview as You Go: Make small changes and see how they look before making big adjustments. This helps you find the perfect balance for your design.