Want to give visitors a taste of what your restaurant or food company is serving? Mouth-watering photos and videos of your food are a good place to start.
In this tutorial, we’re going to show you how to take your food photography and website to the next level with animation effects. No special coding skills are required. Just the Urban Oven Pizza Slider Template.
Table of Contents:
- Step 1: Delete layers you don’t need
- Step 2: Add and customize your food image
- Step 3: Edit the slide background
- Step 4: Edit the color in the lower half
- Step 5: Customize the text layers
- Step 6: Update the buttons
- Step 7: Disable parallax
- Step 8: Edit the global layers
How to add eye-catching animation effects to your food website
Whether you’re building a website for your restaurant or using it to sell various food products, the Urban Oven Pizza Slider template is a great one to start with.
You can easily repurpose this for different types of food websites, shops, blogs, and even recipe sites. In the following tutorial, we’ll show you how to steal the animation effects from this template and use them to promote your doughnut shop.
Need help using Slider Revolution for the first time? Start here:
Step 1: Delete layers you don’t need
Although the original template has a lot going on, the toned-down design and realistic background texture bring balance to it. Because we’re adding eye-popping colors and mouth-watering images, we need to strip out some of the excess to make our redesign work.
If you decide to delete any of the image layers in this template, here’s how to do it:
Locate the food group layers you want to delete in the timeline.
Note: Each of the food images in this template are part of a group. This is what creates the semi-transparent circle around each of them. So when you delete an image graphic, you have to take out the entire group, not just the single image.
To delete them one at a time, select the group and hit Backspace or delete. To delete multiple ones simultaneously, hold down Ctrl or command to select them all. Then hit Backspace or delete.
Do the same thing in the other slides.
Learn more:
Step 2: Add and customize your food image
To replace the pizzas with your food images, select the Pizza Image layer (not the Pizza-Group containing it). Go to “Content” and upload your new image to the Media Library.
Note: The pizzas are 610px by 610px. Try to size your replacement images as close to that.
If you’d like to remove the circular shading behind the food image, select Pizza-Group. Then go to “Style” and click the color block next to BG Color.
Inside the color selection dialogue, hit the Clear Color button. Then save your changes.
The last thing to do is customize the loop effects.
Select the Pizza Image layer once more. Go to the “Loop Layer” panel. Click on the Effects tab.
There are different loop settings you can modify here. We’re going to change just two of them.
The first controls how long the loop animation effect lasts for. Right now, it’s 8,000 milliseconds. We want it to be much longer in order to slow down the rotation of the doughnut since it’ll have much more distance to travel. So we’ve set it to 30,000.
The other setting we’re adjusting is under the Rotate tab. Instead of making the doughnut rotate 30 degrees to the right and to the left, we’re going to send it in a 360-degree loop.
You can play around with these animation effects as much as you like. You can also try out different types of loops based on the shape of your food. For circular objects, the Rotate setting works well.
Learn more:
Step 3: Edit the slide background
Currently, there’s a textured surface graphic in the background of each slide. To edit it, go to “Slide Options” and “Background”.
To replace the image, upload a new one to the Media Library.
To change it to a color, click the Type dropdown and select Colored. Then open the color selection dialogue to apply a solid color to the background.
Save your changes in between slides.
Learn more:
Step 4: Edit the color in the lower half
To change the color in the lower-half of the screen, select the layer called Half-Bg. Go to “Content” or “Style” to edit the color.
Do the same for the other slides, saving your changes between each.
Learn more:
Step 5: Customize the text layers
There are several text and button layers in each slide. We’re going to start with the regular text layers.
One of them is visible in the canvas. Pizza Name is the big product name and headline. The other text layer is called Description. However, you’ll only see it in the preview of this slide after clicking “View Details”.
To edit the text in these layers, first go to “Content”. You can change what the text says from here. Then go to “Style” to modify the font, color, weight, spacing, and more.
Edit the text and apply the same stylistic changes to the other slides.
Learn more:
Step 6: Update the buttons
There are three buttons present in each slide:
- View Details (and the arrow it’s grouped with) opens the description box.
- Close Details closes the description box.
- Button is the add-to-order button.
For the first two, all we need to do is update the font so it matches the rest of our slide design. The third button will need a font and color change. You might also want to update the text label.
Go to “Content” to edit the label. Go to “Style” to edit the font, text color, and button colors. And go to “Hover” to edit the button’s colors and effects in its hover state.
Note: You won’t be able to see Close Details or Button in the canvas while you work on them. So be sure to use the Preview to review your changes as you go along.
The open/close button actions can be left as is. However, you’ll need to go through and edit the links for the Button layer in each slide.
If you open the “Actions” panel, you’ll see that a Simple Link has been generated.
The Link URL and other settings need to be configured for your site.
If you want to add each item to the visitor’s shopping cart, you can add a link to the full product page. Or you can use the WooCommerce add-to-cart shortcode with the specific product ID. For instance:
[add_to_cart id=”2”]
You can also program the button to do something else — like viewing a recipe, exploring the full menu, etc.
Close the panel to save your changes.
Learn more:
Step 7: Disable parallax
When someone hovers over the slides, the text and doughnut move around in response to the cursor movements. We want to disable this movement so that the doughnut rotation is the primary animation effect on the screen.
To do this, go to “Module Options” and “On Scroll”. Under the Parallax tab, switch OFF the toggle for Parallax Enabled.
Save your changes.
Learn more:
Step 8: Edit the global layers
In the top toolbar, hover over the “Slides” dropdown and select Global Layers. There are three layers that stick to the top of the slider and remain visible as visitors scroll through it.
Prev and Next are the navigation arrows. Logo is the logo at the top.
To change the style of the Prev and Next arrows, double click on them. This will open the Icon / SVG library. You can either choose from one of the presets or upload your own custom arrowheads to the My SVG Library area.
The Logo is an image file. To edit it, select the layer and go to “Content”. Upload your new logo to the Media Library to swap it out.
Use the “Size & Pos” settings to alter the size (W and H) and position (X and Y) in the canvas.
When you’re finished, Preview your work once more.
If everything is good, you can now embed this animated slider into whatever part of your site you want it to go. Use either the shortcode found under “Module Options” or embed it using the Slider Revolution widget.
Learn more:
Keep all eyes on your food with awesome animation effects
Whether you’ve designing a restaurant website, food shop, recipe blog, or something else, the Urban Oven Pizza Slider template is a great place to start. With eye-catching fonts, awesome animation effects, and hidden text just waiting to be uncovered, your visitors are sure to be impressed with what you come up with.
Great article. It helps a lot with my work. Thanks for sharing these effective and helpful ways.
We are so happy to hear that the article was able to assist you with your work. It’s great to know that you found the tips effective and helpful. Thank you for taking the time to share your positive feedback. If you need any further assistance, please don’t hesitate to let us know.