Managing your Section

In Part One, we learned how to fire up a Structures page and choose your first Section. In Part Three, we will learn about how to add more Sections.

For now, we are going to learn how to manage the look of our Sections.  At the bottom of your section, there is a toolbar. If you only have one section, it's small, with only three icons: a plus sign, a slider, and an eraser. Hovering over any of these will you give you a tooltip, reminding you what they do.

(If you have more than one section, the toolbar is a little larger with five icons. We cover that in the next Guide.)

The first one, the plus sign, adds a new Section. We cover that in the next Guide.

The last one, the eraser, clears the contents of the entire section, and removes all islands. (You probably do not want to do that!)

The middle one, the slider, is what we are learning here.  When you click it, the Section Properties Panel will open on the right. Let's go through that now.

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 (4) is also at a default of 5px. This is the space between the structures. 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.

The walkthrough below will show you how I went from this:

To this:

• Using Background Color, I added a light Pink to the whole section (and made it about half opacity.)

• Using the Column drop down, I choose to have my content in the middle. Since my buttons are “shorter” than my Heart images, this caused 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. That's how the hearts are now pulled away a bit from the sides of the page.

• 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 1^st button now takes up two lines of text (as it “shuffled” down) and this also made my hearts themselves overall smaller in appearance as they scaled down.

You have completed this Guide!

From here, you should next learn how to add more Sections and move them around.

Or, you can learn how to to Manage Islands, or get a refresher on the basics.