Image Placeholder
What visitors see while an image is still loading.
Images are crucial to your website’s user experience, and how they’re presented can significantly impact it.
Kalium wraps images in a placeholder container that can have custom style, which is visible before the image is loaded. This is an indicator that something is loading and you can use your own creativity to make the loading state of images as better as possible.
Optionally, you can add your own brand logo or custom icon as loading indicator.
To edit these options go to Appearance -> Customize -> General -> Image Placeholder
There you can choose between three types of loading types, the default is Plain Color:
Depending on the type of indicator you choose, relative options will be shown and here what they do:
Background - You can set any color, gradient or the dominant color of the image.
Loading Animation - a CSS loading indicator shown in the middle of image: Modern Circular, Ball Scale, Line Scale, Ball Pulse or Semi Circle Spin, with its own Loader Color.
Custom Image/Icon - The image you want to show as a loading indicator.
Both the animation and the custom icon share Alignment, Animation Icon Size, and a Padding that appears once Alignment is anything but centered.
Common Options
Apart from their type, each type of image placeholder will have a background which can be one of the following:
Plain color - Just as name explains it.
Gradient - Choose between two colors and set the angle and the type of gradient.
Dominant Image Color - This will assign custom color for every image based on their dominant color extracted using PHP to get the main color of the image.
Setting Custom Icon
Choose Custom Icon from Image Loading Placeholder Type
Click Custom Image/Icon box and select your loading indicator image
Set the desired Alignment inside box
Set Animation Icon Size for the image/icon
Last updated
Was this helpful?