Blocks advanced settings tab
Each WoodMart theme block contains an Advanced tab in its settings, which has a wide range of options allowing customization of margins, padding, width, layout, animation, and block visibility depending on the device viewing the site.
- Dimensions: includes options for Margins, Padding, and Width. Certain layout blocks whose purpose is to contain other blocks (Row, Container, Section) may have additional options for minimum and maximum height.
- Layout: includes options for Align self, Flex size, and Order, allowing customization of the size and position of the block within the Flexbox environment. It’s important to note that these options will only work if the parent block uses Flexbox, such as Column, Container, or Full width section.
- Animations: includes a selection of animations that occur when the corresponding block enters the viewport, either upon page load (if the block is located at the top) or when scrolling to the block.
- Position: allows you to change the
z-index
of the block and set such values for theposition
parameter as relative, absolute, fixed or sticky. By combining these parameters, you can absolutely position elements within other blocks, as well as create sticky sidebars using the valueposition: sticky
.
- Transform: includes a wide range of standard CSS transform properties, allowing the creation of various effects when interacting with blocks. For example, when hovering over an image, it can scale up; when hovering over a button, it can move up a few pixels, and so on.
- Parallax on scroll: allows for smooth element movement when scrolling the page to create a parallax effect. For ease of content editing, this option works only on the frontend.
- Responsive: allows selectively showing or hiding the block on desktop, tablet, or mobile devices in any combination.
- Misc: includes all other options not falling under the categories listed above, such as
visibility
,opacity
,overflow
, and HTML tag selection. The HTML Tag option depends on the context of the block it is used in. For example, if you choose a Container block, options like div, section, header, main, footer are available, and if you choose a Title block, options like h1, h2, h3, h4, h5, h6 are available, and so on.
Overall, by combining options available in the Advanced tab, it’s possible to create unique blocks that would otherwise be inaccessible. For example, if you limit the height of a Container block using the max-height option and set the overflow parameter to scroll or auto, you can create a content block that will have scrolling when content exceeds the set height.