IN THIS ARTICLE

    IN THIS ARTICLE

      Shapes

      This comprehensive guide will cover everything you need to know about the Shapes in Mokkup.

      When to Use?

      Shapes in a dashboard are versatile elements that help organize, highlight, or separate information visually. Here’s when to use a shape:

      • To highlight key data or metrics, drawing attention to specific numbers, categories, or trends.
      • To group related elements, making it easier to understand relationships between data points or sections.
      • To separate sections or create visual structure, improving readability and guiding the user’s focus.
      • To emphasize milestones or statuses in a process flow, such as marking start and end points or showing progress stages.

      How to Create?

      There are two ways to use the Shapes in Mokkup.

      Creating a New Project:

      • Click on ‘Create New Project’ from the home page
      • Setup the project by filling in the name and choosing the frame size
      • Drag & Drop the Shape onto the canvas or click on it to add from the left menu
      • Resize it on the canvas and place it in the desired location
      • Edit it from the customize element menu, which opens on the element selection

      Using a Mokkup Template:

      • Choose a template from the template library that uses a Shape and click ‘Use Template’
      • Select the Shape that needs modification
      • Resize it on the canvas or edit it from the customize element menu

      Tip: Mokkup elements have multiple variations that can be accessed by double-clicking on the element or clicking Variation in the customize element menu.

      How to Customize?

      Mokkup provides customization options for every element. These customization options are accessible via the left-hand navigation menu. 

      Customize: 

      This is the section that opens by default when an element is selected. In this tab, all element customizations can be made. Each subsection is explained in detail below.

      1. Details

      Edit the basic chart details here.

      Title:

      • Change the title of the chart here. Toggle off if not needed.

      Alignment:

      • Adjust the title alignment to either the left, center, or right of the element.

      2. Properties

      Contains all the settings that affect the chart's aesthetics. Use the dropdown to select which dataset to apply the properties to.

      Fill Color:

      • Toggle on or off to add or remove color in the chart.

      Opacity:

      • Use the slider to adjust the opacity of the shapes. 

      Rotation:

      • Use the slider to rotate the shapes. 

      Rounded Corner:

      • Use the slider to add rounded corners to the shapes. 

      Tip Position:

      • Use the slider to adjust the tip position of the shapes. 

      Stroke Line:

      • Add or remove stroke line from the chart by toggling on or off.
      • Use the slider to adjust the stroke line of the shapes. 

      3. Variations

      • This button opens the 'Choose Style' pop-up. 
      • Choose an alternative design for the element, and click on apply.
      • Can also access the pop-up by double-clicking on any selected element.
      • Using the above-described customization methods, it is also possible to create various element variants.
      • Click on the "Default" option to revert to the original variation of the element in case you've selected a different one and want to go back to the default.

      4. Design Customizations

      • This will access the 'Design Customizations' menu when clicked. 
      • Use this to change your active element theme and utilize customization options to add rounded corners, drop shadow, and stroke of the shape.
      • For more information, please refer to this article.

      This was an in-depth introduction to using and editing a Mokkup shapes element. For additional inquiries, please ask our Chatbot or contact support.

      Similar articles