March Documentation

Decoration

Every Hatch module supports custom decoration. This feature supports blob or SVG decorations. 

Before we start, here are some examples of blogs/SVG decorations we can assign to any module:

decoration-02

Here are the steps:

  1. Open the module you wish to edit in the page editor. 
  2. Open the Appearance group > Decoration
  3. You'll find all the following fields:

    Frame 1.jpg?source=viewer&v=5ce3fba0e52ee5beb8f1f47cd2fda2ae
    1. Enable Decoration: Enable/disable the decoration. Default is disabled.
    2. SVG Code: Paste the exported SVG code into this text field.
    3. Width: Specify the width of the decoration. Supports: px, rem, and %
    4. Height: (Optional) Specify the height of the decoration. Supports: px, rem, and %
    5. Color: Pick any brand color. Inherit colors set in theme settings.
    6. Opacity: Set the opacity of the decoration
    7. Transform Origin: Control the starting point of the decoration's placement. 
    8. Transform Horizontal Value: the horizontal value (supports px, rem, and %) relative to the Transform Origin.
    9. Transform Vertical Value: the vertical value (supports px, rem, and %) relative to the Transform Origin.
    10. Placement: Choose to display the decoration behind or in front of the module.

This decoration feature only supports SVG, you can add any exported SVG code from your design application.
We personally use Figma, in which you can choose Copy/Paste > Copy as SVG

Image 2020-12-03 at 9.20.35 PM.jpg?source=viewer&v=928eefee426295245a88b71e020f67cd