
Visit Editor X
www.editorx.com/editor-x/stef-course
Visit Editor X
www.editorx.com/editor-x/stef-course
Visit Editor X
www.editorx.com/editor-x/stef-course
Visit Editor X
www.editorx.com/editor-x/stef-course
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.
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 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.
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.
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.
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.
Here you can find all the resources we have used to create the project.
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.
Hello there and welcome to my new course! This course is sponsored by Editor X.
For those of you who are not familiar with Editor X, Editor X is basically a web application or an advanced creation platform for designers and web professionals. Editor X combines cutting edge responsive design with relatively easy and smooth drag and drop experience. With Editor X you can design and build almost any website you imagine. It's possible to design and build beautiful websites without any experience with Web development whatsoever!
Editor X allows you to build fully responsive websites that automatically scale to any screen size or device they are being viewed on to deliver the best user experience. Using the latest design technology like flexible grids, layouts, fluid sizing and breakpoint customization, you can ensure that your site looks exactly how you want on various different screen sizes.
Also Editor X has quite clean and intuitive interface which will allow us to easily navigate between many different tools, features, categories, panels and that way keep our focus primarily on building our website.
Now we are going to start this course by completely introducing with almost every Editor X tool and feature. You'll get familiar with it's design interface, canvas, shortcuts, compositions and all other components which are essential for one website to be responsive and good looking.
You'll see in action how Flexbox technology can help us apply responsiveness to our website. Flexbox is a CSS container created around elements to ensure they're automatically arranged depending on screen size. It's a helpful tool in responsive design that prevents things from getting messy, like when elements overlap or change their order. The most useful Flexbox technology tools are Layouters and Repeaters. They will automatically adjust your content to every screen size without even thinking about breakpoints.
After that I will introduce you to the Content Manager. And it's main purpose is to act as a database on the backend. With content manager we can create something that's called a collection, and a collection is basically a data table which can contain different types of information in the form of rows and columns. There we can put images, links, text video, audio, document and many other different types of data.
We can use Content manager to display that data to our website or ever gather some information from our visitors through the forms, where users can write some information and send them directly to our backend inside a collection.
You will learn how to apply beautiful and smooth animations and hover interactions to a website as well. Also we are going to explore an app market where we can search and find many different useful applications which are available on Editor X platform. Those applications can be installed on our website in just a click within a few seconds. And Like I said there you can find many different apps but some of the most popular ones are for building a blog, forum or even an online store on your website. In this course I have explained everything you need to know about it.
And there's more! At the end of this course, when we cover everything you need to know about building websites with Editor X, we are going to start working on a real project, where we are going to design and build our own website from scratch!
So what are you waiting for, let's get started!