In this demo, you will learn how to quickly and easily upload your logo to replace the existing one in the website's navigation and footer. You will create two logo files - one for the main navigation with darker text, and one reversed-out logo for the footer. Finally, you will integrate these logo files into the website's media manager and learn how to purge the cache to ensure the changes are immediately visible.
Here are the key things you will be able to do after you watch this demo:
Upload the main logo file (logo.png) to the media manager.
Upload the reversed out logo file (logo-footer.png) to the media manager.
Purge the cache on the CDN (e.g., Cloudflare) to ensure the logo changes are immediately visible.
Create a unique blog logo file (blog-logo.png) by copying and renaming the main logo file.
Uploading Logo Process Overview (0:09)
Josh Lomelino introduces the demo, explaining the process of uploading a logo and its importance.
The logo will replace the current one in the top navigation and footer of the website.
Josh emphasizes the need for a logo with darker text for the main navigation and a reversed-out logo for the footer.
The process involves generating two files and dragging them to the media manager in AMP.
File Structure and Transparency (1:27)
Josh explains the importance of having a file structure with transparency, preferably a vector file like an EPS.
He demonstrates how to save the file as a PNG 24 with transparency and sets the dimensions to 1000 pixels.
The main logo file should be named "logo.png" for the top navigation.
Josh saves the file and prepares to integrate it into the website.
Integrating the Logo into the Website (5:36)
Josh logs into the CMS and navigates to the File Manager to upload the logo.
He removes the existing logo file and replaces it with the new logo file.
The same process is repeated for the footer logo, using a reversed-out vector file.
Josh explains the importance of naming the footer logo file "logo-footer.png" and uploading it.
Caching and CDN Configuration (6:00)
Josh discusses the importance of caching and how it affects the logo's visibility.
He explains how to purge the cache in Cloudflare to see the updated logo immediately.
Josh describes the benefits of using a CDN for faster performance and better SEO.
He emphasizes the need to flush the cache when updating files to ensure the changes are reflected.
Final Steps and Best Practices (11:29)
Josh demonstrates how to purge the cache in Cloudflare by setting the browser cache TTL to two minutes.
He explains the role of the CDN in storing and serving files to improve performance.
Josh advises on naming conventions for logos used in different parts of the website.
He concludes by ensuring the updated logo is visible and functional, and provides additional tips for blog logos.