Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Content Layer
namePage Info
id278129461
classwatermark-layer
Content Column
namePage Body
width100.00001%
id278129463
Content Block
background-colortransparent
namePrompt
id494677873
classtight manual-prompt-flex

Styling content presentation through the arrangement of blocks and layers.

Content Block
nameOutcome
rich-link-hoverstrue
id1042866408
classtight manual-outcome-flex

Options in the Page Designer for sizing both margins and padding allow for fine-tuning of page designs, and customizing alignment without needing to add custom code.

Content Block
nameSteps
rich-link-hoverstrue
id494842117
classsteps-block numbered manual-steps-flex tight-bottom

Click on a block or layer in the Page Designer.

Open the Size Expander.

Add values to adjust the following fields, to fine-tune positioning of content.

Margin: The pixel values for creating space around content layers and blocks.

Padding: The pixel values for creating space within content layers and blocks.

Content Block
nameNote
rich-link-hoverstrue
id495965127
classmanual-note-flex
collapsiblecollapse
Note

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.
Content Block
nameTip
rich-link-hoverstrue
id894522670
classmanual-tip-flex
Open Links in New Window
Tip
  • Negative values can be set for margins to achieve overlapping of content. For example, if a -20px top margin is applied, that will move the element 20px towards the top of the page. A bottom margin of -20px will move content following that element 20px closer vertically.
  • Learn more about the
CSS box model.  
  • HTML Link
    new-windowtrue
    textCSS Box Model
    urlhttps://www.w3schools.com/css/css_boxmodel.asp
    .
Content Block
nameWarning
rich-link-hoverstrue
id894530759
classmanual-warning-flex
collapsiblecollapse
Warning

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
Content Block
nameInfo
rich-link-hoverstrue
id894537203
classmanual-info-flex
collapsiblecollapse
Info

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
Content Layer
background-color$lightGrayColor
nameRelated
id888168050
Content Column
nameRelated
width100%
id888168051
Content Block
rich-links-hide-descriptiontrue
rich-link-hoverstrue
rich-links-columns4
rich-links-verticaltrue
rich-links-image-height100px
rich-links-hide-site-icontrue
rich-links-details-padding10px
nameRelated
rich-links-enabletrue
border-width0
rich-links-details-alignmentleft
rich-links-margin20px 30px 0 0
id496234544
classrelated-block clean manual-related-flex
  • Replace me with a link
  • Replace me with a link
  • Aim for 4 or fewer related links.  If we need more, that's okay.  Be judicious.  Delete me when you're done.