CHAPTER 36:
Content Blocks
A block is a modular unit of content that can be positioned most anywhere on the page.
Content blocks are sometimes referred to as static blocks, or CMS blocks, and can be used to display fixed information such as text, images, and embedded video, as well as dynamic information from a widget or that originates in a database or other source. Most elements on the home page are blocks that can be easily managed.
You can create custom blocks of content without writing any code, and assign them to appear in a specific place in the page layout. Blocks can also be defined and positioned by making a
layout update
in XML code.
Magento Community Edition 2.1 User Guide
Blocks on Home Page
561
Adding New Blocks CHAPTER 36: Content Blocks
Adding New Blocks
Custom blocks of content can be added to any page, group of pages, or even to another block.
You can place code for a carousel image slider in a block, and then position the block on the home page.
The Blocks workspace uses the same
basic controls
as the Pages workspace to help you find blocks and perform routine maintenance operations.
Blocks Workspace
562 Magento Community Edition 2.1 User Guide
CHAPTER 36: Content Blocks
To create a block:
1.
On the Admin sidebar, tap Content. Then under Elements, choose Blocks.
2.
In the upper-right corner, tap
Add New Block
. Then, do the following:
Adding New Blocks
New Block
a.
By default the status of the new block is enabled. If you want to change the status, set
Enable Block
to “No.”
b.
Assign a Block Title for internal reference.
c.
Assign a unique Identifier for the block. Use all lowercase characters, with underscores instead of spaces.
d.
Select each Store View where the block is to be available.
e.
Complete the block Content as needed.
l
Use the
editor
to format text, create links and tables, images, video, and audio.
l
If you prefer to work with the HTML code, tap
Show / Hide Editor
.
3.
When complete, tap
Save Block
.
The new block appears at the bottom of the list in the Blocks grid.
Magento Community Edition 2.1 User Guide 563
Adding New Blocks CHAPTER 36: Content Blocks
Adding Social Plugins
Social networking sites have a numerous oplugins that can easily be added to your store. In addition, there are many extensions on Magento Connect that can be used to integrate your store with social media. The following example shows how to add a Facebook “Like” button to your store.
564
Facebook Plugins
Step 1:
Get the Button Code
1.
On the Facebook website, go to the button setup page.
2.
In the URL to Like field, enter the URL of the page in your store that you want people to Like.
For example, you might enter the URL of your store’s home page. Then, do the following:
a.
Choose the Layout for the button.
b.
Enter the Width in pixels that is available on your site for the button and any associated text message.
c.
Set Action Type to one of the following: l
Like l
Recommend
3.
Tap
Get Code
to copy the generated code to the clipboard.
Magento Community Edition 2.1 User Guide
CHAPTER 36: Content Blocks Adding New Blocks
Like Button Setup
Step 2:
Create a Content Block
1.
Return to your store. On the Admin sidebar, tap Content. Then under Elements, choose
Blocks
.
2.
In the upper-right corner, click tap Add New Block. Then, do the following:
a.
Enter a descriptive Block Title for internal reference. For example: Facebook Like Button.
b.
Assign a unique Identifier to the block, using all lowercase characters, and underscores instead of spaces. For example: facebook_like_button.
c.
If your Magento installation has multiple store views, choose each Store View where the block is to be available.
d.
Paste the snippet of code that you copied from the Facebook site into the Content box.
e.
If the block is not ready to “go live,” set Enable Block to “No.”
3.
When complete, tap
Save Block
.
Step 3:
Place the Block
1.
On the Admin sidebar, tap Content. Then under Elements, choose Widgets.
2.
In the upper-right corner, tap Add Widget. Then, do the following:
a.
In the Settings section, set Type to “CMS Static Block.” Then, tap
Continue
.
b.
Verify that Design Theme is set to the current theme.
c.
Tap
Continue
.
3.
In the Storefront Properties section, do the following:
Magento Community Edition 2.1 User Guide 565
Adding New Blocks CHAPTER 36: Content Blocks
a.
In the Widget Title field, enter a title for internal reference.
b.
Set Assign to Store Views to “All Store Views,” or to the view where the app will be available. To select more than one, hold the Ctrl key down and select each option.
c.
Enter a number in the Sort Order field to determine the order of the block if it assigned to appear in the same location on the page as other content elements. The top position is zero.
4.
In the Layout Updates section, tap
Add Layout Update
. Then, set Display On to the category, product, or page where you want the block to appear.
For example, if you choose “All Pages,” and position the block in either the header or footer, the block will appear in the same place on every page of the store.
To place the block on a specific page, do the following:
a.
Set Display On to “Specified Page.” Then, select the Page where you want the block to appear.
b.
Choose the Block Reference to identify the place on the page where the block is to be placed.
c.
Accept the default setting for Template, which is set to "CMS Static Block Default
Template."
d.
Tap
Save and Continue Edit
.
5.
In the panel on the left, choose Widget Options.
6.
Tap
Select Block…
. Then in the list, choose the block that you want to place.
7.
When complete, tap
Save
.
8.
When prompted, follow the instructions at the top of the workspace to update the index and page cache.
The widget now appears in the Widgets grid.
Step 4:
Verify the Location in Your Store
Return to your storefront to verify that the block is in the correct location. To move the block, you can reopen the widget try a different page or block reference.
566 Magento Community Edition 2.1 User Guide
CHAPTER 36: Content Blocks Adding New Blocks
Adding a Lightbox or Slider
There is a wide assortment of jQuery-based image lightboxes, sliders, and carousels available on Magento Marketplace , and some are free. A recent search on the term “slider” returned thirythree results.
Slider Extensions
To add a lightbox or slider to your store, download the extension from Magento Markeplace, and follow the instructions from the developer.
Magento Community Edition 2.1 User Guide 567
Positioning Blocks CHAPTER 36: Content Blocks
Positioning Blocks
The code that controls the page layout and placement of blocks is written in XML
Widgets
make it easy to position a block at a specific place on the page, and even for a specific product or category without writing any code. You can choose each option from a list, rather than trying to remember all of the possible combinations.
The following list shows the locations by page type where blocks are typically placed. To learn more about how areas on the page are defined, see:
Standard Page Layouts .
Category and CMS Pages
BLOCK REFERENCE
Breadcrumbs
Left Column
Main Content Area
My Cart Extra Actions
Navigation Bar
Page Bottom
Page Footer
Page Header
Page Top
Right Column
Store Language
POSITION
The navigation aid at the top of many pages that shows your current location as a link. Any additional content placed in the Breadcrumbs reference floats to the right of the breadcrumbs, if displayed.
Content is added to the left column.
Content is added to the main content area.
Content appears below the Cart Subtotal in the My Cart popup located within the top link.
Content appears below the main navigation bar.
Content appears at the bottom of the page.
Content appears above the footer of the page.
Content appears below the header of the page.
Content appears at the top of the page.
Content appears in the right column.
Content appears in the upper-left corner of the header.
568 Magento Community Edition 2.1 User Guide
CHAPTER 36: Content Blocks Positioning Blocks
Product Page
BLOCK REFERENCE
Alert URLs
POSITION
Content appears below the title of the product on the product detail page.
Bottom Block Options
Wrapper
Breadcrumbs
Info Column Options
Wrapper
Left Column
Main Content Area
My Cart Extra Actions
If custom options are added, content appears below the Add to Cart button.
Content appears to the right of breadcrumbs—the navigation aid that provides links as a path—that’s showcased below the navigation bar.
If a custom options are added, content appears to the right. The same location applies to configurable options.
Content appears below the left column blocks.
Content appears below the main content area.
Content appears below the Cart Subtotal in the My Cart popup located within the top link.
Navigation Bar
Page Bottom
Page Footer
Page Header
Content appears below the main navigation bar.
Content appears at the bottom of the page.
Content appears above the footer of the page.
Content appears below the header of the page.
Page Top Content appears at the top of the page.
PayPal Express Checkout
(Payflow Edition) Shortcut
Wrapper
If the PayPal payment method is enabled, content appears below the
PayPal buy button.
PayPal Express Checkout
Shortcut Wrapper
If the PayPal payment method is enabled, content appears below the
PayPal buy button.
Product Tags List
Product View Extra Hint
Right Column
Store Language
Tags List Before
Content appears below the products tag bar.
Content appears below the main top price of the product.
Content appears below the right column blocks.
Content appears to the right of the language chooser.
Content appears above the Add Your Tags field.
Magento Community Edition 2.1 User Guide 569
Positioning Blocks CHAPTER 36: Content Blocks
Using a Widget
The CMS Static Block widget gives you the ability to place an existing
content block
most anywhere in your store.
570
Process Overview:
Step 1: Choose the Type
Step 2: Complete the Layout Updates
Step 3: Place the Block
Step 1:
Choose the Type
1.
On the Admin sidebar, tap Content. Then under Elements, choose Widgets.
2.
In the upper-right corner, tap
Add Widget
. Then do the following:
a.
In the Settings section, set Type to “CMS Static Block.” Then, tap
Continue
.
b.
Verify that Design Theme is set to the current theme.
c.
Tap
Continue
.
Magento Community Edition 2.1 User Guide
CHAPTER 36: Content Blocks Positioning Blocks
Settings
3.
In the Storefront Properties section, do the following:
a.
In the Widget Title field, enter a descriptive title for internal reference.
b.
Set Assign to Store Views to “All Store Views,” or to the view where the app will be available. To select more than one, hold the Ctrl key down and select each option.
c.
Enter a number in the Sort Order field to determine the order of the block if it assigned to appear in the same location on the page as other content elements. The top position is zero.
Magento Community Edition 2.1 User Guide
Storefront Properties
571
Positioning Blocks CHAPTER 36: Content Blocks
Step 2:
Complete the Layout Updates
1.
In the Layout Updates section, tap
Add Layout Update
. Then, do the following:
2.
Set Display On to the category, product, or page where you want the block to appear. To place the block on a specific page, do the following:
a.
Choose the Page where you want the block to appear.
b.
Choose the Block Reference that identifies the place on the page where the block is to be placed.
c.
Accept the default setting for Template, which is set to "CMS Static Block Default
Template."
Layout Updates
Step 3:
Place the Block
1.
In the panel on the left, select Widget Options.
2.
Tap
Select Block…
. Then in the list, choose the block that you want to place.
3.
When complete, tap
Save
.
The app now appears in the list.
4.
When prompted, follow the instructions at the top of the workspace to update the index and page cache.
5.
Return to your storefront to verify that the block appears in the correct location. To move the block, you can reopen the frontend app try a different page or block reference.
572 Magento Community Edition 2.1 User Guide
CHAPTER 36: Content Blocks Positioning Blocks
Using a Layout Update
Blocks can be placed in the left or right sidebar of a specific page by making a
layout update
to the XML code. With a few simple changes to the code, you can position the block in either sidebar, and control its position in relation to other blocks.
The term callout
1 is sometimes used to refer to a block that is defined as a layout update with
XML code. The term sidebar
2 refers to the left or right columns of the page layout. When entering layout update code, make sure to follow the syntax exactly as shown in the example.
To place a block in the sidebar, the page must have a two-or three-column layout. To learn more, see:
Page Layout
.
To place a block in the sidebar of a page:
1.
On the Admin sidebar, tap Content. Then under Elements, choose Blocks.
2.
In the grid, find the block you want to place, and take note of its Identifier. Make sure that you have the correct spelling.
3.
On the Admin sidebar, tap Content. Then under Elements, choose Pages.
4.
Find the page where you want to place the block, and open the page in edit mode.
5.
In the panel on the left, choose Design. Then, do the following:
a.
In the Layout Update XML box, enter the code for the right or left sidebar.
Code for CMS Block in Sidebar
<reference name="right">
<block type="cms/block" name="right.permanent.callout">
<action method="setBlockId"><block_id>your-block-id</block_id></action>
</block>
</reference>
b.
Change the reference name to identify either the “right” or “left” column, according to the layout of the page.
c.
Change the block_id to the identifier of the block that is being placed.
6.
When complete, tap
Save Page
.
1A term that is sometimes used to describe a block that is defined as a layout update using XML code.
2The right or left column of a two-column page layout.
Magento Community Edition 2.1 User Guide 573
574 Magento Community Edition 2.1 User Guide
