Add a Drop Shadow to Your Images

Add a Drop Shadow to Your Images

Adding a drop shadow to your images gives your image depth and perspective. It makes it look like the image is popping right out of the screen!

Images without a drop shadow effect:

Screen_Shot_2019-03-20_at_11.35.11_AM.png

Images with a shadow drop effect:

Screen_Shot_2019-03-20_at_11.34.55_AM.png

ezgif.com-video-to-gif_1_.gif

To add a drop shadow to your images:

1. Select the Design tool in the gray navigation bar.

2. Click on the image within the website preview that you'd like to add a drop shadow to.

3. On the right-hand side of the website preview, make sure you are in the "Page" tab.

Screen_Shot_2019-03-20_at_11.09.37_AM.png

4. Once in the Page tab, scroll down until you see the Image(s) dropdown menu.

Screen_Shot_2019-03-20_at_11.10.37_AM.png

5. Select the "Add drop shadow" box by clicking on it, and you will see more stylzing options appear.

Screen_Shot_2019-03-20_at_11.04.28_AM.png

X offset - Change where the blur appears on the X axis, or from left to right.

Y offset - Change where the blue appears on the Y axis, or up and down.

Note: These numbers are only from 0 - 100.

Color - Change the color and opacity of the dropdown in this pop-up.

Screen_Shot_2019-03-20_at_11.14.10_AM.png

Blur - Change the lining of the blur effect, making it blend more smoothly or giving it a harsher edge.

Spread - Change the amount of space the drop shadow takes up (expand or make it smaller).

6. Once you make the drop shadow the way you want, click the green Save button, and then the green Publish button to take your changes live!

If you are a fan of the old default drop shadow,  you can achieve that same look by entering in these numbers:

Screen_Shot_2019-03-26_at_9.46.32_AM.png

X offset - 4

Y offset - 2

Color - As you would prefer, but set the opacity to 50

Blur - 6

Spread - 1

That will help you achieve the old default drop shadow look!

    • Related Articles

    • Add Overlay Text or Hover Effects to Your Images

      Craft a more beautiful image block or image gallery with our stylized overlay and hover effects. Image effects allow you to display content titles/descriptions and link to other pages on your site. Click Design at the top of your liveBooks dashboard, ...
    • Add an Image/Image Gallery

      Add an Image or Image Gallery block to your page by using one of our preset content blocks. 1. Select Content in the navbar 2. Select the page you want to add an image to 2. While on the page, click on the green (+) icon that appears between the ...
    • Choose the Number of Visible Images on Image Gallery (Classic Slideshow)

      One unique image gallery feature is our "Visible Items" option, you can use it to display 1, 2, or 3 images per gallery slide. 1. Select Design from the navbar and navigate to the page that contains your Image Gallery 2. Select the Page tab at the ...
    • Change an Image on Your Website

      Within your liveBooks dashboard, you can swap out images on the fly. You can change images in both the Content and Design sections of the platform. From the Design view From your main dashboard view, click the design view. Select the page you wish to ...
    • Resize an Image

      Here is how to make your image smaller or larger on your page: 1. Select Content 2. Select the page that contains your image 3. Select Design this page in the sidebar on the right 4. Select your image in the Design panel on the right 5. Under image, ...