Build Amazing Websites with No Coding | Editor X Masterclass

Editor X breakpoints create fully responsive websites with flexible grids and fluid sizing, using mobile, tablet, and desktop breakpoints with cascading changes from largest to smaller.

Learn to speed up website design in the Editor X Masterclass by using essential keyboard shortcuts for undo/redo, copy/paste, duplicate, save, publish, and preview, plus efficient layer management.

Save design assets in Editor X by storing containers and sections in design libraries or my assets, then drag and drop reusable components across pages and projects.

Use empty boxes to build website components by adjusting width, height, margins, padding, borders, radius, and shadows; explore overflow options to hide or scroll content across tablet and mobile breakpoints.

Master grouping to edit multiple elements at once and accelerate design, then use stacking to keep elements in vertical order across breakpoints with a transparent container that prevents overlap.

Explore the outer circle layout tools to build responsive, auto-adjusting layouts with aflex technology, using mosaic and grid options, item sizing, wrap, and breakpoint adjustments.

Master lightboxes, the pop ups that grab attention with triggers, overlays, delays, and animations for cookie notices, discounts, and newsletter signups. Manage them in the pages and layers panels.

Learn to use a variety of inputs in Editor X Masterclass, including text inputs, radio buttons, dropdowns, date pickers, uploads, and selection tags. Customize design, settings, and states.

Master how to implement and customize menus for navigating pages and sections. Explore horizontal, vertical, hamburger, and anchor menus, plus social bars, with breakpoint-driven visibility and link items.

Implement diverse contact forms and Google Maps, customize fields and locations, and track submissions with an email-driven dashboard featuring contact lists, inbox, and automations.

Masters let you reuse headers and footers across multiple pages; edits to a master apply everywhere, while design assets are separate. Create, display, and detach masters, and set sticky headers.

The theme manager centralizes typography and color themes to keep designs consistent. Edit typography styles, font sizes, boldness, and colors; manage design libraries and propagate changes.

Explore roles and permissions in Editor X, invite teammates, assign predefined or custom roles, and use the comments panel to tag collaborators and resolve feedback.

Learn how interactions in Editor X beta add hover effects to sections and components, configure custom animations, timing, and properties to create engaging, dynamic previews.

Learn how the content manager lets you build dynamic, content driven sites without coding by separating content from design, creating collections, fields, and data set controls to power updates.

Connect a collection in the content manager to a repeater via a data set to display dynamic team content, including full name, biography, and profile photo, on your website.

Demonstrate read and write dataset mode by reading and updating user profile data in a profile collection, linking fields like first name, last name, and photo to the UI.

Add and configure a members area on your site to enable member accounts, login bars, profile cards, badges, and public or private member pages with configurable sign up and permissions.

Install a forum with the Editor X forum app and members area, create categories and posts, manage permissions, and customize the header and layout to engage visitors.

learn how to install and use the events application to manage RSVP and ticket events on your website, including online and in-person formats, registration, schedules, and guest lists.

Learn to install and manage groups on your Editor X site, configure list and grid layouts, set public or private groups, and customize group pages for members and discussions.

Design a responsive header across desktop, tablet, and mobile breakpoints, using viewport height, Raboteau font, a color palette, a logo text, a navigation menu, and a sticky header.

Design the first section of a no-code website in editor x masterclass by configuring a 90/10 viewport layout, styling the background, and arranging images, vectors, and padding in two columns.

Learn to optimize a section for desktop, tablet, and mobile breakpoints by adjusting layout, scaling images proportionally, resizing fonts, hiding elements, and applying spacing for clean, responsive design.

Explore how design section #2 guides resizing breakpoints, preventing image cropping by removing min height, creating a two-column layout with 20% and 40% widths, and applying padding and vector-based styling.

Design a new section by applying responsive typography and layout tweaks across desktop, tablet, and mobile breakpoints, including padding, opacity, repeaters, and centered text to showcase success stories.

Design the website footer with responsive four-column layout, padding, background color, a social bar, navigation sections, and a subscription form with a lightbox success message, optimized for tablet and mobile.

Apply and customize animations across a website—header, hero, and sections—using float in, spin, expand, and delays. Preview anchors and menu links to ensure smooth navigation.

Learn to implement hover interactions in Editor X Masterclass by applying custom animations to containers and sections, using translate, rotation, scale, opacity, borders, shadows, and repeater items.

Install a blog and members area, customize header and login bar, configure blog pages and posts with an orange theme, preview, publish, and enable sign-up with Google and comments.

Add a site search bar on your website and create a search results page. Enable quick search to show relevant results instantly and customize placeholder text and results per page.