Not long ago we added a new dynamic widget to the Layar Creator: the Clickable Carousel. Basically, it works just like the existing Image Carousel widget, but offers the ability to add links to each image so users can tap them to visit various links.
There are several cases in which this widget is very useful and fun for the user, including the example in the video tutorial above which we created. We added various dresses and hats to a model that you can swipe through to mix and match styles, and clicking on the images takes you to the mobile shopping pages for those items. You can try it by scanning the image below.
This gift guide shows users different colors and styles for a bag by letting users slide through and click the one they like! Scan them with Layar to see how Clickable Carousels can add interactivity to your print content.
To make your own Clickable Carousel, just follow these steps:
Drag the widget onto your page
Click “+” to upload the first image
Add the URL it should link to
Repeat steps 2 and 3 until all images are added, then click “Apply Changes”
It’s been a few months since we first published our Best Practices Guide for the Layar Creator, and a lot has changed since then! So here we are with a completely refreshed and updated guide filled with loads of new insights from successful interactive print campaigns.
In our new guide, titled Steps to Effective Campaign Creation, you can find lots of great tips to make your next interactive print campaign your best one yet. In the guide you’ll find:
Getting started with interactive print
Best practices for the Layar Creator
Concepting your campaign
“Dos and Don’ts” for instruction pages, calls-to-action and more
Testing your campaign
Integrating interactive print into your workflow
We’ve worked very hard to create a friendly guide that should help improve your interactive print campaigns, but let us know if you think anything’s missing or if you have any questions. Just mail firstname.lastname@example.org to get in touch.
One way to offer readers more content in a single space is to create an HTML Widget with expandable and collapsible content areas. It’s great for adding an FAQ, images or extra product information to your printed pages in a way that’s friendly to users and easy to build.
Follow this link to check out the tutorial and download our example template to build your own!
Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!
It’s the final day of HTML Week here on the Layar blog, and we saved a really great example for last!
In the very middle of LAYARED Magazine – pages 16 and 17 – a two page spread advertises the Layar Creator, including the quick steps to making interactive print. The illustrated spread provides a great overview of what it takes to use the Layar Creator, but scanning the page takes this to a whole new level.
Using some of the same basic HTML tricks we’ve been featuring throughout HTML Week, we created an engaging, animated walkthrough of using the Creator. Readers are directed to tap through the various steps of uploading pages, adding augments and publishing a campaign. Just follow along and tap the “Tap Here” buttons and you’ll be a pro at the Layar Creator in no time.
It’s a great example of how the HTML Widget in the Creator can be used to provide an immersive experience for readers. Here’s more about this widget:
Uses similar jQuery techniques from other HTML Week examples.
The steps are a series of screenshots from the Layar Creator.
Includes a “View in Fullscreen” button so users can follow the tutorial without needing to hold their device over the page for an extended period of time.
Again, this example seems more complex than it actually is. Using the FlexSlider plugin mentioned above, we created a few basic slides to introduce the walkthrough widget. When a user taps on a step to enter the tutorial, the slider fades away.
The green “Tap Here” buttons are very simple as well. It’s essentially three different elements that fade in and out on top of one another to produce a nice effect that encourages the user to tap the icon. Using timing and opacity options, the inner circle first fades in, followed by the outer rings. Then the inner circle fades out leaving the rings to guide the user.
The rest of the widget is simply fading from one screenshot to another, triggered by the user tapping the icons. It’s a very simple implementation but in this case it goes a long way toward educating readers of LAYARED Magazine about how the Layar Creator actually works.
After running through the 6 steps, readers are then familiar with how to create interactive print and are ready to hit the ground running when they use the Creator on the Web for the first time. This same widget could be used for any of a variety of purposes, from an app tutorial to instructions on constructing your new furniture. As with all HTML widgets, the possibilities are only limited by your imagination.
And that wraps it up for this example and HTML Week. Follow the links above to review all of our widget breakdowns from this week!
We recently released an update to the Layar Creator that makes it even easier to customize your Interactive Print. Now, the normal blue buttons can be whatever color you want them to be, allowing you to coordinate the color pallet of both your print materials and the interactive buttons you place on top of them.
You can use any of our pre-selected default colors, pick from the color wheel or enter in a hex color code to really choose the perfect color.