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.
Box
Box picture: Note that a box image takes up space. This means that the image size can have an influence on the block size. In addition, it is possible to determine the position of the box image and thus arrange it behind, below, next to or above the block contents. This allows you to create visually vivid blocks with an integrated image.
In addition to size settings, image effects such as zoom in/out on hover , as well as grayscale effects and blur are available.
Mega: Enlarges a block so that it overlaps other blocks or extends out of the screen. Depending on the setting, blocks can extend beyond the left edge, the right edge, or both edges. This allows you to create eye-catching layouts that break up strict design layouts with deviations and irregularities, making your page look modern.
Effects
Hover effect:
Determines the effect that is applied when the mouse hovers over the element. You can choose between rise and scale. With the Rise effect, the element is moved slightly upwards. The Zoom in slightly effect makes the image larger. Effects that are geared towards mouse interaction are ideal for clearly highlighting links to images or similar for the customer.