Let's Build: A Consultancy Website - Part 37 - Coding Redirects and Animations

Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻

======

Kirby Redirects and Adding Animations

Part 37 teaches you how to perform redirects in Kirby. Alyssa’s blog is hosted elsewhere so we chose to redirect the “blog” link in the navigation menu.

Redirects in Kirby

Performing a redirect is fairly simple inside Kirby. You need to start by creating a new page from the panel admin area.

Once a new page is created go inside that pages folder inside of content/yourpage. This path will vary based on what your page is named. From there you should notice a .txt file inside the folder. In my case, I created a new page called Blog. The .txt file was called blog.txt.

To perform a redirect this file needs to be named link.txt.

This file will then look to a file in your site/templates directory called link.php. You will need to create this file. Look for the code on the blog post linked below.

This method actually performs the redirection action. We still need to define where exactly our page will redirect to.

in my case, I’ll head back to the link.txt file located in the content/blog directory. Within this file I’ll add the following markdown:

Title: Blog

Link: https://medium.com/endlyss-designs

This bit of content sets the title and link the redirection will go to. In the screencast, I opted to use the starter kit supplied by Kirby. If you happen to do the same you’ll likely want to edit your blueprint for the page you are planning to redirect. In my case, I edited the blog.yml file inside the site/blueprints directory to just contain this bit of yaml:

title: Blog

files: false pages: false

fields: title: label: Title type: title required: true

Here I declare the page title as a field which is required. I also disable the files and pages parameters for this specific page since a user doesn’t need to add files or pages to a redirected page.

Animations For some flare, I sought to add some animations to elements around the site. Areas of the home page now enter and leave as a user scrolls to give a bit more interactivity and stimulate the user.

Out of the box, we could have just used a library called animate.css but I actually prefer to use it combined with a library called WOW.js. WOW.js actually depends on animate.css so you’ll want to always use them in unison. WOW.js is responsible for queuing in animations as your users scroll through a page. Rather than just have everything element you want to animate fire at the same time, WOW.js waits until those elements are in view before actually animating. You can also adjust other parameters like animation delays, animation offsets, animation iterations, and if you want animations to occur on mobile devices.

=======

⚙ Download the source code: https://github.com/justalever/endlyssdesigns

💻 Previously published at: https://web-crunch.com/lets-build-consultancy-website-part-37/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design"

https://web-crunch.com/books/luxd 📙 Check out my FREE book on Tumblr Theming:

"Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=X6BcqZWWZxI