Design Editor

Duda offers standard design input options from our editor to any custom widget. Duda takes care of all the CSS styles/properties while relying on you to write the markup and selectors that will get assigned to a specific input option.

When outputting markup, Duda will wrap each element in a <div> wrapper with a specific class widget-8charvar. When Duda adds a widget to a website, we assign that widget a unique ID value and matching CSS class. This ID and CSS class make sure that any style settings you apply to the widget only affect that widget.

.u_1234567890{
     style-property:value;
}

When adding a design input, Duda asks you for a CSS selector.

The above custom selector will produce the follow css rule when a user selected both a text color and font size.

.u_1234567890 .text {
     text-color:#474747!important;
     font-size:16px !important;
}

🚧

CSS pseudo-classes are not currently supported in the widget builder as a custom selector

General Inputs

The Design Editor has many inputs that are available in the Content Editor. Each of these inputs are listed below with a link to the documentation found under the Content Editor.

Background

Background gives the user the option to set the background color or background image.

Border

Give the user direct access to the border color and sizing of an element.

Button

Button should be matched up to the custom_button handlebars helper. This gives the user full design control over the button, such as background color, text color, sizing, hover options, etc..

Color Picker

The most basic color input. This input type allows you to set both the CSS property (such as border-color, color, etc..) and will allow the user to select the color value. This color picker can output as widget styled CSS or as a variable into Handlebars/Javascript (in Hex format).

CSS Slider

Allows a user to select a size or any numerical input as a slider. You can set multiple CSS properties (such as padding, margin, height, border-radius, etc..). You can have Duda output an absolute pixel value or a percentage. An optional maximum or minimum value can be set.

Dimensions

Control the width and height of an element. Note that width and height apply to desktop/tablet and mobile differently.

Image Design

Control design properties of an image like (dimensions, layout, border, rounded corners, shadow, etc...)

Layout Selector

The layout selector allows for multiple design options for a custom widget.

The example above has a variable name of selected_layout. This variable is made available automatically in the HTML via handlebars (ex. {{selected_layout}}). The above example has 3 different layout options the user can choose from: layout_1, layout_2 and layout_3.

In the widget’s HTML file different HTML markup will be displayed on the screen based on the selected layout. Here is an example of how to do this.

{{#equals selected_layout "layout_2"}}
    <div class="mywidget layout_2"></div>
{{else}} {{#equals selected_layout "layout_3"}}
    <div class="mywidget layout_3"></div>
{{else}}
    <div class="mywidget layout_1"></div>
{{/equals}}{{/equals}}

📘

A default layout setting can’t be set in the widget builder. The logic above uses the else clause for the first layout option, layout_1. When widgets are first dragged to a page they are always assigned the first layout option.

In the Duda editor the widget will display each layout selection as shown below. The images
displayed for each option can be set in the widget builder. Please use an SVG for the best
experience in the editor. The example below uses the same SVG image for each layout. More
than likely your widget will use different images for each.

Rounded Corners

Allows a user to control the rounded corners for a given element. You can have Duda output an absolute pixel value or a percentage. An optional maximum or minimum value can be set.

Text Style

Give full text style control over text. Allows users to change the font, text color, font weight, alignment, and more

Element Resizing

Duda allows you to control in which ways the user can resize a widget. By default, users can use a blue drag handle to give elements an absolute width and height. If your widget is dynamic in anyway, such as expanding / collapsing, then this can be problematic. At the bottom of the design inputs, you can find an option to control which options a user will have.

OptionDescription
Height and widthAllow the user to define the height and width of the element. This is generally for more basic elements
Only widthAllow users to only set the width of the widget. If your widget changes in height dynamically, you'll want to use this. For example, if you are using the FAQ widget, you want to allow users to control the width, but not the height, as the height can change based on the open item, number of items, etc...
NoneDo not allow the user to resize the widget at all

Updated about a year ago


Design Editor


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.