fbpx

Tutorial

Elementor Image Box – Scroll Description

Uses Plugins

Elementor Free
Elementor PRO

Description

This tutorial uses a standard Elementor Image Box Widget with some CSS to make the “Description” scrollable for long text. Initially, the overflow text is hidden. When hovering on the widget, a styled scrollbar appears.

This is great for keeping the widget heights the same while allowing for longer descriptions.

1

Image Box Widgets

  1. Drag an Image Box Widget to the editor
  2. Style it how you like it
  3. Add the class "image-box-description-scroll" to the Widget
  4. Add some long text to the description
  5. Duplicate the Column a couple of times
2

Styles

Copy and paste the CSS code below, to where you prefer.

I normally work in an HTML Widget on the page while developing. When complete I move it to Site Settings -> Custom CSS.

Note: if you use WP Customize or an HTML Widget, you need to wrap the code in <style> </style>

3

Customizing Individual Instance

The following variables may be customized for each instance;

--height: 300px;
--track-color: green;
--thumb-color: red;
--track-width: 7px;
--ff-track-width: thin;
--right-padd-for-scroll: 7px;

On the Widget - Advanced -> Attributes - Set the style attribute with the variable you want to override.

e.g. to make the --track-color: orange and --thumb-color: blue:
style|--track-color: orange; --thumb-color: blue

Note: after "style|" the variables are standard CSS you would see on any HTML style attribute.

Code (click to copy)

CSS Code (css)

If you have Elementor Free:

  1. You could paste the code into an HTML Widget on the page you want to apply it to
  2. You could paste into Customize -> Additional CSS

If you have Elementor PRO:

  1. You could do either of the above
  2. You could paste it into Page Settings -> Advanced -> Custom CSS  - if only used on the page
  3. You could paste it into Site Settings -> Custom CSS to use Site-Wide
.image-box-description-scroll{
    --height: 300px;
--track-color: green;
--thumb-color: red;
--track-width: 7px;
--ff-track-width: thin;
--right-padd-for-scroll: 7px;
}

/* Description Container */
.image-box-description-scroll .elementor-image-box-description{
height: var(--height);
overflow: hidden;
padding-right: var(--right-padd-for-scroll); /* allow for scrollbar */
padding-top: 20px; /* allow for tag */
position: relative;
}

.image-box-description-scroll:hover .elementor-image-box-description{
overflow-y: scroll;

/* FF Scrollbar */
scrollbar-color: var(--thumb-color) var(--track-color);
scrollbar-width: var(--ff-track-width);
padding-right: 2px;
background: #ffffff15;
}

/* Scroll Tag */
.image-box-description-scroll .elementor-image-box-description:before{
    content: "SCROLL ME";
    font-size: .7rem;
    padding:3px;
    line-height: 1;
    color: white;
    position: absolute;
    top:0px;
    left:0;
    width: 100%;
    text-align: center;
    z-index: 99;
    background: #555;
    border-radius: 5px
    
}

/* WebKit Scrollbar */
.image-box-description-scroll .elementor-image-box-description::-webkit-scrollbar{
width: var(--track-width);
}
.image-box-description-scroll .elementor-image-box-description::-webkit-scrollbar-track{
background: var(--track-color);
}
.image-box-description-scroll .elementor-image-box-description::-webkit-scrollbar-thumb{
background: var(--thumb-color);
}