Design and Settings Panel

Design and Settings Panel is on the right side of the screen. It is used to style and setup website elements.

You can find the following tabs in the Panel:

Design  - used to define the style of an element

Settings - used to additionally set up an element

Animations - used to assign an action to an element

Design tab

You can use the properties on this tab to add styles to any website element. By selecting an element on the Layers tab or the Canvas, you can see the styles assigned to it on the Design tab and change them accordingly.

Style sources

The Style sources option allows you to manage an element’s classes and states.

Classes in Taptop are sets of custom styles applied to an element or widget. They help simplify the styling process across your website.

States define how an element looks based on user interactions. For example, they allow you to set different styles for a button when hovered or clicked.

The following element states are available:

Default — The element’s normal, default state.

Hover — The element when the mouse hovers over it (without clicking).

Active — The element when it is actively being clicked.

Focus — The element that has received focus (e.g., a text field with the cursor inside it).

Size

You can set the width (W) and height (H) properties to an element in the Size settings.

You can use the following properties to set up the size : auto size auto, pixels px, percentages %, em, rem, Viewport Width vw, Viewport Height vh.

Elements layout settings (Auto Layout)

Elements layout settings control the visual display and arrangement of elements on the page.

You can use the following display settings :

Flex is set on a parent element (flex container) and affects the child elements in it. It has settings to control the location of child elements vertically and horizontally.

Block An element starts on a new line and takes up the full width of its parent element.

Grid allows you to create a layout consisting of rows and columns. It enables the creation of complex layouts and makes it easy to manage the positioning of elements within the grid.

None Used to completely hide an element, as if it is no more on the canvas. All child elements will also be hidden.

Inline-block Elements are placed side by side on one line as long as they fit on it (then they wrap to the next line). The width of elements is determined by their content.

Inline-Flex Multiple flex containers are placed on one line (similar to inline-block).

Margins и Paddings

You can use two types of indents:

Margins define the space between the borders of an element and its adjacent elements. Highlighted in yellow.

Paddings define the space between the borders of an element and its content. Highlighted in green.

You can set Margins and Paddings both on all sides of an element and selectively. Margins and Paddings can be set in px, %, em, rem, vh, and vw.

Text

You can use the following options to format Text:

Font

Font weight

Font size

Font color

Line-height

Letter-spacing

Text Align

Text Stroke

Text Shadows

More Type Options: Decoration, Capitalize, Overflow Wrap, Breaking.

Position

The position property determines an element’s position on the page. It allows you to change the flow of elements on the page by shifting them or fixing their position. Once you set an element's position type , you can make adjustments to the top, bottom, left, and right properties.

There are the following types of position :

Static – element's standard position, no offset.

Relative – an element can be moved relative to its original position by specifying the coordinates.

Absolute –  an element can be moved relative to its parent element by specifying the coordinates.

Fixed –  you can fix the position of an element, which will not change when scrolling the page.

Sticky –  depending on the scroll position of the browser window, an element will have fixed or relative position.

Position settings also allow setting the Z-index , which determines the position of an element on an imaginary z-axis, passing in and out of the screen of your computer.

Appearance

Here you can configure the following parameters:

Opacity

Defines the transparency of the element and its child elements.

Radius

Sets the border radius for all corners of the element, or an individual radius for each corner.

Overflow

Controls how content that exceeds the boundaries of the element is handled.

Fill and Background Color

You can set the following Fill options to an element:

Color

Gradient

Radial Gradient

Image

You can add multiple images, gradients, and color overlays to create multilayer effects. You can set opacity to each background layer and also change the order of the background layers by dragging them with the mouse, hide, or delete them.

Border

Element’s border properties :

Border color

Border width

Border style

You can set all or certain borders to an element.

Effects

Apply filters, opacity, transforms, and other Effects to enhance an element’s interactivity.

You can add most of these effects on the hover state or any other state in the states menu by selecting it in the State Menu.

Types of effects :

Shadows

Transforms

Filters

Transitions

Outline

Cursor

Settings tab

With the Settings tab you can set additional properties to an element. This tab is mainly used for widgets and helps customize their structure and display under various conditions and user actions.

The list of settings depends on the element type and the options it needs. For example, some widgets have the following settings:

Menu : managing menu type and structure, its items, and display on various devices.

Block list : managing Block list style and its elements.

Image : replacement of image, adjustment of image size and its position, SEO options.

Pop-up window : window close options.

Form : different states of the form, extra styles.

Also, on the Settings tab, you can set SEO indexing to an element.