Sliding header | Promotional campaign

Hello,

I would like to know if it is possible to add a sliding header (a carousel in the header with multiple messages) that contains for example several promotional campaign messages. I have looked the documentation, but I have not found anything.

Best,
Arthur

Hello,

You can create a slider (narrow row) https://xtemos.com/docs-cat/woodmart-slider/?theme=woodmart

Then insert the slider into the HTML block: https://xtemos.com/docs-topic/html-blocks-usage/

Then you can add this HTML block to Header.

If you have any questions please feel free to contact us.

Best Regards

Hello,

Thank you for the information but I have not succeeded in making it work.

You have some screenshots attached
– Html_block: the slider that I have configured
– Header config: the configuration of the header
– header page.: I have put the custom header on this page (https://chaleur-naturelle.fr/bien-choisir-lemplacement-des-thermostats-et-des-radiateurs-a-inertie-seche/)

Moreover, the slider from the Html Block is not looking attractive with preview (I do not want to display the arrow and I want to take the full width of the page)

So 2 problems
1/ the new header is not displayed
2/ the preview is not looking attractive

I would like something similar to this website : https://talkadecor.fr/

Thank you for your answers!
Arthur

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

You will find it below all the info. A custom header has been added on one page but it is not looking the right way (you have the screenshot attached)

– page : https://chaleur-naturelle.fr/bien-choisir-lemplacement-des-thermostats-et-des-radiateurs-a-inertie-seche/
– header: header111 (copy1)
-slider name: banner
– I would like the top header to be like the one on the following website : https://talkadecor.fr/

Attachments:

You must be logged in to view attached files.

Hello,

Could you kindly provide the correct login URL? wp-admin does not work.

Best Regards

here you have

Hello,

Please check these screens: https://gyazo.com/3fed1a51a19fe5f478a00e059b3804fe and https://gyazo.com/77a07a58bcfd96be3539cb3f310bb73a

You need to disable navigation in the Banner slider, decrease its height and increase the height of the top header row.

If you have any questions please feel free to contact us.

Best Regards

Thank you Elise, I have checked the link

Now there is an additional problem. Only on out of the three Slides I have created in the slider “Banner” is displayed. And it is not displayed correctly.

I would like the slider to be 33px. I have configured that in the header section. For the slides, the text is in white and there is a background color.

Additionally, the space between the top bar and the main header is too big. I do not know how to reduce it. If I reduce the number of px in row height in the header section, the slider is no longer visible. A screenshot is attached.

Here are the information:
– Page for the header : https://chaleur-naturelle.fr/bien-choisir-lemplacement-des-thermostats-et-des-radiateurs-a-inertie-seche/
– 111Header (Copy2) ->name of the header
– banner -> name of the slider

Could you help me with these issues?

Arthur

Attachments:

You must be logged in to view attached files.

Hello,

Please try to disable the top row and insert the slider into Header banner, you can activate it in the Theme Settings > General > Header banner.

If you have any questions please feel free to contact us.

Best Regards

Hello,

This is not solving the problem.

The problem is coming from the height of the slider (at least 100px ->screenshot attached). If we could manage to reduce it, this would solve the problem I think

I have tested so many configuration and I am unable to display this banner correctly. When I’m pushing the content to the bottom of the slider, it does not display correctly
– >there is a white space above the top header and if I reduce the number of pixel on the top bar, the slider is starting to crop the main header

Can you help me with that? It is a very straightforward thing to do but I cannot find any solution.

The information
– URL for the test : https://chaleur-naturelle.fr/bien-choisir-lemplacement-des-thermostats-et-des-radiateurs-a-inertie-seche/
– header for the test: 111Header (Copy2)
– slider for the test : accueil-texte
– HTML Block: banner
+ You have the loggin information in the message above

Thank you for your assistance!

Arthur

Attachments:

You must be logged in to view attached files.

Hello,

UPDATE

I have managed to make something that is visually good by doing some tests and tweaking some parameters

1/ Now I have an other problem. Only the first slide of the five slide is displayed (all the slides are similar). The four other slide do not display anything (see screenshots)

2/ The header is too big because of the margin I have added.

Here is a loom video to explain these 2 problems : https://www.loom.com/share/c7284de46c10481caef2603f17a8439c

The information:
– the loggin information are in the previous message
– URL for the test : https://chaleur-naturelle.fr/bien-choisir-lemplacement-des-thermostats-et-des-radiateurs-a-inertie-seche/
– header for the test: 111Header (v1)
– slider for the test : Top Slider
– HTML Block: Top Slider

I would appreciate if you could give me a solution for these two issues

Thank you
Arthur

Hello,

1. you need to disable full-width for the rows containing the slider and slides.

2. You will have to reduce the padding, no option to solve in any other way.

Initially, the Header builder is not designed for slider showing, the solution I described above is a workaround.

If you have any questions please feel free to contact us.

Best Regards

Thank you for your answer

1. I have disabled full-width in the slider section (see screenshot). But only one of the slide is displayed

– slider for the test : Top Slider
– HTML Block: Top Slider

2. I have removed the padding in the slide section. It seems to work

Attachments:

You must be logged in to view attached files.

Ok I have found why the slides were not displayed! It was displayed because I have stretched the row (now, I have put the default option and it is working).

The only problem that I currently have is that there is a white space at the left of the screen (see screenshot “white-space”). if I stretch the row, there is no more white space but the slides are disappearing.

Do you have a solution?

Info:
– slider for the test : Top Slider
– HTML Block: Top Slider

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

I do not see a slider in the header now.

Best Regards

It is on the url where I test it…

-URL for test : https://chaleur-naturelle.fr/bien-choisir-lemplacement-des-thermostats-et-des-radiateurs-a-inertie-seche/
– slider for the test : Top Slider
– HTML Block: Top Slider

I’m waiting for your answer as I would like to implement that asap

Thank you

Arthur

Moreover, I have tried in the not logged in version, and it does not work at ll

Hello,

Please remove the margins or paddings, I see the black background is limited by inner gaps: https://prnt.sc/N3Mvg0jvtRK_

If you have any questions please feel free to contact us.

Best Regards

Thank you for your answer! I have managed to remove it.

But now I have another problem. On mobile and tablet, only a black background is displayed and there is no text! (see screenshot)

Do you have a suggestion?

Attachments:

You must be logged in to view attached files.

And on desktop, there is a stability. Sometimes it displays well but when you navigate on the website or refresh the page, sometimes, it is completely messy (see screenshot)

Attachments:

You must be logged in to view attached files.

Hello,

Please test how the slider works on any page, most likely it is a conflict or other plugins or an incorrect slider configuration. If you see problems on the page, check this manual to configure the slider properly: https://xtemos.com/docs-cat/woodmart-slider/?theme=woodmart

If you have any questions please feel free to contact us.

Best Regards

I have already read the manual.

This is very VERY confusing for me. Why such a minor implementation is taking so much time ?

I have tried hundred of configuration. When I have managed to make it work on one page, it does not work on the other pages and I do not know why.

header for the test: 111Header (v1)

Best,
Arthur

Hi,

As an alternative, you can use “Infobox Carousel” element to make a text carousel, which may be more simple to create. First, you need to add “Infobox Carousel” with the following carousel settings (https://prnt.sc/3g5_ruhbQpy_), and add to it infobox items with only one filled content field (https://prnt.sc/Q5BDMXGg_WIB). You can also enable carousel autoplay if needed.

As an example, we create a demo HTML-block with such an element (https://prnt.sc/RaIdvyhRYmpj) for you, where you can check how it works (https://gyazo.com/f24f504c52f11cdc088684115ba45880).

Kind Regards

Hello,

Thank you for the information!

On the logged in version, it works perfectly, but it does not wok correctly when I am not logged in. There is a grey background and the top bar is way too big once the user scroll down.

you have a video : https://www.loom.com/share/61fd3e2c73d743988e14f0914750d09b

URL for the test : https://chaleur-naturelle.fr/bien-choisir-lemplacement-des-thermostats-et-des-radiateurs-a-inertie-seche/
header for the test : 111Header (v2)
HTML block: infobox demo text carousel

thank you for your help!

Arthur

Hi,

1. You need to remove all custom tags and styles that you have applied to the infobox content and leave only plain text (screenshot https://prnt.sc/WuTiZaKWNGg0).
2. Set negative margin “-30px” to the infobox carousel element to compensate carousel spacing (screenshot https://prnt.sc/xk6xum1YcSQC).
3. Disable JS starch row option in row and leave only CSS one (screenshot https://prnt.sc/jPWLV4mFul7c)
4. If you want to change background of the carousel, try to use background controls for header top bar in which info box carousel is placed. (screenshot https://prnt.sc/wkfnJnsVtQDA)

Kind Regards

Ok thank you so much! I have applied everything.

But it is still not fully working.
1/ on desktop, the text is not center because the info box is not fully stretched (see “text-not-center)

2/ on smartphone and tablet, no text is displayed (see screenshot “tablet” and “smartphone”)

Best,
Arthur

Attachments:

You must be logged in to view attached files.

Hi,

1. Initially, the stretch row is supposed to be used only on the page content, and not on site’s header. To fix the HTML block stretch row position in the header, try to use the following custom code

.whb-flex-row .wd-section-stretch-content-no-pd {
	--wd-row-spacing: 0.001px;
	left: calc((50% - 50vw + var(--wd-sticky-nav-w) / 2 + var(--wd-scroll-w) / 2) + var(--wd-row-spacing) - 1.4vw)
}

2. You added HTML-block with text carousel only to the desktop header, but the mobile header top bar remained empty (https://gyazo.com/884461f5842ae5f849b735a1a6b22de9). All elements that you added to the desktop header are visible only on the desktop, and the mobile header needs to be edited separately. Also, if your carousel text is wrapped in two lines, the mobile header top bar need to be additionally adjusted.

As an alternative, rather than use the header top bar, you can use the header banner option (https://prnt.sc/DksJwjLo3eox) that is specially created to show promo information over the header.

Kind Regards

Hello,

Thank you for your help. I have applied everything.

On the phone, the content is either cropped or not there.

On the desktop, there is a bug on the homepage, when i apply the top bar everywhere

Here is the bug for the desktop in video : https://www.loom.com/share/a2ac03f53ad54f9ebc5e6c7b3479eaf5

[Author]

Posts