Adding a shadow to elements
Shadows are a powerful tool to enhance your website design by adding depth and contrast to the elements on the page.
By following the steps below, you will be able to activate and customize shadows for your website's elements.
Note: Currently, shadows can be applied to elements such as: Shape element, images, collection items and columns.
Open the settings of the element you need by clicking on the gear icon:
Tip: The screenshot above shows how to open the settings of the “Shape element“, and applying the shadow is done similarly by clicking on the 'Image settings' button.
Activate the Shadow option in the Style section of the settings:
You can then edit the appearance of the shadow with the following settings:
Shadow's X-axis (horizontal) position. Increase the number in this field to move the shadow to the right, and decrease it to move it to the left.
Shadow's Y-axis (vertical) position. Increase the value in this field to move the shadow up, and decrease the value to move it down.
Blur. Increasing the value of this field will make the shadow smoother.
Spread. The minimum shadow size from the element's borders is 1 pixel and the maximum is 500 pixels.
Color. You can either choose a color from your site's palette or specify your own.
Now you can add shadows to your collection elements. To do this, navigate to the Style tab by clicking on the settings of one of the elements:
Important: You can only add a shadow to collection items if a background has been set for them or if presets have been activated. If you selected the “Multicolor“ preset (a separate background for each item in the collection), the shadow will be applied only to items with a background set.
Tip: When you activate the shadow switch, shadows are automatically added to all cards in the collection that have a background.
Note: If you created a website using a template that already included shadows in the collection elements, the shadows applied according to this instruction will take precedence over them (they will be displayed instead of the old ones).
Similar to collection items, to apply a shadow to a column, open the settings in the upper right corner. There, you can add the necessary shadow settings under the Style tab.:
After all the settings, don't forget to publish the site so that the changes are displayed on the live site.
By following the steps below, you will be able to activate and customize shadows for your website's elements.
Note: Currently, shadows can be applied to elements such as: Shape element, images, collection items and columns.
Adding shadows to a shape element and images
Open the settings of the element you need by clicking on the gear icon:
Tip: The screenshot above shows how to open the settings of the “Shape element“, and applying the shadow is done similarly by clicking on the 'Image settings' button.
Activate the Shadow option in the Style section of the settings:
You can then edit the appearance of the shadow with the following settings:
Shadow's X-axis (horizontal) position. Increase the number in this field to move the shadow to the right, and decrease it to move it to the left.
Shadow's Y-axis (vertical) position. Increase the value in this field to move the shadow up, and decrease the value to move it down.
Blur. Increasing the value of this field will make the shadow smoother.
Spread. The minimum shadow size from the element's borders is 1 pixel and the maximum is 500 pixels.
Color. You can either choose a color from your site's palette or specify your own.
Adding a shadow to columns and collection items
Now you can add shadows to your collection elements. To do this, navigate to the Style tab by clicking on the settings of one of the elements:
Important: You can only add a shadow to collection items if a background has been set for them or if presets have been activated. If you selected the “Multicolor“ preset (a separate background for each item in the collection), the shadow will be applied only to items with a background set.
Tip: When you activate the shadow switch, shadows are automatically added to all cards in the collection that have a background.
Note: If you created a website using a template that already included shadows in the collection elements, the shadows applied according to this instruction will take precedence over them (they will be displayed instead of the old ones).
Similar to collection items, to apply a shadow to a column, open the settings in the upper right corner. There, you can add the necessary shadow settings under the Style tab.:
After all the settings, don't forget to publish the site so that the changes are displayed on the live site.
Updated on: 03/25/2024
Thank you!