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, your design will be automatically divided into sections (relative positioning to each other. read more), based on your design's layout and it's elements.
What does a section look like in RapidUI?
A section will be marked in a pink frame, with the circle allowing you to enlarge or reduce the section's site to add or remove space.
Editing elements of a section
If you wish to move an element to a different section:
- Mark the element you wish to move
- Cut the element - either by right-clicking and pressing "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 pressing "paste", or by pressing ctrl+v/command+v
Use sections to create responsive sites
When applying changes in different breakpoints (a full responsive guide can be found here), you can manually adjust and resize your different sections in order to make your site look great in every resolution.
Working in sections makes adapting to different screen resolutions much easier - you can now change the size and locations of each section to match your desired screen size.