Page Builder Walkthrough part 2: blocks
The following exercise illustrates the difference between simple blocks and dynamic blocks, and how to use Page Builder to create each type of block.
This exercise assumes that you have completed Part 1: Simple Page, including the prerequisites and downloaded sample files. Follow the parts of this walkthrough exercise in order.
Part 1: Create a simple block
In this walkthrough exercise, you create a simple block with content from Google Maps. Simple blocks are sometimes called CMS blocks or static blocks, because the content does not change. A simple block is ideal for content that you might want to reuse.
Step 1: Create a block
-
On the Admin sidebar, go to Content > Elements > Blocks.
-
In the upper-right corner, click Add New Block.
-
For Block Title, enter
Google Map
. -
For Identifier, enter
google-map
. -
Choose the Store View where the block is to be available.
img-md w-600 modal-image -
In the upper-right corner, click Save.
Step 2: Add a Google Map
-
Scroll down to the Page Builder content preview (currently empty) and click Edit with Page Builder.
-
In the Page Builder panel, expand Media and drag a Map placeholder to the stage.
img-md w-600 modal-image A map to your store location appears if Google Maps is configured for your store.
img-md w-600 modal-image A placeholder map appears if Google Maps isn’t yet configured for your store.
img-md w-600 modal-image -
In the upper-right corner of the stage, click the Close Full Screen ( ) icon.
Clicking this icon returns you to the Content section for the block with the preview displayed.
-
In the upper-right corner, click the Save arrow and choose Save & Close.
Step 3: Configure Google Maps
If Google Maps is already configured for your store, you can skip this step and proceed to the next.
-
Go to the Google Cloud Platform Console.
-
Click the project drop-down and select or create the project for which you want to add an API key.
-
To configure your API credentials, follow the instructions in the Google Maps documentation.
-
Copy your API Key to the clipboard.
-
Return to the Commerce Admin and go to Stores > Settings > Configuration.
-
In the left panel under General, choose Content Management.
-
Expand Advanced Content Tools.
img-md w-600 modal-image For more information about the Content Management Advanced Tools configuration options, see the Configuration Reference Guide.
-
For Google Maps API Key, paste the key you copied.
-
Click Test Key.
If there is a problem with your key, return to the Google Maps Platform site to resolve the problem. Then, try again.
-
After your key is verified, click Save Config.
Step 4: Add the block to a page
-
On the Admin sidebar, go to Content > Elements > Pages.
-
In the grid, find the Simple Page that you created in the first tutorial and select Edit in the Action column.
-
Expand the Content section and click Edit with Page Builder or inside the content preview area.
-
In the Page Builder panel under Layout, drag a Row placeholder to the top of the stage.
img-md w-600 modal-image -
In the Page Builder panel, expand Add Content and drag a Block placeholder to the new row.
-
Hover over the empty block container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+ ) icon.
img-md w-600 modal-image -
On the Edit Block page, click Select Block.
img-md w-600 modal-image -
In the search box, enter
map
and press the Enter/Return key to find the block that you created.img-md w-600 modal-image -
In the grid, click Select to choose the Google Maps block.
-
In the upper-right corner, click Save to save the settings and return to the Page Builder workspace.
-
In the upper-right corner of the stage, click the Close Full Screen ( ) icon.
Clicking this icon returns you to the Content section for the page with the preview displayed.
-
In the upper-right corner, click the Save arrow and choose Save & Close.
Congratulations! You have completed the first part of the Block exercise. Make sure to keep your work for reference.
Part 2: Create a dynamic block
A dynamic block includes logic that determines where, when, and to whom it appears. In this walkthrough exercise, you create a dynamic block for a promotion that is triggered when price rule conditions are met, and that appears only to a specific customer segment. The result of this example is similar to the banner that was created in the first exercise, but with logic that controls when it appears in the storefront.
Step 1: Create a new dynamic block
-
On the Admin sidebar, go to Content > Elements > Dynamic Blocks.
img-md w-700 modal-image -
In the upper-right corner, click Add Dynamic Block.
img-md w-600 modal-image -
Complete the basic settings for the new dynamic block:
-
Set Enable Dynamic Block to
Yes
. -
For Dynamic Block Name, enter
Tee Shirt Promo
. -
Set Dynamic Block Type to
Content Area
and click Done.The Dynamic Block Type determines where in the page layout that the block is placed. When setting up a dynamic block for your store, consider both the page layout and the theme, so you can put the available space to good use. Some stores have an active content area that is limited to a fixed width, while others extend the full width of the screen.
img-md w-600 modal-image -
For Customer Segment, select the checkbox of each segment that you want to apply to the dynamic block and click Done to save the list of segments.
For the following example, there are two customer segments that identify registered customers by gender. This dynamic block appears only to registered female customers who are logged in to their accounts while they shop in your store.
img-md w-600 modal-image
-
Step 2: Complete the settings
Scroll down to the Content section, which displays an empty Page Builder content preview, and click Edit with Page Builder. Then, complete the following tasks:
Task 1: Add a background image
-
Hover over the row container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+ ) icon.
-
Under Appearance, choose Full Bleed.
-
For Minimum Height, enter
400px
. -
Scroll to the Background section and set the Background Image by clicking Select from Gallery and choosing the
wide-banner-background.png
image uploaded in the first tutorial. -
In the upper-right corner, click Save to apply the settings and return to the Page Builder workspace.
img-md w-600 modal-image
Task 2: Add columns
In the Page Builder panel under Layout, drag a Column placeholder onto the row.
The row is now divided into two columns of equal width.
Task 3: Add text
-
In the Page Builder panel, expand Elements and drag a Text placeholder to the second column.
img-md w-600 modal-image -
Enter the following three lines of text into the editor:
Even more ways to mix and match.
Buy 3 Luma tees and get a 4th free.
Shop Tees >
img-md w-600 modal-image -
Select all three lines of text and use the toolbar to set the Line Height to
40px
.img-md w-600 modal-image -
Set the Font Size for each line as follows:
table 0-row-2 1-row-2 2-row-2 3-row-2 Line Font size Line 1: 28px
Line 2: 24px
Line 3: 18px
Because this block could be placed anywhere on the page, use the default paragraph style, rather than heading levels. Also, don’t worry that the text does not yet wrap correctly in the column.
img-md w-600 modal-image
Task 4: Add a Link
In the first exercise, you learned how to use the Button content type to create a link. This example shows how to insert a link from the editor toolbar.
-
In another browser tab, open the storefront and navigate to the page that is to be the target destination for the link.
You can use the fully qualified URL or a relative URL that omits the reference to your store domain.
-
Full URL
https://mystore.com/women/tops-women/tees-women.html
-
Relative URL
../women/tops-women/tees-women.html
-
-
Return to the Page Builder workspace tab and text editor, select the
Shop Tees >
text in the third line, and choose Bold ( ) in the editor toolbar. -
With the
Shop Tees >
text in the third line still selected, choose Insert/edit link ( ) in the editor toolbar.img-md w-600 modal-image -
For URL, enter the relative link that you prepared.
-
Set Target to
None
.This setting opens the page in the same browser window, rather than opening a new tab.
-
For Title, enter
Shop Tees
.The Title link attribute is used by some browsers as a tooltip.
-
To save the link and return to the Page Builder workspace, click OK.
img-md w-600 modal-image -
In the upper-right corner of the stage, click the Close Full Screen ( ) icon.
Clicking this icon returns you to the Content section for the dynamic block with the preview displayed.
-
In the upper-right corner, click Save.
Step 3: Add a price rule
-
Open the Tee Shirt Promo dynamic block in edit mode again.
-
Expand the Related Promotions section and click Add Cart Price Rules.
img-md w-600 modal-image -
On the Add Related Cart Price Rules page, select the checkbox for the Buy 3 tee shirts and get the 4th free price rule and click Add Selected.
img-md w-600 modal-image The price rule appears in the Related Promotions section, under Related Cart Price Rule. You can associate multiple price rules with a dynamic block. However, this simple example uses just one.
img-md w-600 modal-image -
In the upper-right corner, click Save.
Step 4: Add the dynamic block to a page
-
In the Admin sidebar, go to Content > Elements > Pages
-
Find the Simple Page that you created in the first walkthrough exercise and open it in edit mode.
-
Expand the Content section and click Edit with Page Builder.
-
Hover over the top row with the same image as the dynamic block to display the toolbox and the Remove (+-------------------------+ | img-md | +=========================+ | w-20 | +-------------------------+ | | +-------------------------+) icon.
To confirm removal of the row from the page, click OK .
-
In the Page Builder panel under Layout, drag a new Row placeholder to the top of the stage.
-
In the Page Builder panel, expand Add Content and drag a Dynamic Block placeholder to the new row.
img-md w-600 modal-image -
Hover over the 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.
img-md w-600 modal-image -
Find the Tee Shirt Promo dynamic block that you created and click Select.
A summary of the dynamic block information appears below.
img-md w-600 modal-image -
Accept the default Template,
Dynamic Block Block Template
. -
When complete, click Save to save the settings and return to the Page Builder workspace.
img-md w-600 modal-image -
In the upper-right corner of the stage, click the Close Full Screen ( ) icon.
Clicking this icon returns you to the Content section for the page with the preview displayed.
-
In the upper-right corner, click the Save arrow and choose Save & Close.
You have completed the second part of the Block exercise. Make sure to keep your work for reference.
Part 3: Update the dynamic block
In this final part of the exercise, you edit a dynamic block while the page is live in your store. Then, log in to the store as a member of the customer segment to make the block appear.
Step 1: Edit the dynamic block
-
In the Admin sidebar, go to Content > Elements > Dynamic Blocks.
-
Find your Tee Shirt Promo dynamic block in the grid and open it in edit mode.
-
Expand the Content section and click Edit with Page Builder.
-
Change the column width:
-
Hover over the border between the two columns.
-
Hold down the mouse button and drag the border two divisions to the left.
img-md w-600 modal-image The first column is now four of 12 (4/12) grid divisions wide, and the second column is eight of 12 (8/12) divisions wide.
img-md w-600 modal-image
-
-
Change the text color:
-
Select the first two lines of text.
-
On the editor toolbar, choose Text Color and click the White swatch.
img-md w-600 modal-image -
-
In the upper-right corner of the stage, click the Close Full Screen ( ) icon.
Clicking this icon returns you to the Content section for the dynamic block with the preview displayed.
-
In the upper-right corner, click Save.
Step 2: View the Dynamic Block
Because this dynamic block is visible only to members of a specific customer segment, you must log in as a customer who is a member of the customer segment to see the promotion. In this example, the block appears only to female customers.
-
Open a browser window to your storefront.
-
To view your sample page, modify the URL in the address bar as follows:
mystore.com/sample-page
If your store is configured to include the html suffix, include the suffix as follows:
mystore.com/sample-page.html
-
Sign in as a female customer:
-
In the upper-right corner of your home page, click Sign In.
-
If the sample Luma data is installed on your system, use the following credentials:
Email -
roni_cost@example.com
Password -
roni_cost3@example.com
-
Click Sign In.
-
Return to the sample page to see the dynamic block that you created with the Tee Shirt Promo.
img-md w-700 modal-image -
You have completed the Block exercise. Make sure to keep your work for reference.
When you are ready, proceed to Part 3: Catalog Content