Using Layout Templates When Embedding Individual Assets in Cincopa

When embedding a single asset—such as an image, video, or audio file—Cincopa allows you to apply a Layout Template to control the look and behavior of the embed. This means your single asset can inherit predefined styles, layouts, and custom CSS without requiring manual configuration every time you generate an embed code.

What Is a Layout Template?

A Layout Template is a saved set of display settings that defines how an asset (or a full gallery) should appear. Even when you’re embedding only one item, you can apply a template to automatically style the asset according to your design preferences.

A Layout Template can include:

• Layout: grid, slider, carousel, spacing, aspect ratios
• Fonts & text: captions, titles, font styles, colors
• Colors & backgrounds: backgrounds, overlays, borders
• Controls: buttons, icons, navigation
• Behavior: autoplay, transitions, lightbox options
• Media-specific options: video player skin, image zoom, audio player style
• Custom CSS: add or override styling
• Responsive settings: mobile layout and touch behavior

By selecting a template when generating your embed code, your asset immediately adopts all the template’s design rules.

How to Apply a Layout Template to a Single Embedded Asset

1. Click on Media Library from the top left menu to access all the assets.
   
   

2. Open the asset you want to embed by clicking on the asset thumbnail or you can click on the Embed icon to directly open the embed-code panel.
   

3. On the Asset page, click on Embed to open the embed-code panel.
   

4. In the embed panel, select Advanced.
   

5. Locate the Choose your layout from a gallery dropdown and select the Gallery Template you want to apply.
   

6. Copy the automatically updated embed code by clicking on the Copy Embed Code button.
   

7. Paste the code into your website or application.

Your embedded asset will now display using the styles and behaviors defined in the selected template.

Example: Updating Caption Font and Background

If you need to customize caption fonts, background colors, or similar styling for single-asset embeds:

1. Create or edit a Layout Template in Cincopa.

2. Add your custom CSS (e.g., font family, text color, background styles) under Edit CSS in the template settings.

   .mejs-layers .mejs-captions-layer .mejs-captions-position .mejs-captions-text {
     font-family: Roboto, sans-serif;
     color: #fff; 
     background: rgba(0, 0, 0, 0.75);
     font-size: 100%;
   }

   
   

3. Save the custom CSS and save the updated template.

4. When embedding any asset, select this template in the embed panel.

Once applied, every asset embedded using this template will use the updated caption styling—no additional edits required.

Benefits of Using Layout Templates for Single Assets

• Consistency: Ensure all embedded assets share the same branding and styling.

• Efficiency: Avoid reapplying CSS or editing embed codes manually.

• Scalability: Update the template once and apply changes across all future embeds.

• Flexibility: Create multiple templates for different brands, themes, or layout needs.