A section ( <section> ) element is defined as a block of related elements. It gathers different elements within it, helping divide the website layout (vertically) into clean different parts.
When uploading your design, RapidUI automatically divides it into sections, based on your design layout and its elements.
What does a section look like in RapidUI?
A section will be marked in a pink frame (as shown above), with the central rectangle allowing you to enlarge or reduce the section's site to add or remove space. The up and down arrows allow you to move an entire section up or down (if you move a section down the section below it will replace it above it - hence reorganizing the order of your sections). The plus sign icon allows you to add a new section, clicking this icon will create a new section in the space right below the section you were currently in, as well as add this new section to your layers panel and HTML hierarchy.
Editing elements of a section
Moving an element from one section to another is super easy and intuitive - all you have to do is select the element and then drag n’ drop it to any territory in any section you want! RapidUI takes care of all the code for you and will automatically make that element a child of that section.
Another way to move elements is with cut & paste:
- Mark the element you wish to move
- Cut the element - either by right-clicking and selecting "cut", or by pressing ctrl+x/command+x
- Mark the desired section you wish to move the element to
- Paste the element - either by right-clicking and selecting"paste", or by pressing ctrl+v/command+v
Use sections to create responsive sites
Working in sections makes adapting to different screen resolutions much easier - you can now change the size and locations of elements in each section to match your desired screen size.