Overview
This guide covers everything you need to know to get started, from creating your first layout to adding elements, customizing them, and managing your content.
Layout Editor Outline
When you open a layout, the editor is divided into four main areas:
Left Side Menu (1): Add text, images, videos, shapes, clipart, apps, and playlists to your layout.
Canvas Frame (Center) (3): The main design area where you place, arrange, and resize elements.
Top Navigation Bar (2): Manage layout name, resolution, background color, undo/redo, and layers.
Toolbar (Contextual): Appears when you select an element and gives you editing options specific to that item.
Layout editor overview with highlights
Step 1 – Creating a New Layout
You can create a new layout from scratch or start from a pre-designed template. From the Layouts section in your Yodeck dashboard, you can either:
Create a new blank template: Under the My Layouts tab, click either on the Create New Layout button if you already have other templates or on + Create Template if you don't have others. This option allows you to gain full control of your template.
Create a new blank branded template (only available on the Premium/Enterprise plans): Under the Branded Templates tab, click on the + Create Template button. This option allows you and your team to create branded content quickly and at scale using your custom shared templates.
Select a ready-made template design for customization: Under the Discover Templates tab, select any pre-created template you like and customize it according to your needs.
All available Layout creation options
Lastly, once you land on the layout page (either new or ready-made), you must name it by changing its predefined name from the top left corner.
💡Tip: Templates are great for quickly building signage with a professional look. You can always modify them later to match your brand.
Step 2 – Exploring the Left Side Menu
The Left Side Menu is where you’ll find everything you can add to your layout, along with some layout settings:
Media: Upload images, videos, audio, documents, and web pages, or select them from your library.
Apps: Include dynamic widgets like clocks, weather, and more.
Playlists: Insert existing playlists into your design.
Text: Add text boxes with customizable fonts, sizes, colors, and alignment.
Elements (Shapes & Clipart): Add visual elements to highlight content.
Settings: Manage the layouts, background audio, snap-to-grid option, lock, and availability.
Left Side Menu options
To add an element, you need to first select one of the menu options and then:
Either click on an item to insert it onto the canvas frame.
Or drag and drop an item directly where you want it on the canvas frame.
💡Pro Tip: Frequently used shapes and graphics will appear in the “Recently Used” section for quick access.
Step 3 – Designing on the Canvas Frame
The Canvas Frame is where you visually build your layout. Each element you add can be moved, resized, and layered.
Move elements: Click and drag them into position.
Resize elements: Drag the corner handles to scale up or down.
Align precisely: Use the “Snap to Grid” feature for pixel-perfect placement.
Canvas with two elements and extra fitting options appearing for the selected element
Step 4 – Customizing Your Layout
When you select an element on the canvas frame, a toolbar with editing and fitting options specific to that type of content appears at the top.
Font family and size
Text and background color
Bold, italic, underline
Alignment and spacing
Positioning adjustments of the component on the levels of the Canvas Frame.
Duplicate, lock, rotate, or delete
Text options
Replace media
Fitting mode: Fill, Fit, or Stretch
Transparency toggle
Advanced image editing via Pixie Editor
Positioning adjustments of the component on the levels of the Canvas Frame.
Duplicate, lock, or delete
Media options (Image)
Color and stroke settings
Flip and rotate options
Positioning adjustments of the component on the levels of the Canvas Frame.
Elements (Shapes & Clipart) options
💡Pro Tip: Use the multi-selection feature (Shift + Click) to select and edit multiple items simultaneously; a major time-saver when adjusting layouts with many elements.
Step 5 – Adjusting Layout Settings from the Top Navigation Bar
You can control several global settings from the Top Navigation Bar:
Layout Name: Rename layouts inline.
Resolution & Aspect Ratio: Choose from predefined sizes (Full HD, 4K, etc.) or set a custom one.
Background Color: Use the built-in color picker to instantly set a solid background.
Undo/Redo: Reverse or reapply recent changes.
Layers Panel: Reorder, hide, or lock elements.
Top Navigation Bar options
Step 6 – Previewing Your Layout
Before publishing, you can preview your layout to see exactly how it will look on screen.
Click Preview in the top-right corner.
A new window will open showing your layout as it would appear on your player.
Adjust any elements if needed and Save your changes.
Layout preview window
⚠️Browser Tip: If nothing happens when you click “Preview,” your browser may be blocking pop-ups. Allow pop-ups for app.yodeck.com to enable previews.
Step 7 – Managing Your Layouts
Once your layouts are ready, you can manage them from the Layouts page:
Edit: Open and update any layout.
Duplicate: Create a copy for testing or versioning.
Move: Transfer layouts between workspaces (Enterprise only).
Delete: Permanently remove a layout.
Add to Playlist: Add the selected layout to an existing playlist.
Set to Screen: Directly set this layout on your choice's screen(s).
Save as Template: Save this layout as a template to be also available under the Branded Templates tab for your team, as well as for future endeavors.
Item Details: You can check the layout details and logs about its date and time of creation and modification(s).
Managing Layouts
💡Pro tip: Overall, you can further organize your Layouts using Folders and the Search functionality to keep your library structured.
Best Practices for a Great Layout
Match your aspect ratio: Always use a layout that matches your display’s resolution to avoid stretching or black bars.
Use layers strategically: Keep important elements on top and group related items.
Maintain brand consistency: Use your company’s colors, fonts, and logos.
Test before publishing: Always preview layouts to catch errors before pushing them live.
F.A.Q.s
Got questions? We’ve got answers! This section addresses common questions about the Yodeck Layout Editor.
Can I play background audio while videos are running?
Yes — but background audio takes priority. Once enabled, it will continue playing and override any video audio on screen.
Can I stop background audio mid-playback?
Not at this time. To hear audio from your video, you must disable the background audio setting in the layout.
What happens if I resize my layout?
Your content will adjust to the new resolution, but you may need to reposition or resize elements for the best result.
Can I duplicate a layout and reuse it?
Absolutely. Duplicating layouts is a great way to maintain consistency while experimenting with design changes.
What happens if background audio is enabled?
It will override any audio from videos or other media. Currently, there’s no option to switch back to video audio mid-playback automatically.
"Layout Editor" Series - Article Navigation
Click any of the buttons below to proceed to whichever article (1-7) you wish in the Layout Editor series.
Need Help?
The Yodeck Support Team can help you out! Log in to your Yodeck account and send us a message from the bottom right corner!