Have you ever seen sites that show a live preview of links when you bring your mouse over them? Thats by using a jQuery popup which displays a screenshot of a linked page when users bring their mouse over the link. In this article we will show you how to show live preview of links in WordPress.  Video TutorialSubscribe to WPBeginner If you dont like the video or need more instructions, then continue reading. First thing you need to do is install and activate the WP Live Preview Links plugin. Upon activation, a new menu item labeled Live Preview Links will appear in your WordPress admin bar. Clicking on it will take you to the plugins settings page. Using this plugin, you can have live previews for external, internal, all, or selective links. Depending on what you are trying to achieve, many sites use live previews for external sites. Some eCommerce sites use live previews to show a peek into product pages. Keep in mind that too many live previews can be very distracting and annoying for your users. Choosing class="wp-live-preview" will allow you to manually display live previews for links as you add them. Simply add the class to your links like this: <a href="http://www.example.com" class="wp-live-preview">Example Link</a> Among other settings, you can choose the size of live preview popup window, position, and the site viewport of the link previewed. The default settings would work for most sites. Simply click on the save changes button to store your settings. You can now visit your website to see the live preview for links in action. We hope this article helped you learn how to show live preview of links in WordPress. You may also want to take a look at our guide on how to fix broken links in WordPress with broken link checker. If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+. |
