Completely Free Course

Connect with Facebook

or

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free Course

Connect with Facebook

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Module 2: Customize The Design

How To Add Borders And Box Shadows In Elementor

Action Plan

Step 1: Add Borders And Box Shadows To Columns


Watch Our Video Tutorial For This Step

This video will walk you through how to add and configure column borders and box shadows.

Video Summary

  • In the Elementor editor go to Edit Column > Style > Border (0:22)
  • Choose a border type such as solid, double, dotted, or dashed (0:39)
  • Set the border width (0:53)
  • Choose a border color (0:59)
  • Choose the border radius and learn how to link an unlink values (1:30)
  • Add a box shadow (1:50)
  • Adjust the default RGBA box shadow color (2:17)
  • Adjust the horizontal, vertical, blur, and spread settings (2:39)
  • Create a corner shadow effect (2:50)
  • Click the “Back to Default” icon to turn off the box shadow (3:05)
  • Position the shadow on the inside of the column (3:52)
  • Dark columns and dark sections will require darker shadows (4:04)
  • We will discuss border hover animations in the next tutorial (4:48)

(I added a border and box shadow to a column in Elementor)

Step 2: Add Borders And Box Shadows To Widgets


Watch Our Video Tutorial For This Step

This video will walk you through how to add and configure borders and box shadows for different widgets such as the image widget and button widget.

Video Summary

  • In the Elementor editor go to Edit Widget > Style > Border (0:28)
  • Choose a border type such as solid, double, dotted, or dashed (0:43)
  • Set the border width (0:49)
  • Choose a border color (0:52)
  • Blue pencil icon means the box shadow is turned on (1:00)
  • Click the “Back to Default” icon to turn off the box shadow (1:11)
  • For some widgets, the border style settings are located in the “Advanced” tab instead of the “Style” tab (1:38)
  • Use offset shadows to make your 2D image look more three dimensional (2:56)
  • Sections with dark backgrounds will require a darker shadow (4:05)

(I added a border and box shadow to a widget in Elementor)

Continue To The Next Tutorial Below

Module 2

Customize The Design

Module 2 Progress
0

Your Achievements

You have earned 0 badges

How Can This Course Be Free?

Our course is 100% free forever because of our special partnerships with SiteGround Hosting and Elementor Pro.