Arranging elements is an important skill when using the DudaOne editor. This guide briefly describes how DudaOne's content is arranged and how to use DudaOne's rows and columns to ensure your site looks the way you want it to.
How is a DudaOne site organized?
DudaOne sites are organized into rows, columns, and elements. Each row defines a horizontal section of your site, each column a vertical section within that row, and each element a content section within that column.
Rows are horizontal areas of your DudaOne site in which columns and elements exist. They look like this:
Rows can be created by dragging elements into the editor where you'd like the row to be and letting go once the Drop Here dialog stretches all the way across the site.
Rows can be deleted by clicking the row bar and choosing the delete option.
Each row must contain at least one column. Columns hold all the elements in your site and are the primary building block in how your elements are arranged.
You can create up to four columns. Each new column you create will be created side by side to any other existing column.
Elements are features of your DudaOne site that contain content, like paragraphs or buttons.
Elements can be created by dragging and dropping them from the sidebar into your site.
Elements can be deleted by pressing the red X that appears when they're hovered over.
What happens to rows on my smartphone?
When viewing your site on a smartphone, there may be too much content in a row to display horizontally. DudaOne automatically floats the columns in a row down in these cases, adapting content that displays in rows on desktop devices to display in columns on mobile devices.
Using our previous examples, the "Cooking Class", "Recipes", and "Eat Healthy" columns below are all in the same row:
When viewed on a smartphone, they automatically display beneath each other instead of beside each other:
How do I put elements side by side?
To place any elements or content side by side, simply create a new column for that content to be contained in. This will place two columns side by side, which you can then put two pieces of content in.
Selecting the container
You can select the container of any element (column OR row) by clicking that element, then clicking "select container". See below.
How do I delete the only column?
You don't! An empty column doesn't display on the live site, it's just there in case you want to drop content in it. You can delete the column if you want to by deleting the row it's contained in.