Editor Settings - Advanced

The Advanced Settings panel provides full control over the layout, spacing, and positioning of elements in your popup. These options allow you to refine how each component behaves and appears within your design, ensuring flexibility and responsiveness across different screen sizes.

Edit Hover Style

Within Advanced Settings, the Edit Hover Style option lets you customize how your text responds when a user hovers over it. You can modify properties such as color, shadow, spacing, and other visual effects on hover. This allows you to create interactive and dynamic text elements that draw attention and enhance user engagement.

Display

Defines how the element behaves in the layout.

Options:

Block – The element takes up the full width of its container.
Inline – Displays the element inline with others without forcing a new line.
Inline-block – Acts like an inline element but supports width and height adjustments.
Flex – Enables flexible layouts, allowing items to align and distribute space dynamically.
None – Hides the element from the display.

Float

Determines the horizontal alignment of an element relative to others on the same line.

Options:

None – The element remains in its normal position.
Left – Floats the element to the left, allowing content to wrap around it.
Right – Floats the element to the right, allowing content to wrap around it.

Position

Defines how an element is placed within its container or relative to the page.

Options:

Static – Default positioning; follows the normal document flow.
Relative – Positions the element relative to its original position.
Absolute – Positions the element relative to its nearest positioned ancestor.
Fixed – Positions the element relative to the browser window, staying in place while scrolling.

Additional Position Controls:

You can define offsets using Top, Right, Bottom, and Left to precisely position elements.

Order

Specifies the display order of an element within a container.

Flex Direction

Defines the direction in which flex items are placed within a container.

Options:

Row – Items are placed horizontally from left to right.
Row-reverse – Items are placed horizontally from right to left.
Column – Items are placed vertically from top to bottom.
Column-reverse – Items are placed vertically from bottom to top.

Usage:

Use this option to control whether elements are aligned in a row or stacked in a column. It’s useful when switching layouts between desktop and mobile views.

Flex Wrap

Determines how flex items behave when there isn’t enough space in a single line.

Options:

Nowrap – All items stay on one line (default).
Wrap – Items move to a new line when space runs out.
Wrap-reverse – Items move to a new line in reverse order.

Usage:

Enable wrapping for responsive designs to ensure elements don’t overlap or get squished.

Justify Content

Controls the horizontal alignment and spacing of items within a flex container.

Options:

Flex-start – Aligns items to the left.
Flex-end – Aligns items to the right.
Center – Centers items horizontally.
Space-between – Evenly spaces items, with the first and last touching the edges.
Space-around – Adds equal space around each item.
Space-evenly – Distributes equal space between and around all items.

Usage:

Use this option to distribute elements evenly across a row and improve layout balance.

Align Items

Defines how items are aligned vertically inside a flex container.

Options:

Flex-start – Aligns items to the top.
Flex-end – Aligns items to the bottom.
Center – Centers items vertically.
Baseline – Aligns items based on their text baselines.
Stretch – Stretches items to fill the container height.

Usage:

This is ideal for maintaining consistent vertical alignment across items of different heights.

Align Content

Controls how multiple lines of items are aligned vertically when there’s extra space.

Options:

Flex-start – Aligns lines to the top.
Flex-end – Aligns lines to the bottom.
Center – Centers lines within the container.
Baseline – Aligns lines based on their baselines.
Stretch – Stretches lines to fill available vertical space.

Usage:

Use this when flex items wrap into multiple rows or columns to manage their spacing.

Flex Basis

Sets the initial main size of a flex item before the available space is distributed.

Usage:

Defines how large an element should be before Flex Grow or Flex Shrink adjustments apply. This helps maintain proportional scaling between elements.

Flex Grow

Determines how much an element expands when extra space is available.

Usage:

A higher value means the element grows more relative to others. For example, if one element has a grow value of 2 and another has 1 , the first will take twice as much of the available space.

Flex Shrink

Specifies how much an element shrinks when there isn’t enough space.

Usage:

A higher value makes the element shrink more relative to others. This ensures layouts stay responsive even in tighter spaces.

Align Self

Overrides the default Align Items behavior for a specific item.

Options:

Auto – Inherits from the container’s Align Items value.
Flex-start – Aligns this item to the top.
Flex-end – Aligns this item to the bottom.
Center – Centers this item vertically.
Baseline – Aligns this item with the text baseline.
Stretch – Stretches this item to fill available height.

Usage:

Use this to individually adjust the position of one element without affecting others.

Margin

Defines the space outside an element, separating it from nearby elements.

Options:

Top – Adds or removes space above the element.
Right – Adds or removes space to the right.
Bottom – Adds or removes space below.
Left – Adds or removes space to the left.

Usage:

Margins help manage spacing between elements to avoid overlapping or crowding.

Padding

Defines the space inside an element — between its content and border.

Options:

Top – Adjusts inner space at the top.
Right – Adjusts inner space at the right.
Bottom – Adjusts inner space at the bottom.
Left – Adjusts inner space at the left.

Usage:

Padding ensures that text or images inside an element don’t touch its edges, maintaining readability and visual comfort.

The Advanced Settings panel provides precise control over how your popup elements behave, align, and appear. By adjusting content direction, spacing, and layout flexibility, you can create modern, responsive designs that adapt seamlessly to different devices. Whether refining spacing or managing complex layouts, these options give you full creative freedom and professional-level customization.

What’s next: Explore how all these editor features come together in a real campaign setup. The next article, Powerpop Editor Workflow, shows how to structure your popup creation process from layout design to final implementation.