Popup button in header

Hello team, I want to add a popup button in my header which says “Request a call”. When a user clicks on the button, it opens up my contact form HTML block.

Now the header setting doesnt have any option to add a popup button. It only allows regular button. How can i achieve this? Can I add a link of my html block to the regular button to achieve this effect?

I have also tried adding the html block directly into the header. But it doesnt work & messes up the design. I will add a screenshot below.

Please help me in achieving this. Basically I want to have a button on the header which gives users the option to add their contact numbers to request a call back. If this is possible via any other method then also let me know

Attachments:

You must be logged in to view attached files.

Hello,

Create a menu Appearance > Menu > Add a custom link with #

In order to open the popup by clicking on the header menu item, you need to add the following CSS class to the menu item link in Appearance -> Menus.
woodmart-open-newsletter
https://prnt.sc/UayAt4FrlUd7

Navigate to WooDmart > Header builder and add a Secondary menu.

Make sure the promo popup has been activated in Theme Settings -> Promo Popup.

Best Regards.

woodmart-open-newsletter- So is this same code applicable for all the popups? Or do I have to add the name of my html block here? Can you please share a video with me? I did not understand this

Navigate to WooDmart > Header builder and add a Secondary menu.- I did not understand this as well

Hello,

Please see the video on how to add a newsletter popup in the header.
https://youtu.be/fb-328_hI2Y

Best Regards.

So this is just for the newsletter right? What would be the CSS code if I want to add a different HTML block to the header. I.e Popup with contact form HTML block. What would be the code here?

Hello,

you need to create HTML block: https://xtemos.com/docs/woodmart/html-blocks-2/

Add a popup element from WP Bakery builder or Elementor builder chart, configure and insert the content you need.
https://gyazo.com/2b03b0c6efce38ef6cd52787c9cb7ef6

Then add this HTML block to the Header Builder:
https://xtemos.com/docs/woodmart/html-blocks-2/#header_builder or anywhere on your site. If you need to add two popups on one and the same page.

Best Regards.

You have not understood my request.

I already know how to create a HTML block. The thing is that I want to add a “Contact us” popup button in my header (Somewhere in the bottom bar or the top bar) and when someone clicks on this button. I want it to open up a contact form that I have created using a HTML block.

I am not using WP bakery. I am using elementor

Now my problem is that, in the header settings- There is no option to add a popup button. How can I then get this done?

Checkout this template by woodmart- https://woodmart.xtemos.com/demo-retail/demo/retail/. It has a newsletter popup button on the top. Now when I click on it it opens up an HTML block. You told me how to do it for newsletter. But I dont wan’t to add a newsletter there.

I have created a custom HTML block for contact form. I want to add this when someone clicks on the “Contact us” button. How do I do this? You gave me CSS code for newsletter but what about other HTML blocks.

I am expecting a in detail explanation this time. DOn’t just give me blog articles

Hello,

First of all, create a contact form using HTML Blocks in Elementor. Then create the popup button form in HTML Blocks using Elementor and in the content tab in general section select the popup content that you have made contact form in html blocks:
https://ibb.co/gWtR4wx

Then Go to the Header builder -> edit current header -> add the HTML blocks elements and select the Popup HTML blocks: https://ibb.co/vz4S3bc

And you can see the contact form popup in the header: https://ibb.co/KVv1fNW.

Hope you can understand!

Best Regards.

[Author]

Posts