Today I am happy to announce a new plugin for our flagship premium WordPress theme, Stack for WordPress which adds a flexible system to create and manage modals using Stack’s awesome modal system.
Introducing Stack Modals
Stack Modals is a powerful plugin for Stack users which adds a simple way to create multiple modals of all types which can then be either placed anywhere either via a shortcode or even trigger a modal manually via custom link!
The plugin has been created to initially as a method to allow Variant users to make use of Stack’s flexible modals, which up until now was not possible, however I soon expanded this to allow users to also create persistent modals which can be used across ALL pages for awesome things such as contact forms, login forms and so much work.
So, how does it work? Iv recorded a complete demo showing the ins-and-outs which you can see below, but for something you can peruse at your leisure ill go into the details below.
How To Use Stack Modals
The process of create a new modal with Stack Modals is simple – upon activation of the plugin you will see a new Stack Modal area in your WP Admin
This will be where you add/manage your modals. To begin adding a new modal hit ‘Add New Stack Modal’ and you will be greeted with a screen not too dissimilar to the regular post editing screen
Just like a regular post, give your new modal a title (this will be for your own reference and it not publicly displayed) and go ahead and add your content to the editing area. Your content can be text, images, shortcodes and more – so dont be shy!
Each modal has a number of settings which allow you to control the display and style of your modal and each option has a neat description which tells you what each field does, however ill run through the options here aslo.
Modal Type – This is where you can choose to either show the modal only where you place the shortcode, or show the modal on all pages. This is ideal for site-wide offers, news, advertising popups and more – but more crucially this allows you to create modals for more advanced situations such as a login modal which is triggered by a menu link or such.
Modal Layout – Here you can choose the overall style for the modal, such as a regular plain modal or soemthing more fancy like a modal with a nice background image.
Show Trigger Button – In some cases such as for logins modals or autoshow modals, its not neccessary to show a button to trigger the modal, this setting allows you to control this.
Button Display Type – If your choosing to show a button to trigger your modal, set the button style here.
Button Text – Again, if your choosing to show the button, you can set your very own custom button label via this field.
Block Image – If you have chosen to use one of the image based layouts in the Modal Layout field mentioned above, you can set the image to use here.
Autoshow Timer – If you would like the modal to show after a certain time, you can set that time here. This is done in milliseconds, so for example if you would like a popup to appear after 10 seconds, enter 10000
Using The Modals
To make use of your snazzy new modal, you have 2 options, you can either use the shortcode provided, or create a link with a specific href, this is given to you in the field provided (though do be aware this will appear blank until your modal is published)
Basically, all you need to do is place the shortcode provide into any page/post (Variant users can use this also!) at the point you wish to display your modal.
Or, if you wish to create your own trigger, simply create a link and use the link code provided as your href and your all set! It really is as simple as that!
To give an example, to trigger your custom modal from a menu item, add a new menu items via the Custom URL menu item type and use the link provided, like you see below
Or for another example using a regular link
Where Do I Get It?
I have hosted the plugin over at github, so if you find a bug or such be sure to let me know. To grab yourself a copy and get started, you can download the latest version below.
Not Using Stack?
Well oh boy are you missing out! Stack is our most popular, most powerful and most flexible theme to date. Not only can you use Stack to create outstanding, modern design pages using Visual Composer, Stack is also provided with our exclusive Variant page builder which provides the fastest and simplest way to build pages in seconds.