This tutorial contains the code which enables you to display images and text in a 3 columns grid and animate the images. The images on page load, rotate with a delay between each image like this :
You can use the code in this tutorial to :
- Output your images & content in columns using PHP with Genesis Hooks
- Copy & paste the HTML into a widget area
- Copy & paste the HTML into a Gutenberg block.
Demo Video
Shows the image in each column animated with a delay on page load.
Tested using the Genesis Sample & Parallax Pro child themes by StudioPress however will work in any Genesis child theme.
Installation Steps
There’s 2 + steps :
- # Copy & paste the PHP code which includes the HTML, to the end of your child themes functions file OR into a page template. If you want to use the HTML in a widget area or block, only copy the first snippet for the load_animation function to the end of your functions file and copy the HTML for the rt-container div from the 2nd code snippet for the animate_html function into your HTML widget or block.
- # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
Step 3 – Once you’ve installed the code, you can then swap out the links to your images in the HTML.
Subscribe for new Tutorials
Leave a Reply
You must be logged in to post a comment.