Design Customizations

This comprehensive guide will cover everything about design customization in Mokkup at the element and project levels.

Where to Find?

Navigate to the Design tab in the left menu to access all the customization options. The tab is divided into two sections:

Tip: Click on a single element on your canvas to access this menu at an element level.

Mokkup offers multiple customization options to help you make the most aesthetic dashboard wireframe that aligns with your brand.

This section allows you to change the theme of a single element or your entire project.

The Active Theme card shows the current theme applied to the project.
Clicking on ‘Change Theme’ will open a Themes menu.
This menu has a variety of pre-built themes with filters for Free and Pro Themes.
There is also an option for Pro users to create ‘Custom Themes.’
For detailed steps on using themes, read this article.

Mokkup allows various design options, which will be explained below. These features are only accessible to Mokkup Pro users.

Click on the arrow on the right of ‘Rounded Corners’ to expand the options.
Type in a value to adjust the corner radius of elements on the canvas.
The higher the number, the rounder the border corners of your elements will appear.
To change the value for each corner individually, click on the ‘Independent Corners’ icon.

Toggle the ‘Image As Background’ switch to enable or disable a background image for your canvas.
Click on ‘Add Image’ to select an image from your device.
Adjust the transparency of the background image using the ‘Opacity’ slider.
Click on the icon on the right of ‘Scale’ to choose how the image fits within the canvas:

Normal: Keeps the image's original size and position.
Fill: Stretches the image to cover the canvas completely.
Fit: Resizes the image to fit within the canvas while maintaining its aspect ratio.

Tip: Turning on the image as background toggle will automatically switch off the canvas color, and vice versa.

Toggle the ‘Canvas Color’ switch to enable or disable a solid color for your canvas.
Click on the colored square on the right of ‘Canvas Background’ to open the color picker.
Choose a color or manually add the hex code, and adjust the color opacity by using the opacity slider.

Tip: You can only change the background of the entire canvas, not individual elements.

Toggle the ‘Drop Shadow’ switch to enable or disable a drop shadow for your element.
Enter a value to adjust the drop shadow area on your canvas's elements.
The higher the number, the more pronounced the shadows of your elements will become.
You can also modify the value of spread and blur to define the shadow's appearance.
The spread value determines the expansion of the drop shadow area, making the shadow more prominent, while the blur value controls the softness of the shadow edges.
Click on the colored square on the right of ‘Shadow Colour’ to open the color palette.
Choose a color or manually add the hex code, and adjust the color opacity by using the opacity slider.

A stroke is the outline or border of the element, varying in thickness and color.
Click on the arrow on the right of ‘Stroke’ to expand the options.
Tap on the colored square on the right of ‘Stroke Colour’ to open the color picker.
Choose a color or manually add the hex code, if you have one.
Use the slider to adjust the width or thickness of the stroke around the chart.

This was a complete guide to using the “Design Customizations" on Mokkup. If you have further questions, please ask our Chatbot or contact support.