Layout and Appearance

Layout Options

The Layout selector provides four modes.

Stack Layout

Stack places content in a vertical arrangement.

It is suitable for advertisements that prioritize a straightforward reading order.

Typical sequence:

[Logo]

Company Name

Slogan

Call to Action

Fine Print

Centered Layout

Centered aligns the advertisement's main content and text toward the center.

It works well for compact promotional cards.

Middle Layout

Middle centers the content vertically while retaining left-aligned text.

It is useful for designs with substantial unused vertical space.

Row Layout

Row uses a CSS grid arrangement.

Its intended content placement is:

[Logo] [Company Name]

[Slogan]

[Call to Action]

[Fine Print]

The Row layout is particularly useful when the logo should appear beside the company name.

Advertisement Dimensions

Set the dimensions using:

• Width (px)
• Height (px)

Default Inputs

You can change these dimensions to suit your placement.

Example Dimensions

These are examples, not predefined OK Ads sizes.

Square Mode

Enable Square Mode to remove corner rounding from the advertisement container and its call-to-action element.

Square Mode changes border-radius styling.

It does not automatically force equal width and height.

To create a geometrically square advertisement, set matching dimensions.

Typography

Font Family

The font selector includes:

Actual font appearance depends on which fonts are available on the visitor's device.

Font Sizes

The generator contains three adjustable font size fields.

The input values are inserted into the generated CSS as em sizes.

Example

.ad-title {
  font-size: 2.6em;
}

Text Shadow

Enable Text Shadow to apply an additional shadow to the title and slogan.

This can help create visual depth or improve readability over certain backgrounds.

The generated shadow uses a dark, partially transparent appearance.

Color Controls

Several color settings can be changed using either the color picker or HEX input.

HEX Example

#77777E

HEX fields are synchronized with their corresponding color pickers when a valid six-digit HEX value is entered.

Border Width

Set a nonnegative border width in pixels.

Example:

Border Width: 2

Border Animation

The Border Animation checkbox is enabled by default.

When enabled, OK Ads generates animated rainbow border effects.

The animation moves through multiple colors, including red, orange, yellow, green, cyan, blue, and purple.

Animation Duration

The generated animation uses a ten-second cycle.

Static Borders

Disable Border Animation to use the configured border color and width.

Close Button

The Close Button checkbox is enabled by default.

When enabled, the generated advertisement includes a close control.

The close button hides the advertisement when selected.

For grouped advertisements, the implementation attempts to hide all advertisements within the same group.

Spacing and Padding

OK Ads provides controls for fine-tuning content spacing.

Content Top Padding

Adds spacing above the advertisement's inner content.

Image Size

Adjusts the logo image width relative to its container.

Image–Title Spacing

Controls additional margin before the title.

Title–Tagline Spacing

Controls additional margin before the slogan.

Tagline–CTA Spacing

Controls additional margin before the call to action.

Design Recommendations

For effective advertisements:

• Use readable typography.
• Maintain strong contrast.
• Keep the main message concise.
• Avoid overcrowding.
• Match image proportions to the container.
• Preview with and without border animation.
• Check the result on mobile screens.

Tip: Animated borders can attract attention but may be distracting. Consider using a static border for calmer designs or interfaces with accessibility requirements.