Your website template

Understanding your website template

This brief video will walk you through the various components on the homepage of your template as well as how to start adding content to your layout.

Be sure to log in to the website builder and explore the dashboard, as well as the various components of your template.

If you want more in depth information on getting started with the Duda Website Builder, take this brief course.

website builder Sstructure

The Website Builder is built from a header, footer, rows, columns and the widgets that go inside them. Every widget you add is inserted into one of these sections. 

widgets

What is a widget? Widgets are the building blocks of your website and are features you can use to customize the look and function of your website. Widgets essentially contain the text, images, buttons, and other content of your site.

Widgets often take up the full size of a column or row, making it difficult to select them. To get around this, right-click the widget in the column or row you want to select, hover over the Select Container option, and then select either Column or Row.

Some of the main widgets you'll use are the 'Button Widget',  'Text' Widget, 'Image Widget' or the 'Photo Gallery Widget.' You can also choose to add more interactive features like a 'Video Widget' or 'Map Widget' - there are a lot to explore to create custom content! 

website layout & structure

rows

Rows are the horizontal sections of your site. When you add widgets and columns to your site, they are placed within these rows.

You can add rows to your site by dragging widgets into the site. When you drag a widget between rows or into a space where you want to add a row, a new row will be created when you drop the widget.

To delete a row, right-click anywhere on the row to open the context menu, and then click Delete. Alternatively, click the Row button at the top left corner of the row and click Delete.

Tip: To change how content is displayed in the mobile view, click the reverse column order toggle in the row editor.

Every row contains at least one column. Columns contain all the widgets in your site and control their arrangement.

Every row can contain up to four columns. Whenever you add a new column, it appears alongside the existing column in that row.

Note

• While desktop and tablet views allow each row to hold up to four columns, mobile websites can only show at most two columns in a row.
• Columns added in desktop or tablet views will assume the full width of the page when switched to mobile view; to create a row with two columns in the mobile view, first switch to mobile view, then add a two-column widget.

To delete a column, right-click anywhere on the column to open the context menu, and then click Delete. Alternatively, click the red X at the top right corner of the column.

You can place widgets directly into columns, or structure the column further by adding inner rows.

inner rows

Inner rows allow extra design flexibility by enabling you to add rows inside columns. With the help of inner rows, you can vary the column layout and keep the general design of the row (for example, background, spacing, bleed).

Just like regular rows, inner rows can have their own background and spacing, be split into up to four columns, and have their column order changed on mobile. Columns in inner rows can be populated by any widget, but inner rows cannot be added to columns.

To add an inner row to a column, do one of the following:

1. Right-click the row, and click Add Inner Row. If there are multiple columns in the row, choose to which column you want to add the inner rows.
2. Right-click the column, and click Add Inner Row.
3. Right-click the inner row, and click Add Row to place an inner row below the current one.
   

snap to align

While resizing widgets within the same column, Duda attempts to Snap to Align them to be the exact same size. As you resize, Duda jumps ahead or behind to snap to location. This should make it easier to make widgets the exact same size.

snap to grid

The Snap to Grid feature helps lay widgets in the pages of your site with professional precision. This system allows you to align widgets horizontally and vertically within columns and rows. Rulers are presented when moving an element in its row or column, or when resizing the widget. The aligned elements are marked with a colored border. A widget may be aligned with more than one other widget, depending on the specific use case.