Blocks have common basic settings. These can be found in the top bar in the Block Actions: General, Background, Box, Effects and Advanced.
General Settings
Invert: Inverts the text and fade effect color, but only affects this block. This option should be enabled for a dark block background.
Link: Adds a link to the entire block. Enter the destination URL or select one of the possible link destinations. For example, it is possible to link products or merchandise groups directly with just a few clicks.
Minimum height: Determines the minimum height of the block container, independent of content. Is only applied from tablet-landscape resolution. Settings are Medium (400px) and High (700px).
Root CSS Class: Extra CSS classes for the outer block container.
Root CSS Style: Inline CSS for the outer block container.
CSS Class: Extra CSS classes for the outer block container.
CSS Style: Inline CSS for the outer block container.
Content CSS Class: Extra CSS classes for the inner block container.
Content CSS Style: Inline CSS for the inner block container.
Template: (For advanced users only) Razor template name. If no template is entered, the default template Public will be applied to the block. The templates for the blocks can be found at:
[Plugin] > Views > Story > BlockTemplates > [BlockType] > [Template].cshtml
For example, you can find the default template for the image block under:
SmartStore.PageBuilder > Views > Story > BlockTemplates > Picture > Public.cshtml.
Now, if you want to include a custom template, you need to save your template in the appropriate block directory and enter the template name.
HTML ID: Sets the HTML ID of the block.
Sorting: Specifies the arrangement of the blocks in the output of the HTML code.
Background
This tab lets you edit the background of the block. It works in the same way as the story background overlays. So, you can add background layers on top of each other here as well to create attractive backgrounds.
For more information about backgrounds, see Background.
