Tip:
Highlight text to annotate it
X
In today's tutorial i'm going to show you how to install Magic Zoom in WordPress. If
you go to the main product page you'll see the WordPress icon on the right hand side
which will take you to the Magic Zoom for WordPress page. You can see from the example
here how detailed the zoom is. And what’s more it's completely customizable. To create
this, first we need to download the demo version of the WordPress plugin. Next, go to your
WordPress admin area and select Plugins. Click Add new and then click Upload. This will take
you to the Upload page. Browse your computer for the plugin you've just downloaded, this
will be a zip file called mod wordpress magic zoom. And select Install now. Once that's
done select Activate Plugin. You can see under Plugins, Magic Zoom is now showing. Next go
to the page or post you're working on. Notice i'm working in the HTML view not the Visual
view. Click the Add Media icon. Either upload your image or choose an image from your Media
Library. Select the image you want to use as your zoom image. The text that appears
in this Title field will appear automatically over your image in the zoom area. Then select
the size you want the large image to appear on your WordPress page. I'm going to use medium.
And click Insert Into Post. You can see that WordPress has added a Class, which I'll delete
because we don't need that. WordPress will sometimes add a rel tag here too, which you
should also delete. Now we'll add our own Class of Magic Zoom after the href image reference.
Make sure Magic Zoom is one word and that each word begins with a capital letter. If
you preview what we've done so far you'll see when you hover over the image a large
zoom area appears so you can see the image in detail. Now that Magic Zoom is installed,
let's add a few customizations. We'll move the zoom hint, change the text under the image
and increase the size of the zoom area. To do this we need to go back to the WordPress
admin area and select the Magic Zoom plugin we've just installed. You'll be taken to a
page called Magic Zoom Settings. Here you can make changes easily which are very effective
on your web page. First I'm going to change the zoom width to 500 pixels and the height
to 400. Then I'll change the text which appears underneath the main image and lastly I'll
change the position of the zoom hint from top left to top right. Remember to always
save your settings when you make changes to this page. Now, if I reload my web page you
can see the changes are now showing the zoom hint has moved, the text has changed and the
zoom area is now bigger. If you're not sure how you want to display your images, go to
our Magic Zoom Examples page. Whether you want an internal zoom or multiple images this
page will give you some great ideas. All the HTML code for our examples and more can be
found on the integration page. And don't forget the Magic Zoom Settings page. Try all the
options and see what works best for your WordPress website. At the top of each page on our website
is a Contact Us link. So if you have any questions about Magic Zoom or any of our other tools,
just get in touch. If we're not online when you send your message through, we'll get back
to you the very next day. And that brings us to the end of this tutorial. Thanks for
watching.