• 1
    To start, add a three-column layout to the tab.
  • 2
    Select the bottom area of one of the Placeholders. We're don't want to add content yet so avoid the icons and the "Click to enter text".
  • 3
    In the Selection Control Bar above the Stage, select the Size icon.
  • 4
    On the Size panel are four sizing bars, one for each breakpoint range. The bars are measured in 12ths (in other words, each bar has 12 segments). You can see the Placeholder is set to be 4/12s wide for the three widest breakpoint ranges. Each of the three Placeholders you've added has this same setting - they are each taking up 4/12ths of the available width, so altogether they are 12/12ths wide. We can adjust the settings on the Size panel to customize the layout on this tab so it has four columns instead of just three.
  • 5
    To start, we'll add one more Placeholder. Select the + option below the three placeholders.
  • 6
    Select the one-column layout.
  • 7
    The new Placeholder is added to the Tab. Select the bottom area of the first Placeholder
  • 8
    In the Selection Control Bar, select Size.
  • 9
    You can select the drag handle on the top sizing bar and drag it one segment to the left to adjust the Placeholder's size from 4/12ths to 3/12ths. The sizing bars for next two breakpoints will adjust as well. The element will change its width on the Stage and the other two placeholders will move over to the left. For this exercise, simply click on the drag handle to go to the next step.
  • 10
    Select the second Placeholder.
  • 11
    Select Size.
  • 12
    Adjust the setting on the top sizing bar to to be 3/12ths. For this exercise, simply click on the drag handle to go to the next step.
  • 13
    Select the third Placeholder.
  • 14
    Select Size.
  • 15
    Adjust the setting on the top sizing bar to to be 3/12ths. For this exercise, simply click on the drag handle to go to the next step.
  • 16
    Select the remaining Placeholder.
  • 17
    Select Size.
  • 18
    This Placeholder is set to be 12/12ths, or full width. Adjust the setting on the top sizing bar to to be 3/12ths. For this exercise, simply click on the drag handle to go to the next step.
  • 19
    Once the Placeholder is set to 3/12ths, it will pop up into the available space beside the three original Placeholders. You now have a four-column layout on this tab.
 0    0

Questions  ( 0 )