Using the Design Panel

Design panel provides you with visual tools to style your page content. You can design for different screen sizes, which creates the required styles and media queries for the selected device.

Adding Custom CSS Styles File

The design panel requires you to add a custom CSS file, where the styles are being written and saved. This can easily be done, by selecting your custom CSS file in the Project Settings.

Select the project settings icon, at the bottom left part of Wappler window:

There are two options for the custom CSS Style File - create new or select an existing one. We have already created one, so we select to include an existing CSS Style File:

Browse to it, select it and click Open:

Then click the Save button. The custom CSS Styles file is now selected for your project and all the styles made in the Design Panel will be saved there:

Now let’s include it on our page. Open the Design Panel:

And click the Attach Style File button. This will include the custom CSS Styles File to the page you are working on. You can attach this Styles File to any page, where you need it:

Creating a Custom Class and Styling Content

In order to style an element on your page, first you need to create a CSS Class. That’s really easy in Design Panel. Select the element which you want to style:

Click inside the Class Selector input:

Here you need to add your Custom CSS Class Name. We enter product-title and then we click the option saying - Create product-title. This will create the Custom CSS Class in your Stle File and will assign it to the selected element:

You can see the CSS Class applied to the selected element:

You can add some styling to your element, it will be added to the Custom CSS Class which we created and saved in your Styles File. We add some padding bottom:

Then we change the text color:

The changes are visible immediately in Design View! You can style the selected element as you need it.

Reusing CSS Classes

You can easily reuse any of the CSS Classes created in your Styles File. In order to apply an existing CSS Class, just select the element you want to apply it to:

Click inside the Class Selector input:

Then start typing the CSS Class name. You will see a list of CSS Classes that match what you are typing. Simply click the class which you need to uss, under Existing Class:

You can see the class has been successfully added to the element you selected:

Removing CSS Class From Elements

Removing CSS Classes applied to your elements is a matter of two clicks. Select the element, then click in the Class Selector input, after the applied Class:

Hit the backspace button and you are done, the class has been removed:

Styling Element States (Pseudo Classes)

You can style an element state, such as active, hovered, focused or visited. First select the element which you want to style, in our case that’s our title with a CSS Class of product-title, then select a state. We select hovered:

Style the element as you need it to look for the selected state. In our case, we want to change its color to pink, when hovered:

You can see the results in Design View:


If you are curious, the code which is created by Design Panel can be found in the Custom CSS Styles File:


Responsive Styling

With the Design Panel you can apply different styles to your elements, depending on device sizes/media queries.
By Default, for Bootstrap 4 based pages, the styles are applied for the selected devices size and up. You can select the device size in the top center part of the Wappler window:

Working in Full View (last icon) applies styles to all the devices sizes. We want to change the font size of our product-title for Tablets and bigger devices. So we select Tablet size:

Then we set the new size:

And we are done. For smaller screens the default size will be used:

This applies to all the properties you are customizing!

That’s how easy it is to use the Design Panel in Wappler.