![]() This means users will get a more detailed look at the product on offer, along with enticing copy. ![]() With the Replace widget, when users hover over the smaller images on the right, the image will be enlarged on the left. This is where we can use the Replace/Effects in the Kendo UI kit. The main features of a product page are the images – a chance to show off your products and impress customers. A product page like the one we’re going to create will show you the potential of the Kendo UI kit. Now we can focus on a product page within our web prototype. When the user hovers over an image, a pop-up appears with additional information relating to that image, in our case to show the dimensions of the product with a call to action inside the window with ‘Show more’. The Loading Content with AJAX widget is a great way to give users an bonus bit of content that will add value to their experience. ScrollView isn’t the only way to play with content in the e-commerce app. Thankfully with the Kendo UI, you can save time by simply dragging the ScrollView widget onto the canvas and populating it with your own content. It’s similar to a carousel – which can also be constructed simply in Justinmind with dynamic panels – in that the user has to click either left or right to move through the content. In our example, we used Kendo’s ScrollView. You don’t have to settle for the standard fonts either – Justinmind has full Google Fonts integration.īelow your hero image, we’ll add a section for most popular products. ![]() To the left of your navigation bar, you can add another image widget if you have a logo you want to insert or a text widget if you simply want to write the name of the e-commerce website. This same process can be applied to your top navigation, too. For example, an ‘on click’ Event could be used to take the user to another screen. If you wish to add a button, use a button widget. You can add an inspirational text, sales copy or a dramatic call to action on your hero image as this can help increase conversions. ![]() This means repeated elements such as navigation bars and logos can appear in the same place each time you make a new screen creating consistency across your web and mobile apps. In the Events panel, you can link your navigation elements to other screens.ĭon’t forget that you can reuse content with templates to save you time when designing. Drag this widget to the top right hand side of your screen. We can use Kendo UI’s menu orientation widget. Our e-commerce website will have dropdown menus where users can navigate to other areas of the website. Most homepages have a navigation bar found at the top. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |