In this lesson, I'll teach you everything you need about EditorX site styles or theme manager.
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!
As we continue getting familiar with editor X workspace. One really important tool we have as designers is the theme manager or site styles. Let's go ahead and open it up by clicking this little icon with a letter and droplet right up front. You get typography and colors. These are organized into six different headings and up to three paragraphs, these headings are named after their HTML counterparts, H one H two, et cetera.
Those HTML tags are for semantics. So. The page can be readable by spiders and for accessibility, the common rule of thumb is never to use more than one H one in a single page. We need to make sure that we use the correct semantic tags across any page throughout the website. If you select our title in the canvas and click edit text in the floating man.
You'll see that the very last option is your semantic HTML tags. You can choose a tag like H five, but still apply a different heading style. Using that same floating menu. We have the power to override without affecting the global style. For example, editor X gives you a lot of really cool fonts to choose from, but we'll want to upload our own fonts too.
By simply clicking on that fond family down and then upload fonts. You'll see this pop up for you to upload your own licensed font in any of these forums. Just like the font family. You can also override the font size and even toggled font to be scalable. For example, let's say I want a huge title. We can change it to 300 pixels, change the font to Atlas and set the text alignment to center.
Let's go ahead and align it center vertically and horizontally. There we go. Just like that. Check this out. As I start resizing the canvas with the handles, notice how the font sizes will remain fixed. Inevitably breaking our design. If we talk all the scalable text in our desktop view and set it to go from 50 to 300.
And then click preview. Oh yeah, this is what I'm talking about. It's so cool. Updating any of our library styles is pretty easy to do you click the styles dropdown and then click update theme. It'll take you right back to the theme manager. Notice you can bring the font family size and even the color.
Unfortunately it doesn't save the scalable text yet, but be careful not to accidentally change it without double-check. As these will affect all of your styles across this website and any other site that share this exact thing. Yes. You can have themes across sites too, which is really cool. This is useful when you have say maybe a primary brand like Coca-Cola and you need to launch several mini sites, uh, from that same brand, it can pull Coca-Cola theme from your design libraries and Vola, just like me.
You're ready to rock and start another site following the correct guidelines. We'll cover more on this in the next video, but just a quick heads-up before we finish all these styles, including colors. That means we can't add more or remove the ones that exist already. So use them wisely and remember, nobody really needs that many colors or styles.
Anyway, a good design system is based on the kids mentality. Keep it simple, stupid.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS