{"id":3238,"date":"2024-08-21T15:13:17","date_gmt":"2024-08-21T19:13:17","guid":{"rendered":"https:\/\/sites.georgetown.edu\/1789-documentation\/?page_id=3238"},"modified":"2024-09-06T09:35:47","modified_gmt":"2024-09-06T13:35:47","slug":"how-to-full-width-overlay","status":"publish","type":"page","link":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/design-and-layout\/full-width-overlay\/how-to-full-width-overlay\/","title":{"rendered":"How To: Full-Width Overlay"},"content":{"rendered":"\n

Adding the Block<\/h2>\n\n\n\n

To add the Full-Width Overlay Block, click the \u201c+\u201d symbol and search for \u201cFull-Width Overlay\u201d. Then, select the Full-Width Overlay block icon.<\/p>\n\n\n

\n
\"Full-width<\/figure>\n<\/div>\n\n\n

Editing the Block<\/h2>\n\n\n\n

To edit the block, add an image in the content editor, or select a background color in the Inspector Panel and then add overlayed text.<\/p>\n\n\n\n

Additional Settings<\/h2>\n\n\n\n

There are several settings to choose from.<\/p>\n\n\n\n

First, can select the size: Default (taller) or Compact (shorter).<\/p>\n\n\n

\n
\"Full-width<\/figure>\n<\/div>\n\n
\n
\"Full-width<\/figure>\n<\/div>\n\n\n

Next, you can select a background color or add an image.<\/p>\n\n\n

\n
\"Full-width<\/figure>\n<\/div>\n\n
\n
\"Full-width<\/figure>\n<\/div>\n\n\n

If you chose an image, you can select the focal point of the image in the Inspector Panel by dragging the circle on the image preview around.<\/p>\n\n\n

\n
\"Full-width<\/figure>\n<\/div>\n\n