Media styling

This article describes how you can style media elements in Rocketium's editor. For other articles on styling please refer:

  • Introduction to styling
  • Text styling
  • Shape styling

    Media styling
  • Layout
    First, 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 explain their doing effect).
      placing options for the shape inside shape element
    2. Next, we have Fill in frame; this makes the media take up the entire size of the element box. So, if you resize the element 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. 
  • 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 add a numeral value 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 (), which allows you to crop the shape within the element box (also known as a clip mask) or upload an image and use
    Clip mask
    Clip masking is used to crop/clip an image layer in a particular selected shape. The user should be able to zoom, pan and crop an image with a clip mask. Dropping the clipping mask(star) on the image will crop the image to a star shape. 

    Steps for clip mask
  • Select the image to crop/clip-mask.

  • Select the shape from the crop and shapes panel in the styling panel.

  • After clip-masking is done, the clip-mask and the image will automatically become a group.

  • To just select the image, double click on the grouped layer (this will work exactly like grouping).

  • Once masked, the image can be resized/edited according to the aspect ratio.

  • The masked image can also be resized inside the mask using the resize slider and the pan.

  • The user can use the predefined shapes or upload their own shapes in svg or png format.

  • After uploading, their uploaded shapes will be available in your library shapes tab.

  • The user can upload a new shape or choose multiple shapes from the library.





    1. You have the option to blur and invert the Media's color.

      You can either slide the bar before every option or put a numeral value to change the settings.
  • Select the image to crop/clip-mask.

  • Select the shape from the crop and shapes panel in the styling panel.

  • After clip-masking is done, the clip-mask and the image will automatically become a group.

  • To just select the image, double click on the grouped layer (this will work exactly like grouping).

  • Once masked, the image can be resized/edited according to the aspect ratio.

  • The masked image can also be resized inside the mask using the resize slider and the pan.

  • The user can use the predefined shapes or upload their own shapes in svg or png format.

  • After uploading, their uploaded shapes will be available in your library shapes tab.

  • The user can upload a new shape or choose multiple shapes from the library.

  • Next up, we have the Style. Here, you can change the element's color, add a border, and make changes.

    1. You can change the background color of the media 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. At last, you can blur and invert the shape's color.

      You can either slide the bar before every option or put a numeral value to change the settings.
  • Border
    1. You can change the roundness of the border by putting a numeral value in the last box.
    2. You can customize the roundness of all borders to your preference
  • 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.

  • In layer, you have the option to change the opacity of the media