Arranging Content

  • Knowledge Base
  • Responsive Website Builder
  • Arranging Content
  • Duda Support > Responsive Website Builder > Getting Started

Overview

How you arrange the content on your Website is really important. Arranging content well makes it easy for visitors to find what they're looking for, and allows you to highlight sections of your Site that might otherwise be overlooked. A well-organized page makes your Website look professional and helps increase sales by making it easy for Website visitors to find what they're looking for.

Guide

Website Builder structure

Your Website Builder is built from a header, a footer, rows and column. Every widget that you add is inserted into one of these sections.  

Rows

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

content_1_en-US.png

You can add rows to your Website by dragging in widgets. When you drag a widget between rows or into a space where you'd like there to be a row, a new row will be created when you drop the widget.

content_2_en-US.png

There are two ways of deleting rows. You can right-click anywhere on the row to open the context menu and then select Delete. Alternately, you can click the Row button at the top left corner of the row and click delete.

content_3_en-US.png

Columns

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

content_4_en-US.png

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

content_6_en-US.png

There are two ways of deleting columns. You can right-click anywhere on the column to open the context menu and then select Delete. Alternately, you can click the red X at the top right corner of the column.

content_7_en-US.png

content_8_en-US.png

Widgets

Widgets contain the text, images, buttons, and other content of your Website. To add widgets to your Site, click Widgets in the left menu, search for the widget you want, and then drag and drop it into your Site. 

content_9_en-US.png

There are a few ways of deleting widgets from your Site. You can right-click anywhere on the widget to open the context menu and then select Delete. Alternately, you can click the red X at the top right corner of the widget. 

content_10_en-US.png

content_11_en-US.png

Snap to Align

While resizing widgets within the same column, Duda will attempt to ‘Snap to Align’ them to be the exact same size. You’ll notice that as you resize, Duda will jump ahead or behind to snap to location. This should make it easier to make widgets the exact same size.

content_12_en-US.png

Example of snapping to be the same size as the widget above.

Snap to Grid

The Snap to Grid system can help you 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, depends on the specific use-case. Note that alignment is supported in the views of the three different devices (desktop, tablet, mobile).

content_13_en-US.jpg

Considerations

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.

FAQs

How do I put widgets side by side?

There are several ways of arranging widgets side by side. You can drag a widget onto your Website, add a column to the row where that widget has been placed, and then drag another widget into that column. You can also drag the two-column widget onto your Website and then drag and drop the widgets into each column. 

content_14_en-US.png

content_15_en-US.png

How do I select a column or row?

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.

content_16_en-US.png

How do I delete the last column in a row?

You don't! An empty column doesn't display on the live Site. It's just there in case you want to drop content into it. You can delete the column by deleting the row it's contained in.

Can I change the way content is displayed in the mobile view?

Yes! You can toggle the reverse column order option in the row design to change how columns are displayed on the mobile view in each row.content_17_en-US.png

Resources

 

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!