The Heading block should be used for the main title on the first page of your story. It can also be used across other pages, but we recommend using the copy block for any text that is longer than a few words. You can find more detail about each below.<\/p>\n
Block Settings<\/h2>\n
The Block Settings are visible in the right hand side of the editor and will show up when you click on the Heading block. If the block settings aren’t visible, click the gear icon in the top right corner, or use the keyboard shortcut SHIFT + CMD + ,<\/p>\n
<\/p>\n
There are a variety of collapsible panels in the settings bar that will allow you to further customize the headings block. Expand the section(s) below to learn more about the options each panel provides.<\/p>\n
Typography<\/h3>
\nThe typography panel allows for control over multiple options: heading level, font family, font size, color, line height, letter spacing, opacity, text transform, text shadow, and hyphenation.<\/p>\n
Heading Level<\/h4>\n
Select the applicable heading level. Note that H1 should be reserved only for the title of the story, and most other pages will use an H2.<\/figcaption><\/figure><\/p>\n
Font Family<\/h4>\n
Select from a dropdown of different font families to choose. The font family will update live for you in the editor so you can preview each option. If it isn’t updating, please ensure you are using `https`.<\/figcaption><\/figure><\/p>\n
<\/p>\n
Font Size<\/h4>\n
Control the size of your heading text. The slider ranges from 10 to 200 in increments of 1. When selecting a font size, please be mindful of leaving enough room for the text to fit within the boundaries of the page. If your text is too large and spans multiple lines, we recommend using the hyphenate option.<\/figcaption><\/figure><\/p>\n
Color<\/h4>\n
Choose from BU Stories’ or your theme’s pre-defined color palette. Optionally, you can also choose your own custom colors. Just make sure to keep contrast and readability in mind\u2014it’s important that the content is accessible to all users.<\/figcaption><\/figure><\/p>\n
Line Height<\/h4>\n
Adjust the height that an individual line of text will take up. Decreasing this will bring the lines of text closer together, while increasing it will move the lines of text further apart. The slider ranges from 0 to 2 in increments of 0.5.<\/figcaption><\/figure><\/p>\n
Letter Spacing<\/h4>\n
Adjust the space between letters of text, also known as kerning. Decreasing this will bring the letters closer together, while increasing it will move the letters further apart. The slider ranges from -10 to 10 in increments of 0.25.<\/figcaption><\/figure><\/p>\n
Opacity<\/h4>\n
Adjust the opacity of the text. Decreasing this will make the letters more transparent, while increasing it will make the letters more opaque. The slider ranges from 0.2 to 1 in increments of 0.1.<\/figcaption><\/figure><\/p>\n
Text Transform<\/h4>\n
Select the desired text transform from a dropdown of options.<\/figcaption><\/figure><\/p>\n
Text Shadow<\/h4>\n
Select the desired text shadow from a dropdown of pre-defined options. Text shadows can be one method to improve visibility of text that is on top of a background image.<\/figcaption><\/figure><\/p>\n
<\/div>\n<\/div>\n\n
\n
Text Stroke<\/h3>
<\/p>\n
Text Stroke Width<\/h4>\n
Adjust the text stroke width. The slider ranges from 0 to 5 in increments of 0.5.<\/figcaption><\/figure><\/p>\n
Text Stroke Color<\/h4>\n
Choose from BU Stories’ or your theme’s pre-defined color palette. Optionally, you can also choose your own custom colors.<\/figcaption><\/figure><\/p>\n
<\/div>\n<\/div>\n\n
\n
Background<\/h3>
<\/p>\n
Background Color<\/h4>\n
Choose from BU Stories’ or your theme’s pre-defined color palette. Optionally, you can also choose your own custom colors.<\/figcaption><\/figure><\/p>\n
Opacity<\/h4>\n
Adjust the opacity of the text background color. Decreasing this will make the background more transparent, while increasing it will make the background more opaque. The slider ranges from 0.005 to 1 in increments of 0.05.<\/figcaption><\/figure><\/p>\n
Padding<\/h4>\n
Adjust the padding of the text container. The slider ranges from 0 to 25 in increments of 5.<\/figcaption><\/figure><\/p>\n
<\/p>\n
You can also adjust the padding of the heading block, even without a background color selected.<\/figcaption><\/figure><\/p>\n
<\/div>\n<\/div>\n\n
\n
Border<\/h3>
<\/p>\n
Note: the border will not display unless a border style and<\/u> a width < 0 are selected. Unless a border color is selected, the color will default to black.<\/p>\n
Border Color<\/h4>\n
Choose from BU Stories’ or your theme’s pre-defined color palette. Optionally, you can also choose your own custom colors.<\/figcaption><\/figure><\/p>\n
Border Width<\/h4>\n
Adjust the border width. The slider ranges from 0 to 5 in increments of 1. You have the ability to either control the border width by individual side or set all borders to the same width.<\/figcaption><\/figure><\/p>\n
Border Style<\/h4>\n
Select the desired border style from a dropdown of pre-defined options.<\/figcaption><\/figure><\/p>\n
<\/div>\n<\/div>\n\n
\n
Margins<\/h3>
<\/p>\n
Control all 4 margins (top, right, bottom, left) with individual sliders, ranging from -100 to 100 with an increment of 1. Alternatively, check off `Set all to same value` if you would like to adjust all margins at the same time.<\/figcaption><\/figure><\/p>\n
<\/div>\n<\/div>\n\n
\n
Adjustments<\/h3>
<\/p>\n
Adjust the rotation of the heading block with a full range of 360 degrees.<\/figcaption><\/figure><\/p>\n
<\/div>\n<\/div>\n\n
\n
Animation<\/h3>
<\/p>\n
Select an optional text animation from a dropdown of options.<\/figcaption><\/figure><\/p>\n
<\/div>\n<\/div>\n\n
\n
<\/h2>\n
Text Panel Settings<\/h2>\n
The Text Panel Settings are visible directly above the selected block in the editor. There are a variety of options that allow you to further customize the headings block.<\/p>\n
<\/p>\n
Alignment<\/h3>\nChange the text alignment.<\/figcaption><\/figure>\n
<\/h3>\n
Bold and Italic formatting<\/h3>\nMake text appear bold and\/or italic.<\/figcaption><\/figure>\n
<\/h3>\n
Highlight Text<\/h3>\nClick the small arrow next to italic icon and you’ll see an additional dropdown. Select highlight text and choose a color for the highlight. If you want only a specific word or phrase highlighted, simply highlight the desired text and then apply the highlight color to it.<\/figcaption><\/figure>\n
<\/p>\n
Text Color<\/h3>\nClick the small arrow next to italic icon and you’ll see an additional dropdown. Select text color and choose a color for the highlight. If you want only a specific word or phrase highlighted, simply highlight the desired text and then apply the highlight color to it.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
The Heading block should be used for the main title on the first page of your story. It can also be used across other pages, but we recommend using the copy block for any text that is longer than a few words. You can find more detail about each below. Block Settings The Block Settings […]<\/p>\n","protected":false},"author":3324,"featured_media":0,"parent":13,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/15"}],"collection":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/users\/3324"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":46,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/15\/revisions\/301"}],"up":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/13"}],"wp:attachment":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"\/bu-stories\/files\/2022\/01\/Screen-Shot-2022-01-28-at-12.16.19-PM-419x636.png\")
<\/p>\n![\"\"](\"\/bu-stories\/files\/2022\/08\/headinglevel.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/fontfamily.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/fontsize.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/fontcolor.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/lineheight.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/letterspacing.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/opacity.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/texttransform.gif\"){kind=spacer}
![\"\"](\"\/bu-stories\/files\/2022\/08\/textshadow.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/textstroke.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/textstrokecolor.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/backgroundcolor.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/backgroundopacity.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/backgroundpadding.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/padding.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/bordercolor.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/borderwidth.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/borderstyle.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/margins.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/rotation.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/headinganimation.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/01\/Screen-Shot-2022-01-28-at-12.13.36-PM.png\")
<\/p>\n![\"\"](\"\/bu-stories\/files\/2022\/08\/headingalign.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/headingformat.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/headinghighlight.gif\")
![\"\"](\"\/bu-stories\/files\/2022\/08\/headingtextcolor.gif\")