The Design Editor

The Design Editor is a powerful, layer-based tool that allows you to customize the look and feel of your social media image templates. If you are familiar with design software like Photoshop or Canva, the workflow will be intuitive.

Entering and Saving Templates

You enter the editor by creating a new template or by clicking on an existing template in the Templates view.

Important: Cloning Apaya Templates

Apaya’s default templates are read-only. If you modify a template provided by Apaya, you must click the Clone Template button in the top right corner. This saves your customized version as a new, distinct template in your personal library.

Core Interaction

Templates are built on a canvas using layers.

• Element Properties: To edit an element (text, shape, image), click directly on it on the canvas. A context-sensitive toolbar will appear at the top, allowing you to quickly adjust properties like font, size, color, position, and style.
• Layer Manipulation: Elements can be clicked, dragged, moved, resized, and rotated on the canvas.

Left Menu Panel Tools

Canvas

This panel controls the overall settings of your template.

• Color Palette Link: This is where you link the template to your brand identity. You can choose to automatically rotate through all your saved palettes or lock it to one specific palette.
• Background: Control the background of the canvas, including linking colors to your brand palette, setting a custom color, or applying a gradient.
• Canvas Size: Select the specific social media aspect ratio (e.g., Instagram Portrait) or define a custom size.

Elements

Use this panel to insert dynamic content and fundamental shapes.

• Variables: These are placeholders ({hook_headline_text}, {brand_website}) that the Apaya AI fills with campaign-specific or brand-specific content when generating a post. Essential variables include:
  • Headline Text
  • Supporting Text
  • Brand Logo/Website/Social Handle
  • Call to Action (CTA)
• Shapes: Add standard geometric shapes to enhance your design.

Text

Use this to add static text fields that are not automatically generated by the AI. You can choose from pre-set styles like Title, Subtitle, Body, or Fine Print.

Images

Access and insert visual media into your template from three sources:

Your saved images and assets, uploaded via the Assets section.

Stock

Access a vast library of high-quality stock photography.

Generate Photos

Use the Apaya AI to generate a unique, context-specific image based on a text prompt.

Layers

This is a comprehensive list of every element on your canvas. It allows you to:

• Search: Quickly find specific elements.
• Reorder: Change the stacking order (front/back) of elements by dragging the layers in the list.
• Visibility: Toggle layers on or off.

Previewing Your Template

When you are inside the Design Editor, the Preview panel (located on the right) is an essential tool for verifying that your template works correctly with dynamic content. It allows you to see your design populated with real-world data generated by the Apaya AI.

How to Generate a Preview

Click the Preview button (or Clone Preview if you are editing a default template) at the top of the editor.

Use the Topic dropdown menu to select from your topic library, or leave it set to Random to pull general sample content.

Click Regenerate Preview to load new text and variables into your design.

Preview Panel Details

The panel is divided into two main sections:

• Rendered Preview – This is the visual output. It shows your custom template exactly as it will appear in a live social media post, with the AI-generated text and variables inserted into your design. Use this to check for text overflow, placement issues, and overall visual harmony.
• Generated Content – This section displays the actual text and data that were pulled from the AI and inserted into the template’s Variables. Reviewing this verifies that your placeholders (e.g., {hook_headline_text}) are successfully connecting to the correct data fields.

Applying Dynamic Colors with Palettes

When editing a template, you can apply colors to elements (such as shapes or text) using either fixed, custom values, or the dynamic colors defined in your Brand Identity Palettes.

Using the Color Picker

• Click on a shape, text field, or element on the canvas.
• A contextual toolbar will appear above the element.
• Click the color swatch icon to open the color picker modal.

The modal contains two tabs that determine how the color is applied:

Palette Tab (Dynamic Color)

Selecting a color here links the element to one of your brand identity roles. This is critical for creating dynamic templates that automatically adapt their color scheme when you rotate through different palettes in a campaign.

• Main Color: Applies the primary color from the active palette.
• Accent Color: Applies the secondary/highlight color from the active palette.
• Text Color: Applies the designated text color from the active palette.

Custom Tab (Fixed Color)

This functions as a standard color picker. You can select a color from the swatch grid, or enter a specific hex code (#ff4cf2).

Note: Colors selected in the CUSTOM tab will not change when you switch palettes or generate posts with different color schemes; they remain fixed.