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)

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.
    
   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.
   
   
   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. 
    
   
   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;
   
   1. You can change the font type and the font size.
      
      
      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) 
      
   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.
       
5. Next up, we have the Style. Here, you can change the element's color and add a border and make changes to it.
   
   
   1. You can change the color of the text element in two ways.
      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')
      
      
      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'). 
         
      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.
         
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.
      

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.

 

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

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;
   
   
   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)
      
   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.
      
   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.
   
   
   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.
    
   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.
      .
   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.
      
   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)
      
      1. From the box (on the left side), you can adjust the direction of the Shadow; there are nine directions to choose from.
         
         Note: You can custom add the direction of the shadow by putting some numeral values in the x and y axes (coordinates) column. 
         
      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.
         
         
         
4. At last, you have the options to blur, change the Opacity and invert the shape's color.
   
   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:

• Position
• Align Object
• Size and Position
• Style
• Blur, Opacity, and Invert color
• Blending

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. 

 

Reflection

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. 

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