Image slider

Please tell me how can I make an image slider similar to the one shown in the screenshot?

Attachments:

You must be logged in to view attached files.

Hello,

You can try to make such a slider with Revolution Slider, but we don’t have exact step-by-step instructions on how to make it.

Kind Regards
XTemos Studio

Is it possible to do it using “WPBakery Page Builder”? For example, from this ready-made layout: https://woodmart.xtemos.com/blog/woodmart_element/bikes-showcase-hotspots/

Hello,

We did not test element Hotspots on Woodmart slider and we cannot guarantee that it will work correctly.

Kind Regards
XTemos Studio

On the main page of the site I want to use this template: https://woodmart.xtemos.com/blog/woodmart_element/bikes-showcase-hotspots/. My picture does not become full width. What could be the problem?

Attachments:

You must be logged in to view attached files.

The element you sent consists of two images: one for the background image (full width) and bike with transparent background for the hotspot element.

Please tell me how I can make my picture full width?

You need to enable stretch row option with WPBakery page builder while editing this specific row.

I got the text on top, and the picture below. Is it possible to overlay text on a picture?

Attachments:

You must be logged in to view attached files.

You can try to use negative margin bottom for that element and move it above that image.

The text constantly goes under the picture. And how to make it over the picture?

Attachments:

You must be logged in to view attached files.

Try to add z-index-10 class to text element custom class field and add the following custom code to the Global Custom CSS area in theme settings:

.z-index-10 {
	position: relative;
}

Regards

Thank! Now I want to add a button under the text. I added a button, but it is not located where I would like, how can I fix it?

Attachments:

You must be logged in to view attached files.

In this case, you need to put these elements to one row and apply negative margin for the row, not for each element separately.

I can’t move the finished block down. I increase the negative margin, the picture is cropped. I need to move only the text down.

Attachments:

You must be logged in to view attached files.

You need to increase the top margin at the same time.

Thank! When you increase or decrease, the picture remains unchanged, and the text moves to the right or left. Can we make the text and picture increase and decrease proportionally?

Attachments:

You must be logged in to view attached files.

I guess that is not a solution since the top row overlaps your hotspots and you can actually click them.

That was my next question. Is it possible to free hot spots? For example, changing the size of the top row so that it does not overlap them?

Try to use the following custom CSS for this

.woodmart-image-hotspot {
    z-index: 10;
}

Thank! And what about the question: # 146716?

Sorry, but it is not possible the text and picture increase and decrease proportionally in WPBakery page builder.

I need that when changing the screen resolution, the text does not move left or right, but is in its place. How it is implemented here on this site: https://www.grandline.ru/. This can be done?

It seems that you have set stretch row option for the row that contains texts. Try to make it boxed, not full width.

Thank! The problem with the text is resolved. Now I need that when changing the screen resolution, the picture does not change its resolution to the screen resolution, but remains the specified size at any resolution. How it is implemented here on this site: https://www.grandline.ru/. It can be done?

You will need to disable stretch row for that row as well. You can increase it adding negative margins from left and right as on your website example.

Thank! After I added the following code: # 146853, I had a problem with displaying hotspots on another block. Some hot spots are located above the pop-up window. How to fix it?

Attachments:

You must be logged in to view attached files.

Try to add Extra class name “custom-hotspot” to your house image hotspot element (https://prnt.sc/pcub19) and replace previous custom CSS code with this one:

.custom-hotspot .woodmart-image-hotspot {
    z-index: 10;
}

Regards

Thank! Please tell me, how can I make the product name in the pop-up window next to the hot spot of the same color as on the product card?

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS area in Theme Settings.

body .hotspot-content-title a:hover {
	color: rgba(51,51,51,.7);
}

Regards

[Author]

Posts