Are you looking to add some visual interest to your website? If so, consider using Elementor’s “Image Box” widget. The image box widget allows you to create a visually appealing box that displays an image, title and description text all in one place. This versatile widget can be used to showcase products, highlight employees, or simply draw attention to specific areas of your site. With Elementor’s full-range of customization options, you can ensure that your image box is tailored to match your site’s overall design. Whether you’re creating a product page, homepage or landing page, image boxes can help improve the user engagement and enhance the overall aesthetics of your site. In this blog, we will walk you through the process of adding an image box with Elementor and customizing it to match your website’s design. Let’s get started!
Adding an Image Box with Elementor
Implementing Elementor’s image box widget into your site is a simple process that requires no prior design experience. In just a few steps, you can create an engaging and appealing element that can help you showcase important information and draw in the attention of your site viewers. Let’s take a look at how to add an image box using Elementor.
- Open the page in Elementor that you want to edit.
- In Elementor’s page builder, search “Image Box”.
- Drag and drop the “Image Box” widget into your desired section.
- Once you are satisfied with the location, be sure to update your changes.
Now that you have added an image box to your site it’s time for the fun part, customization. In the next section we will dive into how you can customize your image box to match your website.
Customizing an Image Box with Elementor
Once you have Elementor’s default image box in it’s rightful spot, it’s time to match it to your website. Luckily, Elementor has just about every customization option you can think of. Whether you want to change the image size or the title’s font, Elementor makes all of these feasible with just a few clicks. Let’s jump into how you can customize an image box to your liking.
Content
- Image: Select your image.
- Image Size: Adjust the image size.
- Title: Add your image title here.
- Description: Add in your image description text here.
- Link: If you would like to link your image box to something, add in the URL here. You can select how you want the link to open, whether it be in a new window or the same.
- Image Position: Set the position of your image. Choose to have your image to the left, top or right of the title and description.
- Title HTML Tag: Set the HTML tag for your image box’s title.
Style
Image
- Spacing: Adjust the spacing between the image and text.
- Width: Adjust the image’s width. Scale from 0 to 100%. This is a great way to change your image size.
- Border Type: Set a border type if desired. Choose between none, solid, double, dotted, dashed or grooved.
- Border Radius: If a border was selected, adjust it’s radius here. This is where you can control the border’s roundness.
- Hover Animation: Add a hover animation to your image. This is useful for catching the attention of readers. Choose from a variety of animations such as grow, shrink, pulse and many more.
- CSS Filters: Adjust your image’s style by using CSS filters. Edit the image’s brightness, blur, contrast and more for both the normal and hover states.
- Opacity: Adjust and control the opacity of the image in both the normal and hover states.
- Transition Duration: Control the speed of the hover animation.
Content
- Alignment: Align your image box content to the left, center, right or justified.
- Vertical Alignment: Align the content to the top, middle or bottom of the image box.
- Title & Description
- Spacing: Adjust and control the spacing between your title and description.
- Color: Set the color of your title and description text.
- Typography: Adjust the typography settings of your title and description text.
- Text Stroke: Add a text stroke to your title. This is good for adding an outline around your text.
- Text Shadow: Add text shadows to both your title and description text if desired.
Conclusion
In conclusion, Elementor’s image box widget is a versatile tool that can help showcase images and important information in a visually appealing manner. With the wide variety of customization options and simplicity of Elementor, you can create engaging content in the matter of no time. Whether you want to highlight your products or great employees, Elementor’s image box widget is the perfect tool to do so. By utilizing Elementor’s image box widget, you can greatly enhance the overall appeal of your website and engage visitors with compelling content. It doesn’t matter if you’re a seasoned web designer or just getting started, Elementor’s image box widget can help you bring your vision to life.
