-
Posts
-
Hello,
I have published my website for some months now.
I like to make a temporary “announcement” on my Home page. It will hover over an existing section. After a month, this “announcement” will become a stand-alone separate webpage in my website. Any suggestions what elements are suitable to achieve this?This “announcement” will contain some words, pictures and hyperlinks. It’s like what some companies do when they have a promotion that lasts for a season. It also serves to let customers know there’s something new to take note of.
As I’m new to web design and learning from scratch, any advice or suggestion will be much appreciated.
Hi there,
I’m not sure what you mean by
It will hover over an existing section.Do you mean modal box? if so, please check convertplug plugin https://community.theme.co/kb/integrated-plugins-convertplug/Hope it helps.
Thanks Christopher for introducing me to convert plug. I checked it out. To download, I need to go to Envato right?
Before I pay for it, I’m not sure if that is the best for my website. Eg i don’t know if a user must click somewhere or do something before the modal box appears?
What I hope to have is that when a user comes to my Home page, immediately a banner appears over an existing section to announce something. This banner will have words, photos and hyperlinks.
Is there something within X that I can use? What about something that combines “slider” & “promo” that can slide in automatically when someone comes to the Home page for the 1st time?
Hi there,
ConvertPlug is an integrated plugin of X. So you don’t need to purchase this as it’s bundled free. You can download this from X Addons menu. Hopefully this will do the job.
Cheers!
Found it. Thanks Rupok!
Glad to hear it,
Cheers!
Hi Joao,
I have been exploring the use of ConvertPlug. It’s wonderful!May I have some quick tips to these questions:
a) under the “advanced design option”, I can change the width of the modal pop-up. Why is there no option to change the length? I want a smaller pop-up that will not block the user from reading the rest of the page, esp on a phone.
b) why is it that I can’t test & see the pop-up on my laptop, while I am designing the pop-up? I could only test out the pop-up on my phone.
c) I have problems sizing the boxes under the “Form Design”. Can the box size be changed? This is the box that contains each row of text in the pop-up.
Hi There,
I agree it is an awesome plugin.
a) This could be a good suggestion altough I believe the lenght depends on the amount of content vs width you add to it. As we are not the plugin developer, this features are not really up to us. If there is something we can help you with related to this, please provide a screenshot and more details about what you would like to improve and we might be able to provide a CSS fix.
b) Please provide your WP Admin Credentials so we can take a closer look.
c) Once we take a look on your modal we might be able to provide a CSS fix.
Thanks
Hi Joao,
I read the page that Christopher above referred me to:I came to this section and I’m quickly lost:
“This would allow you to add a button in Cornerstone, with a custom css class, then use that same css class in the behaviour option, allowing it to be launched on click for example. So if we open up Cornerstone on a page we want to add a button to, add the button to your page and then scroll down the button settings in Cornerstone until you get to Class, enter your class name here so we’ll go with custom-modal-trigger. Like this:”
Is it saying I should copy my existing button in Cornerstone and then paste it into the “Behaviour” option? Then what’s the meaning “…to add a button in Cornerstone, with a custom css class…” Are we creating a new button in Cornerstone?
the page Christopher pointed me to was:
Strange, I tried copying the url provided by Christopher above & pasting it but it showed the above image… Anyway that’s the article in KB of ThemeCo’s KB.
Hi There,
If you want to launch your Modal from a button in Cornerstone please follow this video:
Hope it helps
joao
I was afraid you would refer me to that youtube – I saw that myself and was immediately lost at the 14th second. What does it mean: “Suppose I wish to use this page that has a button that says, “Launch a pop up”?
Where is this page? Where do I find this page?? Is this when you select a module in ConvertPlug? If so, I don’t see such a page and neither do I have an option on top to “edit with cornerstone”.
Hi There,
Let’s try to clarify.
It works like this. If you would like to launch your lightbox from a button in Cornerstone, you need to add a class to this button. On Cornerstone when you add a button, on the bottom of the left Cornerstone tab you have a Class Box, just above the Style Box. On this Class Box you will add your “launcher class” . So let’s call this class> launcher
So Create a Button on Cornerstone on any page. add the word launcher to the class box.
Save the page, quite Cornerstone, go to Convert Plug, Modal Editor.
On the modal editor on Convert Plug go to Behaviour Section (Min 3.40 of the video above)
Click Manual Launch > Enter the word: launcher on the box that says launch with CSS class. As explained on the video.
Save your modal.
Visit the page where you have added the button initially, when you click the button, it will launch your modal.
Hope it helps
Joao
Awesome, Joao. You explained it so beautifully, I understand it all at once! Grateful for your patience.
I’ve encountered some problems with my modal pop-ups:
a) the font size of heading is not responsive text. So the design looks great on desktop, but when applied to mobile screen, the headline shrinks.
b) The modal pop-up closed normally at first. After a few seconds, it closed again. This closure re-appeared again & again. This erratic behaviour appeared more often on my mobile phone than the desktop screen.
c) I have set a modal to appear after 7 seconds. But I also want it to appear immediately if an user scrolls to the bottom of the page or exits the page or quits the website. I selected “Yes” for “Before user exits” as well as “After scroll to certain ID/class” and stated the ID. But the modal did not do as set – it only appeared after 7 seconds have lapsed.
d) I want a modal to close when an user clicks anywhere outside the modal. I selected “Close button & overlay”. I was able to close it by clicking on my desktop anywhere outside the modal. But I could not achieve the same on my mobile and iPad screens.
I’ve read the documentation but could not find anything there that can rectify the issues.
