Q to Classes, Presets and how to use it right in Cwicly

How can I create a “virtual” class besides using block classes from other blocks? I can “create” it when I write a new name inside the virtual class field, but how can I do something with it? Here it is purple and I can only show/notshow it, but how can I put values inside the newly created virtual class?

Actually I like this hierarchy of classes, with Global, to relative or virtual classes, to block class. I can see the use for it, but do I have to make an extra “Virtual Classes” page, where I put blocks and rename their class names to create the virtual classes, that I can actually use in the real pages/posts?

Also I do two presets for buttons, for example. Like with the class name cw-button-prim and cw-button-sec or so. How can I connect a button on a page to that preset for buttons? If I use “virtual class” it is not shown, but when I copy N paste the class name there, it takes the values over, but shows purple? And it still not shows for another button as a virtual preselection.

So: Where do I connect a button (or link) with its preset made in Global Styles Elements?

@jonn_mc, for sharing button styles across multiple pages of the entire site, global classes are likely to fit your needs better because virtual classes are specific to the page you are in.

The Cwicly docs for global classes cover the general usage and you can add and remove them from the dedicated panel, although I personally recommend the following shortcuts.

To associate a global class with a block:

  1. While editing a block select the global class button
  2. Type the name of the class you want to associate (if it is new, tap the create option in the dropdown or if it already exists, select it)
  3. Once you have associated the class, it appears as a green chip in the block inspector.

Screenshot 2023-03-19 at 14.27.21

To edit a global class you have already associated with a block:

  1. Select the global class chip you want to edit
  2. Modify any values you want to change in the block inspector
  3. Deselect the global class chip

When the block inspector is editing the global class you will notice that the global class name appears in the Class field and the chip becomes highlighted.

Screenshot 2023-03-19 at 14.27.28

Regarding associating buttons/links with Global Styles, you may find this related thread interesting.

Decedent summary from @StrangeTech :ok_hand:

To address your concerns of virtual classes and for a better understanding, I suggest to read the following topic (in its entirety):

Thank you both. @Marius and @StrangeTech. The global classes I get. My understanding difficulty is with presets and the virtual classes.

Oh… that is great:

“You can find and use External Classes in the Virtual Classes field available in every Cwicly bloc”

So… virtual classes is:

  1. All other classes on the same page (not global and not the one block class)
  2. All external classes (in separate External Class Folder which I can color code)
    That helps a lot. Still some questions though…

a: What/where are the Relative Stylings classes? Because here in the active block it shows the name of the relative styling and not the class I give to it (in yellow) under the class box. How can I put this class to another block on the same page? Or do I have to build the RS again?

b: What is when I write a new class name into the virtual class box and it says: “create new”, how can I use that? Or do I not? It is purple here and I can only show/notshow them.

c: What is with the Preset classes, where are they in virtual classes? If for links or button elements? I don’t know how to use them. I activate a paragraph as a link and there should be some place to add that preset link class into? I don’t know where to add that preset class. With preset button there is the possibility to add an preset (if you have only one) by using the button tag on the button.

If nobody else, maybe @Araminta can hint to where I can read/listen to that. Appreciate the help from anyone. :slight_smile:


Relative styling is a completely different thing entirely. A common use-case for relative styles is when you want to style all sub-elements of the block you are currently editing that match a particular css rule. Relative styles are essentially a visualisation of CSS styles and you can specify the types of selectors used to target the sub-elements to apply the styles to.

When you create a new virtual class you can associate it to any other block in the page you are editing using the same steps to edit as with global classes.

As I mentioned in the link in my previous response to you, it may be useful to use global classes rather than virtual classes for this, since you can then use them anywhere on your site.

You can create an empty global class with the appropriate name, associate it with any blocks you want the preset to apply to, and then associate that class to the preset as per this screenshot:

Screenshot 2023-03-19 at 16.16.27

This will apply the global button styles for that preset to any current or future blocks you add that class to.

Let’s take that route: What do you want to achieve?
You are not forced to use them at all.
Maybe you don’t even need them.

You need to type them in the virtual class field.
Keep in mind they only work if the correct tag is applied to the block.

@StrangeTech thank you so much for taking the time out of your day to answer me. :pray:

to b: Ok, I can make a new virtual class name and have to copy that to another block as its block class to change it there. So would make more sense to do it the other way round.

to c: Ok, so you say, it would make more sense to use a global class there.

It is really not easy to understand, where you CREATE and put the value into a class and where you USE them in that UI. I really thought, I create a class in Presets/Elements… Thank you.

@Marius thank you also! :pray:

to b:
Well, I like to put more than one class to a block, as these classes I can reuse on other blocks. For example one for light, one for dark shading, one for padding, one for margin, that can be used for different elements but make all elements on the page (not necessarily the site) look the same and let me change it later without a sweat, and not all in one class all together so I don’t have to check all elements of the page again.

So I like to have more classes per block, that I can change easy, just in the class field with a tab or a comma to be created. And would be cool to change the class by just clicking on it, like now with the one block class possible. I do not see the necessity to differ between the block class and the virtual classes. Just click on it and you can change the active class.

to c: ok, it is not shown in virtual class field dropdown. But work when copied there.

Thank you.

I understand completely, Cwicly provides many possible ways to achieve a task and sometimes we have to figure out which is the best one to choose. All of us go through the same learning steps and it takes as long as it takes for it to “click”.

The steps I shared with you are my preferred way to create and edit global classes because you can stay within the block editor and simply select and deselect the “chip” for the global class.

I like how the UI is consistent whether you are editing the block styles or the global class styles. This saves a few valuable seconds each time you need to change what you are editing, which can add up over time and make a big difference when you use Cwicly a lot.

1 Like

I think one needs to understand that in most cases, a virtual class is only a reference to an already existing class.
This can be a block class or an external class for example.
There is no possibility to access and edit them with the block inspector interface. That’s because they exist on another instance and not as an independent and standalone class.

To edit a virtual block class, you need to edit the actual block instead (also possible with the Quick Code editor).
To edit an external class, you need to tweak your custom CSS from the stylesheet/classes you imported.

So it makes sense you can’t edit them directly.
There are other use cases but they are not related to your post and I don’t want to confuse you here.

What you described is rather a case for global classes, like @StrangeTech hinted correctly.
You also can import your own classes, for instance a framework. These would be also virtual classes which you can find in the dropdown, separated from the virtual block classes. The difference here is, they are globally available.

What you try to achieve is not possible with Cwicly, as it wouldn’t make any sense.
Or can you provide more information why you would find utility classes, which are limited to a specific post/page/template(-part), a useful addition?

1 Like

I think for me it would be better to ignore the presets in global styles elements and designing with virtual classes, as that will be better solved with gobal classes. At least the global classes will be easily available and easy maintainable, specially when I come back half a year later. That would be a heck of a pain for my customers, when they take over.

Thank you both for educating me. I thought, maybe there is a better way with these features. Nope.