Promo Banner Element

Hi, I wanted to create a promo banner, May I know how to make it stretch to full screen?

My current image has a small space at left and right side of the screen.

Please advise, thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Please try this custom CSS:

.woodmart-promo-popup {
    max-width: 100%!important; 
}

Best Regards

Hi, I am creating two promo banner elements, there is a gap between these two, could you help me to take a look at the setting?

Please advise, thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Enter your HTML block, and edit each row, column and inner element as shown http://prntscr.com/jnqs2z navigate to Design options and set zero in the margin, padding, border like this: http://prntscr.com/jnqszf

Make sure this line is not part of the image in the process of cropping.

Best Regards

Hi, I have edit the design options and the setting (row, column, inner element) to set zero in the margin, padding, border already, but the outcome is still the same and now the gap even become bigger. This gap is not from the images.

Appreciate your help to log in to my backend and help me to check as I had tried many times on the setting zero on the setting.

Please advise, thanks.

Attachments:

You must be logged in to view attached files.

You still didn’t put padding top 0 for each column containing your banners https://gyazo.com/170bffdad97f6a169878ad7fa921e41a

Hi, Now I set all 0px in the setting and the gap still there.

Please advise, thanks.

Try to set content position to “Top” for all rows with banners as well https://prnt.sc/jo0qi4

Hi,

1. I have 8 promo banners added to the page. However, it shows only 1 promo banner when my screen size is 767px x 368px. (Attached: 767px x 368px.jpg)

2. All the Promo Banner’s banner link is empty, However, the below promo banners have linked to http://%7C%7C%7C/ when click on it. (Attached: empty-link.jpg)

Promo banners linked to http://%7C%7C%7C/
Leather Passport Cover
Leather Note Book
Leather Mousepad
Leather Keychain

Please advise, thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Enter your page editing mode and check all the columns http://prntscr.com/jqabw2 You have disabled showing the column on mobile and sometimes on the table. That is why you see one from eight.

Set the ling to each banner: http://prntscr.com/jqadqh

Best Regards

Hi,

1. When the screen is 944px x 387px, the promo banner-Leather Passport Cover will show alone and the rest of the promo banner will align at bottom of it. (Attached: content.png)
May I know how can I align all these banners showing in a same row across all the screen size? (Attached: ideal-alignment.png)
Promo Banner: Leather Passport Cover, Leather Coaster, Leather Pen Case, Leather Cable Organiser, Leather Note Book, Leather Mousepad, Leather Keychain.

2. Promo Banner – Leather Passport Cover
The below content is not showing when the screen size is 1199px x 387px and below.
“Great travel essentials to keep your passport save.”
May I know how can I set it to appear? (Attached: no-content.png)

3. If I want to set no link to these promo banners, how can I do so?
As I already delete all the link from the setting, However, the below promo banners is still linked to http://%7C%7C%7C/ when click on it.

Promo banners linked to http://%7C%7C%7C/
Leather Passport Cover
Leather Note Book
Leather Mousepad
Leather Keychain

Please advise, thanks.

Attachments:

You must be logged in to view attached files.

Hello,

You have created a grid consisting of rows and columns.

Here is your grid and the order in which you will see your banners on mobile http://prntscr.com/jqcjb3 change the grid as per your needs.

You have set the different visibility of columns http://prntscr.com/jqabw2 check each column and make them all visible on all the devices.

Next, enter to the content of banner and remove classes which limit visibility http://prntscr.com/jqcl9y

Set the ling to each banner: http://prntscr.com/jqadqh You can choose from the drop-down or inser any external link.

Best Regards

Hi,

1. Promo Banner Rows and Columns
I am actually adopted this promo banner layout from the demo ( https://woodmart.xtemos.com/demo-furniture/demo/furniture/ ). But the layout looks fine across to all the screen’s width size.

Could you explain more on the “grid consisting of rows and columns”?
When the screen’s width size at 576px to 743px, the promo banner-Leather Passport Cover will show alone.

Please advise how can I make my promo banner’s layout same as the demo.

2. Promo Banner Link
Sorry not sure I understand your comment correctly. I know how to set a link to a promo banner. My intention is I do not want any of my promo banner link to any page.

However, there are 4 promo banners(Shown below) has a weird link to http://%7C%7C%7C/ when click on it. FYI, I do not set this link to the promo banners and It just came out itself. Do you know how can I delete the weird link as it is not showing any place in the setting?

Promo banners which linked to >>>> http://%7C%7C%7C/
Leather Passport Cover
Leather Note Book
Leather Mousepad
Leather Keychain

Please advise, thanks.

Hello,

Here is the tutorial how to manage Responsive Settings of columns: https://kb.wpbakery.com/docs/learning-more/responsive-settings/

I have hovered each your banner I do not see any links. Please provide the screen where the links you mentions are shown.

Best Regards

Hi,

Sure, I will watch and try the row setting later.

It is strange, I have attached a screenshot on the affected promo banners and the link page.
I tried to open the page in different web browser and incognito window, the outcome is still the same.

Please let me know if you need more details. Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

We have checked this and we shall fix it in the nearest update.

Best Regards

[Author]

Posts