Placing Brics That Add Page Features
Math Renderer, Code Highlighter, and Language Switcher add features to your pages. This guide explains how to group these Brics in a dedicated Bloc and remove that Bloc's padding. The example starts with Math Renderer, then adds Code Highlighter to the same Bloc. The text containing your equations or code belongs in a separate content Bloc.
The screenshots use the English UI of Blocs 6 for Mac. Outlines in the images identify the controls to use. Click an image to open a larger version. Install the Brics you want to use before starting.
Choose the scope
First, decide whether the Bric should apply only to the current page or to every page on your site.
| Scope | Where to place the Bloc | Example ID for organization |
|---|---|---|
| Current page only | The central Dynamic Area (the regular page content area) | extension |
| Shared across all pages | The top or bottom Global Area | global-extension |
Language Switcher is used across a site, so a Global Area is the usual choice. For Math Renderer and Code Highlighter, choose a location based on which pages need them. Group multiple Brics with the same scope in a single dedicated Bloc.
The IDs extension and global-extension make the Bloc easier to find. Assigning one of these names does not change its scope. Placing the Bloc in a Global Area is what makes it shared across pages. A page is excluded from that shared area if the area is disabled in its page settings. See the official Blocs explanation of Global Areas for more information.
1. Create a dedicated Bloc
For the current page only
Click the “+” in the regular page content area. If the page already has Blocs, use the “+” before or after an existing Bloc. On an empty site, use the “+” in the center of the canvas to add your first Bloc.
Figure 1: Add a page-specific Bloc using the “+” in the white content area inside the blue boundary lines.
For all pages
Click the “+” in a Global Area outside the blue boundary lines. The image shows the bottom Global Area. The message “Content below this line will show on every page.” confirms that content below the line is shared across all pages. After choosing the area, follow the same steps as for the regular page content area.
Figure 2: Check the boundary message, then use the “+” in the bottom Global Area to add a Bloc shared across all pages.
Choose a one-column structure
When the Bloc library opens, choose “Structure 1 Column.” This is a basic Bloc with a single Column for your Brics.
Figure 3: Choose “Structure 1 Column” to create a place to group the Brics.
Select the new Bloc and enter extension in the ID field on the right. If you placed it in a Global Area, use global-extension instead. The following screenshots use the page-specific extension Bloc.
2. Set Padding to None at XS
Set Padding to None so the Bloc containing your feature Brics does not create unwanted vertical space on the published page. The editing labels for Math Renderer and Code Highlighter are removed during export, but their parent Bloc's padding remains. For example, 100px of padding at both the top and bottom creates 200px of blank space even when there is no visible content.
Switch to XS
With the dedicated Bloc selected, press ⌘4. The indicator at the top changes to “XS.”
XS is the breakpoint for the smallest screen widths. In a newly created Bloc, padding set at XS is inherited by the larger breakpoints. Setting it at XS first, then returning to the desktop view, removes the padding at every screen width.
Figure 4: After pressing ⌘4 to switch to XS, Padding is still set to “Large - 100px.”
Change the padding
Open the Padding menu in the right settings panel and choose “None.” Change the padding of the dedicated Bloc, rather than the Bric or Column. If it is difficult to select, choose the parent Bloc in the layer tree on the left.
Figure 5: Set the dedicated Bloc's Padding to “None.”
The space above and below the Column disappears. The large gray area is a temporary placeholder for editing an empty Column. You will place your Brics here later.
Figure 6: Setting Padding to None at XS removes the space above and below the Column.
Return to the desktop view
Press ⌘1 to return to “LG.” Check that Padding is still set to “None.” In the setup used for these screenshots, None was also confirmed at MD and SM.
Figure 7: After pressing ⌘1 to return to LG, Padding is still set to None in the desktop view.
If you are reusing a Bloc whose padding has already been changed individually at other screen widths, check that it is set to None at every breakpoint. You can also refer to the official Blocs explanation of Bloc Padding.
3. Place the first Bric
Select the Column inside the dedicated Bloc, then click the Add Bric “+” in its center. This small button has a Bric icon and is separate from the large “+” used to add a Bloc.
Figure 8: Click the Add Bric button in the center of the empty Column.
Choose “Math Renderer” in the Bric library. If you cannot find it, enter its name in the search field.
Figure 9: Choose “Math Renderer” to place it in the dedicated Bloc's Column.
4. Add another Bric to the same Bloc
Select Math Renderer, then click the Add Bric “+” below it. Add the next Bric to the same Column without creating a new Bloc.
Figure 10: Use the Add Bric button below Math Renderer to continue adding to the same Bloc.
Choose “Code Highlighter” in the Bric library.
Figure 11: Choose “Code Highlighter.”
Placement is complete when the layer tree on the left shows Math Renderer and Code Highlighter in the same Column of the same Bloc. The process is the same if you created the dedicated Bloc in a Global Area.
Figure 12: Math Renderer and Code Highlighter are grouped in the same Column.
5. Put your content in a separate Bloc
Place the Paragraph containing your equations or code in a content Bloc separate from the dedicated extension Bloc. In this example, a content Bloc is created above extension, with a Paragraph inside its Column.
Figure 13: The upper Bloc contains a Paragraph for page content. The lower Bloc groups Math Renderer and Code Highlighter. The Paragraph currently contains placeholder text.
Enter your equations or code in the content Paragraph, then preview the page following the instructions for each Bric. The blue “Math Renderer” and “Code Highlighter” labels on the editing canvas help you manage their placement. They are not where you enter the equations or code to display.
Language Switcher follows the same process for placement in a dedicated Bloc. To use it across your site, place it in a Global Area, then configure its language settings and the content it switches.
For input examples and settings, see Math Renderer and Code Highlighter. Place Gallery Pro where the photos should appear and Navbar Pro as a header; this dedicated extension Bloc procedure does not apply to them.