Using CSS in Editor

Version 11.1.1 and higher

New to version 11.1.1 is the ability to add CSS to widgets in Editor. This unlocks the power to add a large amount of customizations and cool features to your widgets. This article explains how to add CSS, and shows you a couple of examples of what can be done.
 
Once you drop your widget on the page in Editor, select 'Format' tab > 'Style', and scroll to the bottom of the panel. In the 'Advanced' section, this is where you can manually add your CSS, or copy/paste from an outside source.

There is also a 'Fancy CSS' widget available in Basic Widgets 2.6 & higher.

In the above pre-built widget, you'll see the CSS elements and how that affects the styling of the widget.

CSS Examples

The following are just a few ideas for what you can do with CSS. Feel free to try simple or advanced CSS in your project. You can apply the CSS to widgets or containers. Learn more about CSS here.

  • Add a border to your widget
  • Make a widget as large as your page in Editor at all times
  • Add a drop shadow on your text widget

You can also combine the use of HTML to even get more flexible and dynamic with your projects.

If you're not familiar with CSS, don't worry. There are lots of resources out there that will generate it for you:

Here's a short video to show you the basics of adding CSS to your prototypes in Editor.

Related Articles

Using HTML in Editor

Did this answer your question?