In this lesson, we explore EditorX workspace along with my own tips and tricks.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Go ahead and click edit site from our dashboard. We have our top navigation, our bar with tools and your page canvas. There are a few things I like doing when I start learning a new tool. The first thing. Finding our keyboard shortcuts. We can find that under the help. Ben keyboard shortcuts, big shortcut to open it is by simply using command forward slash or control forward slash in windows.
These are split into categories. You have the basics, which are the most common saving publishing and previewing our page below that we have stage interactions. These take care of actions. When you select elements in your canvas, like duplicating or moving things about each other. Very similar to PowerPoint.
There's also this cool feature called stacking. We'll take a look at that later. If we scroll down a bit further, we see the view shortcuts. The way editor X works is a bit interesting because we're all used to using the shortcut to zoom in and out of our browser. In any standard site, this helps us read better by scaling everything on the page.
But with editor X, we do that. Everything, including our tools will scale, which is not ideal. Especially if we're working on a high resolution monitor to fix this, they did something really clever, which is to enable its own canvas, some controls to activate this. We can simply click on view sooner. Or use the shortcut command plus plus, which will turn this feature on once you've activated the canvas sume controls.
You'll notice the little Sumo icon in the top, right? Once it's active, you can use the normal zoom in and out keyboard shortcuts. Trust me you'll thank me later when you built your next project, just like our, some controls. Take a look at these side house. They let us proportionally scale our canvas. If we drag them all the way inward, we'll start shifting between break points.
You'll notice these gray areas, which simply give you a reference of where the break point begins and where it ends. For example, this one starts at 7 51 souls and ends at a thousand pixels. Same with the mobile break 0.3 22 7 50. We'll dive into this topic in later lessons. All right, let's go ahead and click on that plus button on the top left, just like the keyboard shortcut panel.
We have a set of elements that are organized into categories. The quick ads are all those common. Any website usually has you have the title, paragraph buttons, images, and video. Now some of them aren't are more complex than others, but let's not worry about that. Adding basic elements into our cannabis is pretty simple.
Just select it. And that's it. Anytime you want to add any of these items into your canvas simply right. Quick add, and then choose your elements. This is going to be the most common thing you'll do while using editor X, but you know, what would be cool though? I love to have a search feature like the apple command center, where you just type in and get any elements instead of using clicks.
But Hey, this works just fine. So let's skip that for now and take a look at other categories. Compositions are predefined layouts that serve a common usage. For example, we can build out an entire page by simply selecting some of these blocks. These are also organized into categories within categories.
When you start adding these compositions into your canvas, you'll notice each one sits within its own block. We'll talk more about them later, too, but just a heads up these compositions typically are your blueprints because they contain grades and flexible layouts that you can reverse engineer. To get a sense of how editor X works.
One really cool feature we'll cover is the theme manager or site styles where we can set global fonts and colors, making it super easy to customize and replace all these compositions that we just inserted over here. You'll see empty containers for you to wrap text or images. You have multi column grids, Lauders, which behave like.
But are easier to use in different break points. Please lay out. Hers are using the power of flex, which is a nerdy term in the web development world. Repeaters are just like Lauders with the exception that they're specifically used to connect with dynamic data. And finally, there's slight boxes which behave like separate pages and are triggered by button.
Let's go ahead and select the light box and add it into our canvas. For example, if I open up the pages, you'll notice the light box appears under its own section called light boxes so we can edit them globally and bill them whenever we need it. That's pretty cool. This panel is where you'll find your site map.
You can have a static pages like the homepage, or you can create dynamic pages. Let's go ahead and use the plus to add more pages. Notice how in the canvas, both the footer and header came along. Any section that has this green glow are called masters. Think of them as components that can be shared across your site, any edits that you make in a master, it will be applied everywhere.
So as you can see here, it's pretty straightforward. And the fact that editor X gives you all these pretty fine elements is a huge lift. When you need to launch something quickly. There's two really cool elements that I love in editor X. That's the library of shapes and transparent videos. Check this out.
I'm going to select the statue into my canvas. Just by looking at this, there's nothing special. We can right-click at shape, scale it up using these corner nodes, command down to move it behind the statue and then just click preview. Damn, that's pretty good. Since shapes and editor X are editable SVGs. We can even change the color to make them pop.
We do that using the inspector panel, select the shape element, then click on the top. Right lever. Or command I to open up the inspector panel. This inspector panel is split into three parts, layout, design, and interactions under layout. You'll see these according settings for size position, scroll, adjust, and anchor, and for design you'll have field color order and shadow.
This is where you will change elements, background, color, changing. These values works. Even if you upload your own images. It's pretty useful, especially when you have icons and perhaps you'd like to change their colors in different states, like on Hoover. So let's say we want to upload our own shape.
We're going to need to access the media library so we can find that under tools, media manager, This opens up a pop-up, which gives you access to their library of stock photography, shutter stock. And Unsplash, let's go ahead and upload our SVG. You can drag and drop multiple files or choose individually.
There's plenty of third party integrations you can do too, like Dropbox or Google drive connecting. It is pretty simple, but for now we'll just drop our local SVG. There we go. If we close this, we should be able to swap it. With the original shape we added. Let's go ahead and select the shape. Click on change, basic shape on the menu, above it.
Choose side files, select the new image and add to page. And that's it. Pretty cool. Right. To wrap this up guys, editor X gives you the possibility to add custom code. It opens up the doors for many opportunities. Like I mentioned earlier, think about it. You could create a role under settings and brand developers access to go crazy.
Are you there?
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS