Styling inside the editor

The styling panel offers you an array of styling options to create stellar creativity. Each element of your creative will have its styling panel. To enable it, click on the desired element.  (Remember, there are 3 main elements: shapes, Images, and 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, hover over the text element and select the 'pencil' icon to edit & enable the styling panel (on the left side)
  
  
  

1. The first styling option is 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)

1. 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 - The text box is aligned perfectly with the left edge of the image.
   2. Align Horizontally center - The text box is positioned in the center of the image at its current vertical position within the image.
   3. Align Right - The text box is aligned perfectly with the right edge of the image.
   4. Align Top -  The text box is aligned perfectly with the top edge of the image.
   5. Align Vertically center - The text box is positioned in the center of the image at its current horizontal position within the image
   6. Align Bottom - The text box is aligned perfectly with the bottom edge of the image

1. The third styling option in the panel is to change the Size and Position. 
   
   
   1. Change the element's position 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) as seen.
      
2. 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 choose the font type (Regular, Normal, Italic Regular, etc.) from the dropdown and apply formatting options like Bold, Italic, and Underline to the text.
   3. 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) 
      
   4. 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. You can enhance the appearance of the text by using the strikethrough, subscript, and superscript icons. These formatting options can help you achieve your desired text objective.
      
   6. You can adjust the text size and even utilise the Auto Fit feature to ensure the text fits perfectly within the text box.
      1. Auto Fit Enabled - When Autofit is enabled, the text box automatically adjusts its size to fit the text, whether it is expanded or contracted. This ensures that the text is always visible and within the specified range.
         
      2. Autofit Disabled - You can manually select from the dropdown or enter the font size when the autofit feature is disabled.
         

1. 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. Editing the hex code
      2. Choose the color from the palette
   2. You also have the option to change the background of the text box, giving your text a unique and different appearance.
      
   3. To change the border, 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.
         
2. 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.
   
   
3. At last, you have the Blending.
   A Blending Mode is a powerful tool that instructs two layers on seamlessly merging and creating a captivating final product.
   
   
   1. With blending, you can adjust the element's look according to the overall style of your canvas (creative). There are five options that you can choose from to blend your element.
      
      
      1. Normal: By default, each layer’s blend mode is set to Normal, which means the layer will stay how it originally looked. You also need to have at least two layers before it’s possible to change the blend mode.
      2. Multiply: Multiply is a blending mode that enhances detail and contrast in faded areas or helps eliminate a white background.
      3. Screen: Screen blending mode enhances the brightness of light pixels, resulting in a lighter effect than the Lighten Blend Mode.
      4. Overlay: Overlay enhances contrast and definition, making mid-tones less visible. It adds depth and sharpness favoured by retouchers for high-quality sharpening.
      5. Darken: Darken blending mode makes the background invisible. It is the exact opposite of the Lighten blending mode.
      6. Lighten: The Lighten blending mode is ideal for removing a subject from a dark background or adding light effects. It makes dark areas invisible while keeping lighter areas visible, making it easy to lighten while adding new elements.
      7. Color-dodge: Color Dodge is a powerful tool to add captivating colors to highlight without affecting midtones and skintones. It enhances the overall appearance.
      8. Color Burn: Color Dodge enhancescolors, adding beautiful detail to shadows and creating captivating visual effects. It offers incredible flexibility to achieve the desired look.
      9. Difference: 

         The 'Difference blend mode' analyzes the colors from both layers and subtracts the color with the highest brightness value. White changes the base color's values, while black has no effect. When applied to a black-and-white gradient layer, the black areas represent the base layer, and the white regions invert the colors.

      10. Exclusion: The Exclusion blend mode inverts colors in white areas and leaves black areas unchanged, resulting in a softer effect than the Difference mode. Grey pixels with a 50% shade retain their original color.
      11. Hue: The Hue blend mode preserves the base layer's brightness and saturation while adopting the blend layer's hue. It is useful for altering the color of a layer without impacting its brightness and saturation, creating a different mood or adding a sepia tone.
      12. Saturation: The Saturation blending mode keeps the base layer’s luminosity and hue while using the blend layer’s saturation. 
      13. Color: The Color Blending Mode preserves the brightness of the base layer while incorporating the saturation and hue of the blend layer. This blending mode enhances color effects and saturation, creating a vibrant and colorful.
      14. Luminosity: The Luminosity blend mode sharpens and enhances the appearance in editing. It preserves the original hue and saturation of the base layer while incorporating the blend layer's luminosity. This mode offers a different approach to adjusting colors without affecting brightness and saturation, contrasting with the Color blend mode.
      15. Hard-light: 

          The Hard Light blending mode combines the Multiply and Screen modes to determine light and dark areas based on the brightness of the blend layer. This blending mode often produces intense effects, which may require reducing the Opacity for optimal results.

      16. Soft-light: Soft Light is a versatile tool that enhances colors and allows for advanced retouching techniques like dodging and burning, adding depth and creativity to your projects.

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. So, we will only talk about the styling changes that are differently available for the shapes element. 

Let's see what difference 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. You can input a value of your choice to change the corner radius of the shape element 
   
   1. Changing color is similar for every element; click here to know more.
      .
   2. To give a border, first put a non-zero value of the width and then choose the color for the frame.
      
   3. With Shadow, you can add a shadow effect to the shape and control 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 before 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 shadow's transparency, distance, and size.

 

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.' You can click here to know more.