Help
Print
Advanced Editor User Guide
Welcome to the Xen Advanced Editor, a powerful tool that allows you to create complex, responsive HTML layouts without needing to know how to code. This guide will walk you through the basics of using the editor, as well as some advanced features like saving custom templates, inserting icons, and understanding the grid system for responsive design.
1. Getting Started
The Advanced Editor is available directly from the Authoring Tool in the Xen platform. Here’s how to access it:
- When editing a page within a course, simply insert a new HTML Component and choose the Advanced Editor option to start designing your content.
- You’ll be taken to a visual editing interface where you can drag and drop elements, structure your layout, and customise the look and feel of your course content.
2. Editor Basics
The editor is a drag-and-drop interface that includes various elements you can use to build your layout. Here are some basic steps to get started:
- Add Components: Select a component (such as a text block, image, or container) from the side panel and drag it onto the canvas.
- Edit Components: Click on any component in the canvas to edit its properties, such as text, font, size, or colour.
- Arrange Components: You can move, resize, or delete components to fine-tune the layout. Just drag components around the canvas.
3. Grid System for Alignment and Responsiveness
The Advanced Editor uses a grid system to ensure that your components are aligned in a structured, responsive layout. Here’s what that means for course designers:
- Grid-Based Alignment: When you drag components (blocks) onto the canvas, they snap to a grid, ensuring that everything is properly aligned. This makes it easier to maintain a consistent design, as the blocks automatically align with each other without needing manual adjustments.
- Column and Row Structure: The grid system divides the canvas into columns and rows, providing a framework for structuring your content. Each block you place fits within this grid, which helps ensure that your design scales correctly on different devices.
Why This Matters for Responsive Design:
- Consistent Layout Across Devices: The grid system ensures that the components you design will adjust fluidly as the screen size changes. For example, a layout that looks great on a desktop will automatically resize and reflow to suit tablet and mobile views, thanks to the grid structure.
- Control Over Layout: Course designers can maintain precise control over how content appears on different screen sizes. By sticking to the grid, you reduce the likelihood of elements overlapping or misaligning when viewed on smaller devices. You can also control how many columns the content spans on different screen sizes (e.g., full-width on mobile but two columns on desktop).
- Easy Adjustments: If you need to make your layout more responsive, the Device Preview option in the editor allows you to see how your design looks on desktops, tablets, and mobile devices. You can make specific adjustments to ensure the content is optimised for each view, while the grid ensures everything remains aligned.
4. Custom Templates
You can save your custom designs as templates for future use. Here’s how:
- Once you’ve designed a section or page layout you want to reuse, click on the Save as Custom Template option from the settings menu.
- Your saved template will now be available in the Templates section of the editor.
- To reuse a template, drag it from the Templates section and drop it onto your new page.
This feature is perfect for reusing headers, footers, or standard content blocks across multiple courses.
5. Inserting Icons
We’ve created a custom Icons Block that allows you to easily add icons to your designs. To insert an icon:
- Open the Blocks tab in the Advanced Editor.
- Drag the Icons Block to your canvas where you’d like the icon to appear.
- Select the icon style and appearance from the properties panel to customise it according to your course branding.
6. Editing HTML Email Templates
The Advanced Editor is not limited to course content. You can also use it to customise the HTML email notifications sent by Xen.
- When editing email templates, you will see the same familiar interface, allowing you to design and style emails using the drag-and-drop features.
- You can customise both the content and appearance of email notifications, ensuring consistency with your organisation’s brand without needing any coding skills.
7. Saving and Publishing
After completing your design, remember to save and publish your content:
- Click Save to store your progress.
- Once you’re ready, click Publish to make the content live for learners or to finalise the email template.
This guide provides a comprehensive overview to help you start using the Advanced Editor efficiently, including understanding how the grid system enhances responsive design and control. For further assistance, refer to our Help Centre or contact your Xen Customer Success team.
FROGED