Fill

Add Fill to Elements.

You can add and edit the body/fill colors of the elements, or use the images defined as fill, and add images from your device.

Color

After selecting the element you want to fill with the body color, you can select the color and tone on the hue with the Color Picker opened in the Fill section, and you can add the color you want with the HEX or RGB(A) code.

Style

You can use the same hue over and over in different elements by creating a style template with Create a new style.

Image Library

You can add an image to the element's background. It supports formats such as JPG, PNG, SVG and XML. You can set the added background image with position options.

Image With AI in Fill

You can easily and quickly generate and add images to screens and elements using the AI Assistant. Click on the Generate With AI button. In the prompt input box that appears, enter the necessary information about the image you need.

The AI Assistant will provide image suggestions based on the information you provided. You can add the suggested images to the image library by clicking on the cloud icon.

Repeat

Depending on the size of the added background image, you can have it displayed repeatedly according to the screen/browser width.

Position

You can determine the position of the picture you have added according to your needs from the Left, Center, Right, Top and Bottom options. Here, depending on the original size of the image, the display will differ depending on the screen/browser change. If you select the position ⟶center of the image you will add, your image will be positioned in the middle. If you choose Position ⟶ right, your image will be positioned on the right.

Setting Fill Settings on Elements

  • In UI Design view, select the element you want to set the Fill settings for.

  • Go to the Fill section in the Styling panel.

  • By clicking the three-dot icon next to Styles in the Fill area, you can save your Fill styles for use in different elements or places by clicking on Add New Style.

  • In the Styles area, you can also choose from the ready-made styles that appear when you click Load Style in the Search Box.

  • To select a color, you can use the Color option from the Custom Style area. Using the color picker tool, you can determine the color you want. You can also specify the color you want using HEX or RGB(A) code.

  • With Background Image, you can add visuals to the fill color of elements. With Add, you can select a visual from your device, or with Generate with AI, you can create visuals by artificial intelligence and adjust the fill of the element with these visuals.

  • After setting the Fill settings, the fill color of the element will be automatically updated.

The features contained within Fill vary depending on the elements. While all the features in Fill can be used in some elements, only limited features can be used in others.

Last updated