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. 

Advanced settings tab
  • 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 the position 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 value position: sticky.
An example of a sticky column created via the Position option
  • 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.
An example of using the Transform option with a custom upward offset shift effect when hovering
  • 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.

Custom scrollable content block created by combining several Advanced tab options
Sign in

No account yet?