Adding visual effects to containers can significantly improve the appearance of a webpage. One such design feature is the box shadow, which creates a shadow around a container and makes the element stand out from the background. Box shadows help add depth, improve visual hierarchy, and make sections of a webpage look more attractive.
Elementor provides built-in options that allow users to easily add box shadows to containers without writing any code. By using the container style settings, you can control the shadow color, blur level, spread, and shadow position.
In this guide, you will learn how to add a box shadow in a container while editing a webpage using Elementor on a WordPress website.
Opening Elementor While Editing a Webpage
Before adding a box shadow to a container, you first need to open the Elementor editor.
When you open a webpage in Elementor, the editing interface appears with a live preview of the page in the center of the screen. On the left side of the screen, the Elementor toolbar contains different widgets and design settings.
In the center of the screen, you will notice a plus icon (+). This icon is used to add a container or section to the webpage.
To begin designing a container where the box shadow will be applied, you need to click this plus icon.
Creating a Container in Elementor
Containers are used to organize content such as images, text, buttons, and other elements inside a webpage layout.
Step 1: Click the Plus Icon
Click the plus icon displayed in the center of the screen.
Once clicked, Elementor asks you to choose the layout type for the container.
Step 2: Select Flexbox Layout
Elementor provides layout options such as Flexbox and Grid.
For this example, select Flexbox.
Flexbox containers allow flexible arrangement of elements and are widely used for modern webpage layouts.
Step 3: Choose the Container Structure
After selecting Flexbox, Elementor displays several structure options.
Select the direction column structure.
Once selected, a blank container will appear on the webpage.
Editing the Container
After creating the container, you need to open the container settings to apply styling.
Step 1: Click the Edit Container Icon
Above the container, you will see a six dots icon.
This icon represents the Edit Container option.
Click on the six dots icon to open the container settings.
Once clicked, the container settings appear in the left-side toolbar.
Understanding Container Settings
Inside the container settings panel, Elementor provides three main sections:
- Layout
- Style
- Advanced
Each section controls a different aspect of the container.
- Layout settings control container size, alignment, and structure.
- Style settings control visual appearance such as background images, colors, and shadows.
- Advanced settings provide additional customization options.
To add a box shadow, you need to work inside the Style settings.
Adjusting the Container Height
Before adding the box shadow, it may be useful to increase the container height so that the container is clearly visible.
Step 1: Open Layout Settings
Click on the Layout tab in the container settings.
Step 2: Increase the Height
Inside the container settings, increase the container height.
Once the height is increased, the container becomes larger and easier to style.
Adding a Background Image to the Container
To better demonstrate the box shadow effect, you can add a background image to the container.
Step 1: Open Style Settings
Click the Style tab in the container settings.
Step 2: Go to Background Settings
Inside the Style tab, open the Background section.
Step 3: Select Background Type
Choose Classic as the background type.
Step 4: Choose an Image
Click the Choose Image button.
The WordPress media library will open.
From the media library, select any image and click Select.
Once selected, the image will appear as the background of the container.
Adjusting Background Display Size
After adding the background image, you need to adjust the display size so the image appears properly.
Inside the background settings, locate the Display Size option.
Change the display size to Cover.
The Cover option ensures that the image covers the entire container area.
Opening Border Settings
After adding the background image, you can now add the box shadow.
Inside the Style settings, locate the Border section.
The Border section includes options for:
- Border type
- Border width
- Border color
- Box shadow
To add the shadow effect, you need to open the Box Shadow settings.
Adding Box Shadow
Inside the Border section, you will see the Box Shadow option.
Next to the Box Shadow label, you will see an edit icon.
Click the edit icon to activate the box shadow settings.
Once activated, additional settings will appear that allow you to customize the shadow.
Choosing the Shadow Color
The first option available in the box shadow settings is the shadow color.
You can choose any color from the color palette.
For example:
- Black
- Red
- White
- Any custom color
Many designers use black with reduced transparency to create a soft shadow effect.
You can adjust the transparency using the opacity slider in the color palette.
Adjusting Horizontal and Vertical Shadow
Elementor allows you to control the direction of the shadow using horizontal and vertical offset settings.
Horizontal Shadow
The horizontal shadow controls whether the shadow moves left or right.
Increasing the horizontal value moves the shadow sideways.
Vertical Shadow
The vertical shadow controls whether the shadow moves upward or downward.
Increasing the vertical value moves the shadow downward.
By adjusting these values, you can control where the shadow appears around the container.
Adjusting Shadow Blur
The blur option controls how soft or sharp the shadow appears.
A higher blur value creates a softer shadow.
A lower blur value creates a sharper shadow.
Soft shadows usually look more natural in modern web design.
Adjusting Shadow Spread
The spread setting controls how large the shadow area becomes.
Increasing the spread expands the shadow around the container.
Reducing the spread keeps the shadow closer to the container edges.
This setting helps control the overall intensity of the shadow.
Choosing Shadow Position
Elementor also allows you to choose the position of the box shadow.
Two position options are available:
- Outline
- Insert
Outline Position
When the shadow position is set to Outline, the shadow appears outside the container.
This is the most common box shadow style used in website design.
Insert Position
When the shadow position is set to Insert, the shadow appears inside the container.
This creates an inner shadow effect inside the image or container.
You can switch between these options depending on your design preference.
Customizing Shadow Appearance
You can experiment with different settings to achieve the desired shadow style.
For example:
- Change the shadow color to red
- Adjust the blur and spread
- Modify the horizontal and vertical offsets
By combining these settings, you can create different shadow styles for your containers.
Previewing the Box Shadow Effect
After adjusting the box shadow settings, you will notice the shadow appearing around the container.
If the Outline position is selected, the shadow appears around the outside of the container.
If the Insert position is selected, the shadow appears inside the container border.
This effect helps create a sense of depth and makes the container visually stand out.
Benefits of Using Box Shadow in Containers
Adding box shadows to containers offers several design advantages.
Some benefits include:
- Improving visual depth
- Highlighting important sections
- Creating modern UI effects
- Making containers stand out from the background
- Enhancing overall website design
Box shadows are commonly used in cards, content boxes, feature sections, and call-to-action areas.
Conclusion
Adding a box shadow to a container in Elementor is a simple process that helps enhance the visual appearance of your website.
You start by creating a container using the plus icon and selecting a Flexbox layout. After creating the container, you edit it using the six dots icon and open the container settings.
Inside the Style tab, you can add a background image and then open the Border section to access the box shadow settings. From there, you can choose the shadow color and adjust horizontal offset, vertical offset, blur, spread, and position.
Elementor allows you to choose between outline shadows and inner shadows depending on your design needs.
By adjusting these settings, you can easily create attractive box shadow effects for containers while designing webpages in Elementor on a WordPress website.
Related Posts
