Target

Choose whether you’re editing the Content (the inside of your component) or the Wrapper (the outer box the content sits in). Think of the Wrapper as the frame, and the Content as the picture. Settings for each are saved separately, so switching target won’t overwrite the other.

Breakpoint

Select Desktop or Mobile (≤ 767px). Desktop settings apply to normal screens. Mobile settings only apply on small screens and are stored under a mobile rule so you can tweak layout for phones without affecting desktop.

Position

Controls how the element sits on the page. Static is the default flow. Relative lets you nudge it with Top/Right/Bottom/Left. Absolute and Fixed remove it from the normal flow so you can pin it to a corner. Sticky behaves like relative until you scroll to a certain point.

Top / Right / Bottom / Left

These are the nudges mentioned above. They move the element from its normal spot. Use small values to fine-tune. Negative values are allowed. You can use rem (recommended), px, or %.

Z-index

Which layer is “on top.” Larger numbers float above smaller ones. This mainly works when the element has a position set (relative/absolute/fixed/sticky).

Display

How an element behaves in layout. Block starts on a new line and fills the width. Inline sits inside text. Inline-block is like inline but allows width/height. Flex and Inline-flex turn the element into a flexible row/column container (see Flex below). None hides it completely.

Width / Height

Set the size of the element. Leave blank to let the browser size it naturally. Units can be rem, px, or %. For % widths, the value is relative to the parent.

Overflow

What happens if the content is bigger than the box. Visible lets it spill out. Hidden clips it. Scroll always shows scrollbars. Auto only shows scrollbars when needed. Clip trims the overflow without scrollbars. You can also set Overflow X and Overflow Y separately for horizontal vs vertical behavior.

Radius (All corners or Each corner)

Rounds the corners of the box. In “All corners” mode one value applies everywhere. In “Each corner” mode you can set Top-Left, Top-Right, Bottom-Right, and Bottom-Left individually—for example, to make a speech-bubble shape. Units can be rem, px, or % (percent follows the box size).

Border width / style / colour

Controls the outline around the box. Pick a style (solid, dashed, dotted, double), a width, and a colour. If you don’t see a border, make sure all three are set (a width of 0 or style “none” will hide it).

Shadow (colour, X, Y, blur, spread)

Adds depth. X and Y move the shadow horizontally and vertically. Blur softens the edges. Spread grows or shrinks the shadow (negative pulls inward). Choose a shadow colour that contrasts with the background for a natural look.

Opacity

How transparent the element is. 1 is fully opaque; 0.5 is 50% transparent; 0 is invisible. This affects the element and everything inside it.

Text colour

Sets the colour of text inside the target. You can choose with the colour picker or type a value like #111827 or rgba(0,0,0,.6).

Background type

Choose how to fill the box behind your content: None (transparent), Solid (single colour), Linear gradient (colour blend in a direction), Radial gradient (circular/elliptical blend), or Image (a picture).

Background – Solid

Pick a colour for the background. Use Opacity to make it see-through if needed (useful for overlays).

Background – Linear gradient

Blend from one colour to another along an angle. Set the Angle (e.g., 180° for top→bottom), the two colours, and where each colour starts/ends (their percent positions).

Background – Radial gradient

Blend from the center outward. Choose the Shape (circle or ellipse), the Size behavior (how far the gradient reaches), and the inner/outer colours with their positions.

Background – Image

Paste an image URL and adjust Size (cover fills and crops, contain fits without cropping, auto uses the image size), Repeat, and Position (e.g., center, top-left).

Flex (when Display is Flex or Inline-flex)

Flex layout arranges child items in a row or column and can wrap them onto new lines. It’s great for nav bars, card grids, or evenly spaced buttons.

Direction sets row vs column order. Wrap controls whether items break onto a new line (handy on smaller screens). Justify content spreads items along the main direction (left→right for rows, top→bottom for columns). Align items controls how items align across the other axis (e.g., vertically center a row). Align content is like justify/align for multiple rows when wrapping. Gap / Row gap / Column gap add spacing between items without extra margins.

Margin (All sides or Each side)

Margin is space outside the box—like the space between two cards. “All sides” applies one value everywhere. “Each side” lets you set Top, Right, Bottom, and Left individually. Use margins to push elements apart.

Padding (All sides or Each side)

Padding is space inside the box—between the border/background and your content. Increase padding to give text more breathing room without moving the whole box.

Custom class

Add one or more class names to the current target (Wrapper or Content). This is useful if your theme CSS provides ready-made styles you can reuse.

Advanced raw CSS (Mobile breakpoint)

For power users: type extra CSS declarations here (e.g., transform: translateY(10px);). These are saved with the component’s mobile styles.

Units and limits

Most numeric fields support rem (default), px, or %. The sliders adapt to the chosen unit: up to 50 for rem, 2000 for px, and 100 for %. Negative values are allowed where they make sense (e.g., margins, offsets, shadow X/Y).

Saving your changes

Use the Save button in the panel to store styles for the selected component. After saving, the system also triggers the main “Publish/Save” action so your page content and styles stay in sync.

Quick tips

• If something moves unexpectedly, check Position and offsets.
• If content looks cramped, increase Padding (not Margin).
• To space items inside a Flex container, try Gap before adding individual item margins.
• Use Mobile breakpoint to adjust layout for phones without affecting desktop.