white-logo

KappaX

burger-icon
search-icon

/

Rectangle Layer

In this tutorial, we’re going to dive deep into the rectangle element and learn how to create awesome shapes in KappaX. Whether you’re a seasoned designer or just getting started, these tips and tricks will help you create stunning designs in no time.

Rectangle Layer3

Kappa Tip

The rectangle layer can also be used as an invisible hotspot placed over the videos to make them interactive. Simply place it over the video layer and keep the opacity to 0.

Accessing the Rectangle Layer

The first step is to add the rectangle element to your design. You can find this element in the top bar of the KappaX interface. Simply click on the rectangle icon and drag it onto the artboard to add it to your canvas.

Rectangle Layer1

Customizing the Rectangle Layer

Once you’ve added the rectangle to your canvas, it’s time to customize it. To make this rectangle look exactly how you want it to, we’ll use the property panel. There are so many options available in the property panel, so let’s take a closer look at them.

  • Resizing the Rectangle Element: The first customization we’ll make is to resize the rectangle. This is simple to do – just click on the shape and drag the handles to change the size. You can also resize the rectangle using the property panel. Easy, right?
  • Adjusting the Corner Radius: Next, let’s give our rectangle a bit of style. We can adjust the corner radius to make it rounder or sharper, depending on the look we’re going for. This can be done through the property panel.
  • Adding Color, Opacity, and Borders: We can also fill the rectangle with color, control the opacity, and even add a border. To fill the rectangle with color, simply select the fill color option in the property panel and choose your desired color. You can adjust the opacity of the rectangle using the opacity slider. Adding a border is also simple – just click on the border option in the property panel and choose your preferred border style, width, and color.
  • Adding Transitions:  We can also add transitions to our rectangle element from the property panel. These transitions can be used to create fun animations or subtle effects that bring your design to life. To add a transition, select the transition option in the property panel and choose your preferred animation style.

Rectangle Layer2

On this page

Kappa Tip

Accessing the Rectangle Layer

Customizing the Rectangle Layer