You may need to reposition more than just your product photo.įor instance, the floating text in the center is going to appear behind your product photo, so you may want to make additional tweaks so that enough of the wording appears so that it’s readable. Preview your changes to see how the layers line up now. Select it from the timeline and go to “Size & Pos” to move it up or down using the Y setting: Once you have an idea of how far you need to move everything, go back to the Slider Revolution editor. There are global layers above and below what we’ve been working on and you don’t want to accidentally position your layers over them (if you plan on keeping them, that is). So, let’s deal with those first.īefore you start repositioning anything, preview your slider. You may need to move the product image up or down, but you won’t know exactly how far to move it until you finalize your text layers. Then, go to the toolbar at the top and type over the layer name to add your own: To do this, click on the layer in the timeline. Pro tip: Update the name of the layer so it reflects your product. Open up “Layer Options” and go to “Content” to upload your replacement image to the Media Library: To unlock it, go to the timeline, hover over the layer, and click on the lock icon: The Glasses layer is currently locked from selection or editing. To preserve all the settings that have been built into the Glasses layer, we’re going to replace it with our product photo (instead of deleting and creating a new image layer). Export the file with a transparent background.Find or create a photo where the width is about two times the size of the height.If you don’t, you can still use this template, but you’ll have to spend a bit more time repositioning the text layers.Īs for the replacement product photo, here are some tips on how to prepare the file before uploading it to WordPress: This template is going to be easiest to customize when you have a product image that is roughly the same dimensions as the glasses. Step 3: Replace the glasses graphic with your product image Selecting Layers via the Canvas or Timeline.Note: When you remove a group layer (like Right Lens or Left Lens), it will remove all of the content connected to it. Then, click on each of the layers and hit “delete” on your keyboard. To delete the layers, hold down the “CTRL” or “command” button on your keyboard. So, keep that in mind before removing the layers completely from the slide.Īs for what you’re going to delete if you’re following along with us, look down at the timeline editor. That said, if you decide to use this slider on your home page to show off your product variants, you may want to include some of the text layers we’re about to delete. Our product page will do most of the talking for us. Step 2: Delete the image and text layers you don’t needīecause we’re going to place this product slider at the top of the product page, we don’t need to include a lot of text within the images. Step 10: Update the remaining Global Layers.Step 8: Duplicate the complete slide and customize your new slides.Step 3: Replace the glasses graphic with your product image.Step 2: Delete the image and text layers you don’t need.Step 1: Delete all slides but the first.There won’t be anything to build from scratch as you’ll start with the Optic Shop Showcase Slider template and then customize the design as needed. In this tutorial, we’re going to show you how to create a product slider that does just that. What’s more, you’d give shoppers the ability to switch between variants right within the slider. Instead, it would show off the product’s variants - like sizes, colors, models, etc. What if you could design an ecommerce product page with an engaging product slider at the top? It wouldn’t be for the typical product gallery though. The layout is effective, but it’s not the most original or exciting. There will likely be a product image and gallery links in the top-left corner, product name and details on the right, and additional information below the fold. When you visit ecommerce websites, you expect to see products promoted a certain way.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |