Squarespace Blog Post Sidebar Tutorial / How to create a sidebar in Squarespace 7.1 скачать в хорошем качестве

Squarespace Blog Post Sidebar Tutorial / How to create a sidebar in Squarespace 7.1

In this tutorial, you'll learn how to create a sidebar using a summary block. This sidebar can be added to any blog post and when you need to make changes to it, all the posts will be updated at the same time! 🙌 In this free Squarespace tutorial, you'l learn how to unlock the secret power of the Squarespace Summary Block and show you how to use it to create a simple yet stylish sidebar for your blog posts. Use the sidebar to display key information like an author bio, important links, your latest freebie, or even a mini table of contents that can direct people to related info. The secret sauce is the Summary Block: you can use this built-in feature to create a functional side bar, and some CSS to personalize it to match your blog's style. - - Want to get more creative with code? Get a copy of the 5 codes I use on every Squarespace website I build + info on how to use them: https://insidethesquare.co/five - - Here are some time stamps to important parts of the video: 01:31 how to create a sidebar blog in your not linked section 02:06 how to add an image to your sidebar: use the thumbnail feature! 02:16 how to link your post to the right place: add a source URL and make sure you toggle on the right link 02:50 how to add button text to your Squarespace sidebar: we do this with a blog post title that can be customized with code 05:29 how to add a sidebar to your squarespace blog 07:49 how to customize it with code Here is the code I used in the video; make sure you change the colors and padding to match your own unique style: /* sidebar buttons */ article .summary-item:nth-of-type (2) .summary-title{ background:yellow; text-align:center; padding: 5px; border: 2px solid orange } article .summary-item:nth-of-type(3) .summary-title { background:pink; padding: 5px; border: 2px solid red; text-align: center } article .summary-item:nth-of-type(4) .summary-title｛ background: orange; padding: 5px; border: 2px solid pink; text-align:center } /* sidebar button hover effect */ article .summary-title:hover｛ background:#fff!important; border-color:#333!important } Related Content You'll Probably Love: 🎨 Free guide to creating colors with code: https://insidethesquare.co/colors 📑 My personal collection of CSS codes for Squarespace: https://insidethesquare.co/css ❤️ Like this tutorial? BuyMeACoffee to say thanks: https://buymeacoffee.com/insidethesquare - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10 - - The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #Squarespace #blogging #webdesign #webdevelopment #sidebar #summaryblock #tutorial #howto #DIY #website #design #blogpost #creative #Squarespace71 #contentcreation #digitalmarketing #webdesigner #designinspiration #creativity #coding