Making Styling Changes

The styling panel offers you an array of styling options to create stellar creative. Each element of your creative will have its styling panel. To enable it, click on the desired element.  (Remember, there are 3 'main elements' viz, Shapes, Image, Text. Presets are just a combination of these elements, and they too have a styling panel)

Let's start with the text element.

  • Upload a text element, and select the 'magic wand' icon beside it to enable the styling panel (on the left side)styling panel for text element-2Text styling panel postion and alignment section

Note: You can enable the styling panel by clicking on the text element on the content panel and the element itself in your canvas.

  1. The first styling options are to choose the element's position on the canvas; you can choose to form the four types of placing options.
    placing options in the styling panel 
    1. Bring to front: It will bring the element to the topmost layer. (overall elements)
    2. Bring Forward: With every click, this will bring the element one layer forward. 
    3. Sent backward: It will send the element to the bottom layer
    4. Sent to back: With every click, it will send the element to one layer backward. (below all elements, but not below background color)
  2. The second styling option is to Align Object (the element) on the canvas. You can choose from the 6 (self-explanatory) alignment options.
    Align object styling option
    1. Align Left
    2. Align Horizontally center
    3. Align Right
    4. Align Vertically center
    5. Align Bottom
  3. The third styling option in the panel is to change the Size and Position
    Size and position stylling option 
    1. Change the position of the element by any input along two axes ( X and Y).
    2. Change the width and height of the element (W and H).
    3. With the last two boxes, you can rotate and add padding to the text element (along with making alignment changes to the padding)
  4. The fourth styling lets you make changes in Typography;
    All typographic styling changes
    1. You can change the font type and the font size.
      typography styling option
      upload a font from your computer
      Note: You can upload a font from your device too!
    2. You can align the content inside the text element; you get six alignment options viz, Align right, left, middle and Align top, middle, bottom (all these adjust the position of the texts inside the text element) 
      Editing the content of text element
    3. The last section of size and position is for the letters (alphabets) in your text element; you can change the 'line-spacing,' 'letter-spacing,' and 'word-spacing' along with cases ('As typed,' 'Upper case,' 'Lower case,' 'Title case' ) of the letters.
       Editing the content of text element-1
  5. Next up, we have the Style. Here, you can change the element's color and add a border and make changes to it.
    Style changes of the text element
    1. You can change the color of the text element in two ways.color palette
      1. With a hex code
      2. Choose the color from the palette
    2. To change the border, you have first put a non-zero value (natural number) in the 'width.' (The box with value '1')
      styling the border of a text element
      1. After that, you can change the type of 'border' from the drop-down menu. For example, you can make the borders Solid, Dotted, Dashed (at present, it is set at 'Dotted'). 
        Border types to make style changes
      2. You can change the color of the border too, again in the two ways;
        1. Hex Code
        2. Color palette
      3. You can change the roundness of the border by putting a numeral value in the last box.
        radius of a border
  6. Reflection
    You can add a reflection effect to a text element using the toggle button. Additionally, you can adjust the transparency, distance, and size of the reflection.

  7. At last, you have the Blending.
    1. With blending, you can adjust the look of the element according to the overall Style of your canvas (creative). There are five options that you can choose from to blend your element.
      Blending options for styling changes

Tip: Every change that you carry out will be reflected in the element on the canvas.

Now let's see the styling panel for the Shape element

    Every element has overlapping styling options such as position, align Object, size, position, and blending. Therefore, we will only discuss the styling changes that are differently available for the shapes element. styling panel for shape element

    Note: We have not included the first two stylings (viz, Position, Shapes, and Sizes) options in the snippet


    Let's see what difference do we get in the shapes styling panel. (These are under the 'styles' section)

    Style section in shapes styling panel

    1. First off we have, Layout (an add on to the size and position); there are three types of changes you can carry out with Layout;
      Layout styling for shapes
      1. You can set the position of the shape inside the element box by choosing from nine placing options (the mini diagrams explains their doing effect)
        placing options for the shape inside shape element
      2. Next, we have Fill in frame; this makes the shape take up the entire size of the element box. So, if you resize the element box (that blue color box), the shape will adjust to 'fill' up the new profile of the element box.
        elements box
      3. At last, we have Fit in frame; this automatically adjusts the shape to the perfect aspect ratio for any size of the element box. 
    2. The second styling change for shapes is the Zoom and Crop options.
      Zoom option for shapes for styling changes
      1. With the Zoom feature (slide bar), you can also add a numeral vale to zoom into the shape. (by default, the zoom level will be set at level 1)
      2. Besides the zoom slide bar, you have the crop icon; it allows you to crop the shape within the element box.
    3. The Style feature lets you change the corner radius, color, add a border and give a shadow to your shape.
      Styles changes for shape 
      1. You can input a value of your choice to change the corner radius of the shape element 
      2. Changing color is similar for every element; click here to know more.Changing color of the shapes
      3. You can add only one form of the border ('solid') to your shape (contrast to the text element border). To give a border, first put a non-zero value of the width and then choose the color for the frame.
        border changes for shape
      4. With Shadow, you can add a shadow effect to the shape along with controlling other factors. (The shadow will be added in a solid form)
        shadow changes for shape
        1. From the box (on the left side), you can adjust the direction of the Shadow; there are nine directions to choose from.
          shadow directions changes for shape
          Note: You can custom add the direction of the shadow by putting some numeral values in the x and y axes (coordinates) column. 
          directional value for the shadow
        2. The following options are to change the effect of the shadow. First, you can blur out the 'solid' shadow with a number value. Second, you can also change the color of the shadow.
          Blur and change color of the shadow

    4. At last, you have the options to blur, change the Opacity and invert the shape's color.
      last styling options for the shapes
      You can either slide the bar in front of every option or put a numeral value to change the settings.

    At last, let's understand the styling panel for a Media element

    The media element generally involves images, and the styling panel of the media element also has some overlapping features with the 'Text element' and the 'Shape element.'

    These overlapping features are:

    Ground Shadow

    You can add a ground shadow effect to images using the toggle button


    Cast Shadow 

    You can add a cast shadow effect to images using the toggle button. Additionally, you can adjust the alignment, perspective, blur, and opacity of the shadow. 



    You can add a reflection effect to images using the toggle button. Additionally, you can adjust the transparency, distance, and size of the shadow.


    Clip path

    You can crop a part of your image and video files so that only a portion of the artwork appears through the shape/shapes you choose. Click on the Crop icon in the Zoom section to access clip paths. Additionally, you can also upload a .svg file in case you need a custom path. 


    The only difference in the styling panel of 'Media element' from 'Shape element' is in the border. 

    border of the media element

    But If you notice, this is similar to the border options of the 'Text element.' Click here to know more.