Before we begin - Section vs Structure:
Let’s take a minute to define these two Terms.
A section is a like a horizontal “brick.” You can have as many sections stacked one on top of another on a page as you like. Sections are divided into structures, separated into columns. These structures are what hold your Islands. You can have as many Islands stacked one on top of another in a structure as you like, but as you will see : Island Height determines Structure Height, and Structure Height determines Section Height!
Once you have added Islands to a Structure, you can then rearrange them on the page by left clicking and holding the Island and dragging the Island to the structure where you want it. You can add multiple Islands above or below other Islands. You can move Islands around in this structure, or even move Islands between Sections.
Adding More Sections
Clicking the Plus Sign will open another window below, asking you to Select Your Structure. This is the same as when you selected your first Structure. Your new Section will appear below. If you have more than one section, you can left-click-and-hold the six dots icon, then drag that whole section up or down (even if it already contains content!) to move it where you like!
Managing the Look of your Sections
From the Background Color section (1), you can use the radio buttons to choose a color for your Section and change the opacity of the color. If your Portal Administrator has set ‘default’ colors for your Portal Islands, you’ll see those here for you to easily pick from. You can also pick a Custom Color.
Under Column, the dropdown (2) allows you to adjust the position of any shorter content to “float” in the middle, or be aligned to top or bottom.
Padding (3) lets you change the amount of padding overall at the top, right, bottom, and left sides of your section. Default is 5px.
The Column Gap is also at a default of 5px. If you’d like it to be larger or smaller, you can adjust that here!
Clicking Save (5) will Save any changes that you’ve made and close the Section Properties Panel.
In the simple example above, I started with a section of four equal structures. I placed an Image island on the left and right sides, and two button Islands in the middle. The Image Islands are both set to “Content Height.” The Button Islands are set to 150px tall each.
Using Background Color, I add a light Pink to the whole section (and made it about half opacity.)
Using the Position drop down, I chose to have my content in the middle. Since my buttons are “shorter” than my Heart images, this causes them to float in the center of their Structures.
In the Padding Section, I made the Left and Right sides of my Section Padded to 50 px. You can see how the hearts are now pulled away a bit from the sides of the page.
And finally, I increased the Column Gap to 50 px as well, causing the three columns between the Islands to widen to match my sides. Note that the extra padding and wider column gaps means that my 1st button now takes up two lines of text (as it “shuffled” down) and my hearts themselves scaled to be smaller in appearance.