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).

More details: Classes, States and Context Selectors.

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.

For more details, see: Sizing and spacing.

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.

For more details, see: Flex Layout.

  • 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.

For more details, see: Grid Layout.

  • 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).

For more details about display settings, see: Elements layout settings.

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.

For more details, see: Sizing and spacing.

Background

You can set the following Background styles to an element:

  • Background color
  • Gradient
  • Image
  • Color overlay

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.

For more details, see: Background.

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 allows 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.

For more details, see: Position.

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.

For more details, see: Typography.

Border

Element’s border properties:

  • Border color
  • Border width
  • Border style

You can set all or certain borders to an element.

For more details, see: Borders and rounded corners.

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

For more details, see: Effects.

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.