I’ve done some updates at this site and created a new logoanimation.

But it took some time to find the right solution, so here’s a short guide on how to set it up.

Add the logoanimation

First we need to add the JSON-file to the site. This is just a placeholder so we have it visible some where. A perfect spot is in the footer, since that is rendered on every page.

So Edit the footer at the bottom of the site and add a </>Code block.

In my case I added this: 

<dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>

And if you want it to link back to your index page (first page), add this before and after the lottie. 

<a href="/"></a>

Like this: 

<a href="/"><dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player></a>

Add the engine

Next we'll find Website Tools. Go into Website, Pages and scroll down and find Website Tools.

Here you are going to add the Java Script driver so the site understands how a JSON-file from Lottie should be played.

Scroll down to the Footer and add this script code.

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

So this is adding the engine to your site. Every Lottie JSON file will now be played like it was a native solution.



Move it to the header

Then we need to change the position of the </>Code block to the menu.

In the code below, the div#... is the code-block div number and unique name for that div block. This will have a totally different name on your site and will change if you for instance add a new code-block. Use Inspector/Inspect in your browser of choice to pick that name.

The div#... will then switched placement with the .site-title. The Class name, the .site-title, can be different on your site, so change it accordingly. So the code is: 

<script>
  $(document).ready(function() { 
		$('div#block-yui_3_17_2_1_1705391194356_4861').appendTo('.site-title');
	});
</script>

Hide the old logo

Then we need to hide the old logo. If you use text only as a logo use .site-title or something similar. If it's an image use .site-title img, and display none will hide the old logo. 

<style>
  .site-title img{
    display: none;
}
</style>

That’s it. Hope it works for you too, and comment here if there’s any questions.

Comment