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.
Alternatively, you can use our “Content Area Modal” element. https://theme.co/docs/content-area-modal
Thanks
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.
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.
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.
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.
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%.
Hope this helps.
Hello Rue Nel,
Thanks for everything, but I still don’t understand how this works… as I told you guys many times, I am still new to this programming CSS / Java Script thing
I would appreciate a lot if you help me out to fix this as soon as possible because I’m planning to launch everything by the end of the month hopefully
Hello Katarina,
Please be advised that custom coding is beyond the scope of our support. We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.
Thank you for your understanding.
Hello Rue Nel,
Please take a look at the picture bellow in the secure note
Hey Katarina,
We understand the Covid situation. It affected not just you but all of us.
I checked your One account and you asked a lot of questions in total. We allowed that even because One isn’t based on how many questions but time.
Our theme support is unlike One. In One, we go deeper in customization help. Here in theme support, we only provide a bit of guidance.
What you are asking us is custom development. That requires a developer to write code for you and it is not included in our product support because if it is, we’ll have to use our developers’ time to do extra custom work. Coding work is only for adding official features in our products and in our Elite plan. In One, we just go deeper in providing custom coding guidance.
This is why we recommend that you hire your own personal developer to extend our theme and builders’ functionality if you can’t do it on your own or do not understand our code examples. You might be able to save that way if you think you can’t use One.
Please understand our position also. It would be unfair for us to customize your website as part of our theme support.
What I can do is post what you need in our tracker so it might get considered in one of the theme updates if the demand for the feature is high.
Thank you for understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.