How to replicate a button from a site reference

Hello there,

I want to re-create the same functional button as the reference

Hi Katarina,

Thanks for reaching out.

You can create a popup item same as your reference website using our one of bundled plugins Convert Plus. You can install it freely on the validation page. Then follow the steps here on how to make it work with the buttons.

Hope that helps.

Thank you

Hello Marc,

I have read the steps from the link you sent and I am really stuck

Can you please try to re-create it?

I mean… after all I paid last month for the “one plus” support thing and I didn’t even ask any questions to help me out

So yeah… please If you can help me out with this I would appreciate it a lot!

Best regards,
Katarina

Hi Katarina,

I created a test modal using Convert Plus and it is now connected to your show more button on your product page. Please check the secure note for more information.

Hope that helps.

Thank you.

Hello Marc,

I have tested the button, and it works!

But how do I edit it now?

Thanks!
Katarina

Hi Katarina,

You can edit the contents of the modal popup by going to the ConvertPlus > Modal Popup > Blank.

See the secure note for the link.

Best Regards.

1 Like

Hello Rue Nel,

I noticed that when I enter the website (My website) with my phone the “ConvertPlus” modal popup shows

How do I disable it to open?
I want it only to open when someone clicks on the “show more” button on my product page

BTW is there any other simpler option to make a button pop-up some text without using this plugin “ConvertPlus” ??

Best regards,
Katarina

Hello Katarina,

To open popup only on the click of the button “Show More” you need to disable the “After Few Seconds” option from the ConvertPlus > Modal Popup > Blank > Settings > Smart Launch >After Few Seconds. It would disable the auto-open popup. Now the popup would only open when the user clicks on the “Show More” button.

Modal-Popup-Designer-‹-Unwav-—-WordPress

Alternatively, you can use our “Content Area Modal” element. https://theme.co/docs/content-area-modal

Thanks

1 Like

Hello there,

Can you maybe try to re-create it in “Content Area Modal”?
Will it work faster because I’m not using an external plugin to slow down my site?
I’m trying to use as much as fewer plugins as possible

BTW how do I edit that “show more” button for every other product, because it has different text for each product

I’m planning when I finally create that button to work I want to copy the template preset and paste it to each of my shop products

Can you guys please help me out to make the button work properly and show me how to edit for each different product?

Hopefully, you understand what I mean

Best regards,
Katarina

Hi Katarina,

I created a Content Area Modal and replicate your buttons. I save my work as preset and it is called Show More Modal. Just apply the preset and it will work how you wanted.

Here’s how you can replicate the button:

1.) Add the Content Area Modal element
2.) Apply the Show More Modal Preset

Hope that helps

Thank you.

1 Like

Hello Marc,

Sorry to bother you, but I’m stuck

I tried following the step as you said but I don’t know how to do it and I don’t want to mess up everything
Can you please make a small quick tutorial for me?

I would appreciate it a lot

Thank you,
Katarina

Hi Katarina,

I created a short video for you to check it with yourself. Please see secure note for the link.

Hope that helps.

Thank you.

1 Like

Hello Marc!

You are so awesome! Thank you so much for helping me

There are some little issues we have to fix and hopefully, it will work fine!

Hi Katarina,

You’re welcome. What do you mean by optimizing the mobile version? Do you want to X icon color to be white?. On the other hand, the Youtube URL doesn’t work.

Hope that helps.

Thank you.

Hi Marc,

What I mean is when I click on the button on mobile, it is not in the center (It doesn’t open in the center) it is a little to the right as you can see

Hello Katarina,

It is not at the center and a little bit to the right because of your close size. Adjust it to 2em only.

If you want to make the (X) close button a little bigger, kindly go to the “Customize” tab in the element settings and insert an inline element CSS:

$el.x-modal .x-modal-close {
   font-size: 10em;
}

Feel free to make adjustments to the font size as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hi Rue Nel,

I probably didn’t explain very well

Here’s how I want to show when I click on the button
I made a rough sketch on photoshop please take a look at “secure note”

Hello Katarina,

You are using a content modal element. Please check out this documentation first to be more familiar with the element and how you can tweak the styling of the element like the toggle button and the modal content:

To edit the content of the modal and tweak its element settings, click the toggle button first in your editor:

In the left panel, the content area modal element settings will display. This is where you can edit the element settings like adding the text content for the modal:

To edit the toggle button style, simply click the Content Area > Toggle tab and all of the button properties will display like width, margin, padding, etc.
Screen Shot 2020-11-28 at 6.47.57 AM

Now if you want a more styled modal content, it is best that you go to Pro > Global Blocks and create a global block. You can layout or design whatever you want to display for the modal content. Once you are done, save all your changes and take note of the Global Block shortcode because this shortcode will be added as the modal content.

Screen Shot 2020-11-28 at 6.55.12 AM

Hope this makes sense.

Hi Rue Nel,

Thank you so much for explaining

I have checked the following links you sent and it is helpful, but I don’t fully understand
How do I set the close button to be on the left, I don’t know how to explain but here’s a picture: https://prnt.sc/vrjla5

And how do I set the layout or I’m not sure how It is called when I click on the button, to be wide like my ROW
above

Sorry If I am bothering you with dumb questions, but I am still new to this…

I would appreciate it A LOT if you help me out, please

Best regards,
Katarina

Hello Katarina,

By default, the close button will display outside of the modal content. Placing the close button inside modal content requires custom CSS and custom JS which is already considered as custom development and it is beyond the scope of our support already. We can only give you guidance to get you started with what you want to display.

First, you need to use custom JS to relocate the close button. The prependTo() jQuery function will help you.

Second, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which element selector you need to use.

For example code:

(function($){
  $(document).ready(function(){
  	$('.x-modal').each(function(){
  		$(this).find('.x-modal-close').appendTo( $(this).find('.x-modal-content') );
  	});
  });
})(jQuery);

And then you also need to modify the X and Y position of the said button by adding a custom inline CSS. You can use the previously given sample code:

$el.x-modal .x-modal-close {
  top: 5px;
  left: 5px;
}

The top and left position are necessary to make sure that it stays at the upper left corner of the modal content. Be advised that all the codes given are just sample codes to get you started. It may create issues later on so you will have to be in charge of maintaining the sample codes whenever there are theme and plugin updates.

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

And to make the modal content as wide as the row, you may need to set the content maximum width to 100%.
Screen Shot 2020-11-28 at 8.13.13 AM

Hope this helps.