Edit global classes

General
1

Hey all, just a quick tutorial on global classes and how to access and edit them.

There are a few ways to do it:

Method 1

Selecting a global class from the classes sidebar:

image
image1919×977 111 KB

Once the global class is selected, you’ll notice a pink color indicator in the Selector area, indicating that it is being edited.

image
image1918×975 112 KB

From there, you can easily modify its properties using the styler sidebar.

Method 2:

Hold the C key and click directly on the Element on the canvas to access its global class

Using these methods, you can easily access and tweak global classes, ensuring a consistent visual style throughout your website. It’s a good idea to define these classes early on in your project and reuse them wherever needed. The best part is, if you ever need to make changes, it’s effortless to update them. :sunglasses:

5 Likes
2

Is there any way to delete the pre-existing global classes? like div, container, h1,h2…
Even when I started from scratch while creating a new project, I saw some global classes existing there already. So do I have the only option - to edit those one by one if I want my own style and font to be set as global?

3

You can delete styles that are applied to global classes. When you are starting project from scratch you are getting some of our predefined global styles.

Simply select a global class, for example (heading 1), and then reset styling that you dont like.

Also if you are familiar with CSS, you can easily see what styles have bene applied when you click custom CSS icon on top of desing tab.

image

And then you will see all CSS properties (styling) applied to that global style on selected breakpoint.

image

1 Like
4

Run in console this code, however keep in mind that it will remove all the classes and global styles (body, h1, h2, etc).

$.each(classes.ItemsGet(), (id, cls) =>
{
    cls.Fn(‘remove’);
});
2 Likes
5

@Pakic Yes, already noticed that. But editing CSS one by one all the global classes are bit extra work when I have specific requirements in terms of typography or width, height etc.So I was looking to remove those when building from scratch. Thanks for helping me.

@dejan Great! it worked perfectly, this is what I was looking for.Problem solved.
Thanks for the help.