Image Effects and Settings in Cargo Site

Images play a crucial role in making websites visually appealing and engaging for users. They help to establish a connection and leave a lasting impression. In this blog, let’s explore various image settings available for Cargo sites, including resizing, disabling zoom, rotation, borders, drop shadows, and making images draggable.

Before exploring different settings if you do not know how to add images in Cargo, check this blog

image effectsw and settings in cargo site

Table of Contents

Resize image in the Cargo Site

In Cargo, you have two easy ways to resize images. The first way is to simply click and drag the image’s size using the bottom-left arrow icon. Easy peasy!

The second method involves selecting the image first. You’ll notice three dots appear at the top left corner of the image. Click on these dots, and a pop-up window will appear with various options. Among them is the “Scale” option, where you can adjust the scale from 0 to 100.

There are three options within the scale setting: width, height, and fit. If you choose width or height and adjust the scale, it will affect the corresponding dimension of the image. Similarly, selecting “fit” will adjust the image size while maintaining its aspect ratio.

This method comes in handy when you want an image to fit perfectly within the browser viewport, regardless of its original aspect ratio or the width of its container.

Zoom Image in Cargo Site

When Image Zoom is activated in Cargo (accessible via Site Settings > Image Settings), clicking on an image or video triggers Zoom mode. This maximizes the image to fit the window size. You can adjust the size and positioning of the zoomed image in Quick View Settings (also found in Site Settings).

If you wish to exclude specific images or videos from being zoomed in, you can do so locally by right-clicking on the image and selecting “Disable Zoom”. Note that when an image or video is linked, the Image Zoom feature won’t activate.

To customize the style of navigation buttons while in zoomed-in mode, navigate to the CSS Editor and search for “:: part(slideshow-nav)”. There, you can tweak the appearance to your liking.

Add Image Caption in Cargo Site

You can easily add captions to images and videos in Cargo using the image settings menu. Simply right-click on an image or video, and select “Caption…”. This will insert a placeholder text, typically “Lorem ipsum…”.

Captions are styled based on the Caption text style, which you can customize in the Text Styles menu (accessible via the “Aa” icon in the right menu bar). You can apply different text styles to the caption, and even include text formatting like bold, italic, and links.

If you want to adjust the positioning of the caption relative to the image or video, you can do so in the CSS Editor (found at the bottom of Site Settings). Search for “.caption” to modify its display. Similarly, to tweak how captions appear in Quick View, search for “.quick-view .caption”.

Rotate image in the Cargo Site

To add a rotation effect in the Cargo Site, start by selecting the image you want to rotate. Then, click on the three-star icon at the top settings bar. This will open the effects option window. In the effects options, check the Rotation effect. Here, you’ll find two options:

Rotation: Specify how much you want to rotate the image.
Animate: Toggle this option to create a rotating animation effect for the image.

By adjusting these settings, you can easily add rotation effects to your images in Cargo Site, making them more dynamic and engaging.

Border and Border-radius in Cargo Site

To add a border and border radius to an image in the Cargo Site, follow these simple steps:

Select the image you want to modify.
Click on the three-star option at the top of the settings bar. This will open the effects window.
Expand the “Border” tab in the effects window.
Here, you’ll find four properties:
- Width: Adjust the width of the border.
- Color: Choose the color for the border.
- Radius: Set the border radius to control the curvature of the corners.
- Padding: Determine the amount of padding between the image and the border.

Customize these properties according to your preferences to add a border and border radius to your image, enhancing its appearance and visual appeal.

Drop-Shadow in Cargo Site

To add a drop shadow effect to an image in Cargo Site, here’s what you need to do:

Select the image you want to apply the drop shadow effect to.
Click on the three-star option at the top of the settings bar to open the effects window.
Expand the “Drop Shadow” tab in the effects window.
Within the “Drop Shadow” tab, you’ll find three properties:
- Offset: Adjust the distance and direction of the shadow from the image. Positive values move the shadow to the right and down, while negative values move it to the left and up.
- Blur: Control the amount of blurring applied to the shadow. Higher values result in a softer, more diffused shadow.
- Color: Choose the color for the drop shadow. You can select from a wide range of colors to match your design aesthetic.

Customize these properties according to your preferences to add a drop shadow effect to your image, giving it depth and dimension. Experiment with different settings to achieve the desired visual impact.

Blink,Eyeroll and Dragable in Cargo Site

To enable the Blink effect for an image in Cargo Site and make it animate with a blinking animation, follow these steps:

Expand the “Blink” tab in the effects window.
Check the “Blink” option to enable the blinking animation.

Once the Blink option is enabled, you’ll see two additional settings:

Speed: Adjust the speed of the blinking animation according to your preference.
Fade: Toggle this option to enable a fade animation along with the blinking effect.

Customize these settings to control the speed and fade behavior of the blinking animation for your image.

Global image settings in Cargo Site

In the example above, we applied effects to a single image. However, if you want to apply these effects to all images on your website at once, you can do so by accessing the site settings.

Navigate to the site settings and locate the “Image Settings” option. Expand it, and you’ll find all the options we discussed earlier. Adjusting these settings here will apply the effects to all images present on your website, saving you time and effort.