Add Content - Dynamic Block
Use the Dynamic Block content type to add an existing dynamic block to the Page Builder stage.
Dynamic Block toolbox
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
Add an existing dynamic block to the stage
-
Navigate to the Page Builder workspace on the target page, block, product, or category.
-
In the Page Builder panel, expand Add Content and drag a Dynamic Block placeholder to the stage.
img-md w-600 modal-image -
Hover over the empty dynamic block container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.
img-md w-600 modal-image -
On the Edit Dynamic Block page, click Select Dynamic Block and use the list to select the block.
img-md w-600 modal-image In the list, find the dynamic block that you want to insert, and click Select. Then, click Add Selected.
img-md w-600 modal-image A summary of the dynamic block information appears below.
img-md w-600 modal-image -
Set Template to one of the following:
table 0-row-2 1-row-2 2-row-2 layout-auto Option Description Dynamic Block Block Template
Adds a standalone block. Dynamic Block Inline Template
Inserts the block content into text. img-md w-200 -
Complete the Advanced settings as needed.
-
When complete, click Save to apply the settings and return to the Page Builder workspace.
Advanced Settings
-
To control the positioning of the dynamic block within the parent container, choose an Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Option Description Default
Applies the alignment default setting that is specified in the style sheet of the current theme. Left
Aligns the list along the left border of the parent container, with allowance for any padding that is specified. Center
Aligns the list in the center of the parent container, with allowance for any padding that is specified. Right
Aligns the block along the right border of the parent container, with allowance for any padding that is specified. -
Set the Border style that is applied to all four sides of the dynamic block container:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Option Description Default
Applies the default border style that is specified by the associated style sheet. None
Does not provide any visible indication of the container borders. Dotted
The container border appears as a dotted line. Dashed
The container border appears as a dashed line. Solid
The container border appears as a solid line. Double
The container border appears as a double line. Groove
The container border appears as a grooved line. Ridge
The container border appears as a ridged line. Inset
The container border appears as an inset line. Outset
The container border appears as an outset line. -
If you set a border style other than
None
, complete the border display options:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Border Color Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value. Border Width Enter the number of pixels for the border line width. Border Radius Enter the number of pixels to define the size of the radius that is used to round each corner of the border. -
(Optional) Specify the names of CSS classes from the current style sheet to apply to the container.
Separate multiple class names with a space.
-
Enter values, in pixels, for the Margins and Padding to determine the outer margins and inner padding of the dynamic block container.
Enter the corresponding values in the diagram.
table 0-row-2 1-row-2 2-row-2 layout-auto Container area Description Margins The amount of blank space that is applied to the outside edge of all sides of the container. Options: Top
/Right
/Bottom
/Left
Padding The amount of blank space that is applied to the inside edge of all sides of the container. Options: Top
/Right
/Bottom
/Left
Edit dynamic block container settings
-
Hover over the dynamic block container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.
img-md w-500 modal-image -
If needed, change the dynamic block:
-
Click Select Dynamic Block.
img-md w-20 -
In the list of active dynamic blocks, click Select for the block that you want to add.
-
-
Update the remaining settings as needed.
-
When complete, click Save to apply the settings and return to the Page Builder workspace.
Duplicate a dynamic block
-
Hover over the dynamic block container to display the toolbox and choose the Duplicate (+---------------------------+ | img-md | +===========================+ | w-20 | +---------------------------+ | | +---------------------------+) icon.
The duplicate appears just below the original.
img-md w-500 modal-image -
To move the new dynamic block to a different position, hover over its container, and then choose Move (+----------------------+ | img-md | +======================+ | w-20 | +----------------------+ | | +----------------------+) in the toolbox.
-
Select and drag the dynamic block until the red guideline appears at the new position.
The top and bottom borders of each container appear as dashed lines while the dynamic block is moved.
Remove a dynamic block from the stage
-
Hover over the dynamic block container to display the toolbox and choose the Remove (+------------------------+ | img-md | +========================+ | w-20 | +------------------------+ | | +------------------------+) icon.
-
When prompted to confirm, click OK.