Одну секунду
Что-то сучилось. Попробуйте еще раз.
Squarespace css смотреть последние обновления за сегодня на .
Are you looking to edit CSS code inside Squarespace? In this video designed for beginners, we take a look at how CSS works and how to edit it in Squarespace. Create a Squarespace Website: 🤍 List of CSS Properties: 🤍
Squarespace has a ton of great-looking templates, but for those of us who want to make our website look extra unique, we use CSS! This quick video will teach you how to customize your Squarespace website with code. This video is perfect for beginners who are new to Squarespace! You'll learn how CSS works with Squarespace and I'll share a few examples of how I use it in my work. Grab the guide that goes with this video at 🤍 Here are some related videos: How to install code on one page in Squarespace: 🤍 How to change one thing with custom code in Squarespace: 🤍 - - - 📑 Download my collection of CSS codes for Squarespace at 🤍 - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ 🤍 - - - 🙋 Need some help? Visit 🤍 to see my current support options. - - - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 💸 DISCOUNT → Save 10% on your first year of Squarespace with code 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 ♥
In this video, I share five ways to improve your Squarespace website. I'll show the best resources and tips for customizing your Squarespace website, including: × Becca from InsideTheSquare on YouTube → 🤍 × My favorite InsideTheSquare tutorial - split screen → 🤍 × Ghost Plugins Free Plugins library → 🤍 × Square Websites Universal Plugin → 🤍 × Square Websites Lazy Summaries → 🤍 × Squarespace ID Finder (Google Chrome extension) → 🤍 Phil deconstructs digital marketing and social media to empower leaders, corporations, employees, and entrepreneurs. His insights have been featured in media outlets around the world, including CNN, Access Hollywood, Entertainment Tonight, and The Daily Mail, to name a few. Phil has worked with hundreds of brands across all industries, including a Shark on Shark Tank, a Nobel Peace Prize winner, politicians, and some of the most important names in entertainment. He frequently speaks at conferences in cities all over the globe, including London, Tokyo, Dubai, Cairo, São Paulo, Medellín, Auckland, Helsinki, and Los Angeles. × LIKE, COMMENT, AND SUBSCRIBE × - FOLLOW ME ON: × INSTAGRAM → 🤍 - ADD ME: × FACEBOOK → 🤍 × PINTEREST → 🤍 × TWITTER → 🤍 × LINKEDIN → 🤍 - × WEBSITE → 🤍 × NEWSLETTER → 🤍 #philpallen #squarespacewebsite #squarespacetips squarespace tutorial 5 ways to improve your squarespace website, squarespace tutorial 5 ways to improve your squarespace website Phil Pallen, 5 ways to improve your squarespace website, squarespace website improving tips, squarespace website how to, 5 quick easy improvements for squarespace, 5 quick easy improvements for squarespace website, squarespace seo, seo for squarespace, squarespace seo tutorial, Squarespace Tips, Squarespace Tips and Tricks, Squarespace Tutorial, SEO Tips, SEO Tips and Tricks, Squarespace Google, 5 tips to optimize your squarespace website, 5 tips to optimize your squarespace, Squarespace Tips, Squarespace Tutorial, Squarespace Tips and Tricks, Squarespace CSS, Squarespace Tricks, Squarespace, Squarespace Page, Squarespace Tutorials, squarespace tutorial codes and snippets to improve your website, squarespace tutorial codes and snippets to improve your squarespace website In this video, learn personal branding strategies with Squarespace. Delve into CSS snippets for website optimization. 0:00 - Intro to Personal Branding Strategy 2:00 - Content Marketing: Custom CSS on Squarespace 2:43 - Digital Marketing: Split Layout Tutorial 3:16 - How to Implement Ghost Plugins 4:17 - Why You Need Squarespace Plugins 5:02 - Exploring Filter Options 6:06 - Personal Branding Tips: Load Items and Control Settings 8:07 - How to Market Yourself: Improving Your Squarespace Website
In this video, you’ll learn five custom code snippets my friend (and brand strategist) Phil Pallen uses on every Squarespace website he creates for his clients. First, he'll show you how to use the root function to set colors universally on your Squarespace website, giving colors names instead of relying on HEX codes, and matching Squarespace's site styles to make writing code even easier. Then, you'll learn how to apply a smooth scroll effect to your anchor links, create a thicker horizontal line, set custom P3 font, and hide your footer on mobile only. We are covering a LOT in this tutorial, so use the timestamps below if you want to jump ahead: 00:42 - Give colors names (instead of relying on HEX codes) and match those colors to Squarespace's site styles Replace "XXXXXX" below with your HEX codes and paste into your CSS: :root { lightest: #XXXXXX !important; light: #XXXXXX !important; accent: #XXXXXX !important; dark: #XXXXXX !important; darkest: #XXXXXX !important; } 01:42 - Add a smooth scroll effect to your anchor links by pasting this snippet into your CSS: html { scroll-behavior: smooth; } Don't forget that your anchor links require a code block with ID, hyperlinked with a hashtag. Instructions in this video: 🤍 03:08 - Make a horizontal line thicker by adding this code snippet (and adjusting the thickness - this is set to 2 pixels high as shown in the example): hr {height: 2px !important;} For more help on this, check out this tutorial: 🤍 05:01 - Custom style your P3 text (beyond what site styles in Squarespace allows) with this code snippet and adjust accordingly: .sqsrte-small{ letter-spacing: 0.2em !important; text-transform: uppercase!important; font-weight: 600; line-height: 1.6em !important;} 06:02 - Hide footer on mobile with this code snippet: 🤍media only screen and (max-width: 768px) { footer { display: none !important; } } - 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 ♥ - × LIKE, COMMENT, AND SUBSCRIBE × - x PHIL'S CHANNEL → 🤍 × PHIL’S INSTAGRAM → 🤍 × PHIL’S WEBSITE → 🤍 x BECCA'S CHANNEL → 🤍 × BECCA’S INSTAGRAM → 🤍 × BECCA’S WEBSITE → 🤍 -
In this video I'll explain where and how you can customize every part of your Squarespace site by coding in various types of features. I also do a quick walk through breaking down the different parts of code. 📦📦 All Products: 🤍 📦📦 All Products: 🤍 📦📦 All Products: 🤍 I'm David, a search specialist and beginner YouTuber from Orange County, CA. I help people grow using automation, optimization, and first-principles thinking. ☎️ Book a 1-to-1 Call with David Today: 🤍 💬 If you are (or want to become) a Squarespace Designer, join the conversation: 🤍 ❤️ Subscribe to the channel: 🤍 📢 FREE Squarespace Resources: 🤍 🫢Found this content valuable and want to buy me a coffee (or a book)?: 🤍 Squarespace Products 📦📦 All Products: 🤍 💻 Over 70+ Pre-designed Components in One Template: 🤍 👩💻 Designer Starter Kit - Launch your design business with ease: 🤍 ✨ SEO Starter Kit - Get the results you want, faster: 🤍 🌐 Domain Starter Kit - Set up domains the right way: 🤍 📝 Blogging Starter Kit - Propel your blog to 100k visitors, organically: 🤍 ✍️ Font Starter Kit - Master font and colors in a weekend: 🤍 🎙️ Client Scripts Starter Kit - Communicate like a pro: 🤍 📍 Fluid Engine Starter Kit - Understand the power of the latest editor: 🤍 🧑💻 $10k Custom CSS Course - Start your coding journey with a FULL, in-depth guide that will take you from 0 to 100 fast 🤍 FAVORITE TOOLS: (I get commissions for purchases made through some of these links, but I only promote things I like and believe in that I think you'd like, too.): ✍️ Favorite Note / Team App - NOTION: 🤍 🎤 Favorite AI Content Tool (use the coupon DAVIDALEX for 15% off!) - RIVERSIDE.FM: 🤍 📼 LOOM: Record Your Screen & Share A Link: 🤍 🈳 WEGLOT: Translate A Squarespace Site with WeGlot: 🤍 📱 Start Your Website Today on Squarespace: 🤍 🎨 Customize Your Squarespace Website with Squarekicker: 🤍 - 📕 Need a Payroll service? Get up to $300 today 🤍 ⏺️ Need a live chat feature? Check out Tidio: 🤍 💸 Looking to Robo-Invest? Try Betterment: 🤍 👨🏫 Teaching Platform I Love - Podia: 🤍 💳 Chase Business Credit Cards: 🤍 ——— 🧬 Sponsorships & Contact: email hello 🤍 davidalex.com Timestamps: 00:00 - Intro 01:04 - Part One: Site Wide Code 02:30 - Placing Code Before the End of Body Tag 03:04 - Part Two: Custom Codes 07:04 - Part Three: Individual Pages Codes 11:27 - Conclusion
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - This tutorial is an overview of how to target specific things in Squarespace so you can edit them with custom code. We’ll take a look at the three main types of unique ID’s - collection, section, and block - and how to combine them with selectors (aka code names) so you can customize just about anything and everything in your Squarespace site! I am using my Squarespace version 7.1 demo site; block ID’s exist in version 7 but things like page sections and collections are a little different depending on what theme you are using. This is a link to the free chrome extension I use in the video. I am not affiliated with them in any way, just a fan! 🤍 Here is a quick recap of order of ops discussed in the video: #collection-id [data-section-id] #block-id .selector Here is a quick rundown of the typical symbols used: Using a data section? Add [square brackets] Using a block ID? Start with a # Making one code change to multiple targets? Separate them with a comma. Here is an example of changing H2 text color in a block id: #block-123456 h2{color: orange} And here is an example of changing all the buttons in a data section to blue: [data-section-id=”123456”] .sqs-block-button-element {background-color: blue!important} - 🤩 Want over 60+ pages of custom codes & pro tips specifically for customizing Squarespace? Download my CSS Cheat Sheet, available now at 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 to see my current support options. - 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 #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace Edited Just Starting with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - This tutorial is an overview of how to target specific things in Squarespace so you can edit them with custom code. We’ll take a look at the three main types of unique ID’s - collection, section, and block - and how to combine them with selectors (aka code names) so you can customize just about anything and everything in your Squarespace site! I am using my Squarespace version 7.1 demo site; block IDs exist in version 7, but elements like page sections and collections are a little different depending on what theme you are using. This is a link to the free Chrome extension I use in the video. I am not affiliated with them in any way, just a fan! 🤍 Here is a quick recap of order of ops discussed in the video: #collection-id [data-section-id] #block-id .selector Here is a quick rundown of the typical symbols used: Using a data section? Add [square brackets] Using a block ID? Start with a # Making one code change to multiple targets? Separate them with a comma Here is an example of changing the H2 text color in a block id: #block-123456 h2{color: orange} And here is an example of changing all the buttons in a data section to blue: [data-section-id=”123456”] .sqs-block-button-element {background-color: blue!important} - 🤩 Want over 60+ pages of custom codes and pro tips for customizing Squarespace? Download my CSS Cheat Sheet, available now at 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 to see my current support options. - 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 #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel 🤍 - This tutorial is for all versions of Squarespace, from the latest 7.1 to older sites like Brine and Bedford theme templates. - How to create unique text-shadow effects in Squarespace In this tutorial, I am going to show you how to add a shadow to any text style in Squarespace with some clever CSS code! A few key things to note: + This works in any version of Squarespace and any theme + You need to know the "code name" of the text style you are working with! Header text goes by H1, H2, H3 and H4 but 7.0 doesn’t have an H4, so if you use that code nothing is going to happen! 😂 Stick to the top 3 if you are on a Brine, Bedford, or any other 7.0 site. And if you have no idea what the heck I mean by that, check out this article to find out what version you are using, that’s critical info if you want to keep working with code: 🤍 + Shadows can be combined with a comma, and read as follows: text-shadow: (horizontal offset) (vertical offset) (blur radius - optional) (color) + You can use any color type including HEX, HSL, RGBA, or websafe color name. To learn more about those options, visit 🤍 Here are some of the sample codes from the video: // Color Glitch {color: rgba(200,200,200,0.9); text-shadow:1px 1px #555, -0.05em 0 rgba(255,0,0,.85), -1px -1px #FFF, 0.05em -0 rgba(0,255,255,.85)} // Layered Colorful Shadows {text-shadow: -2px -2px #ffc6ae, 2px 2px #ffc6ae, -2px 2px #ffc6ae, 2px -2px #ffc6ae, 5px 5px #ffece4, 8px 8px #ffc6ae, 13px 13px #f69477; color:#FFF} // Inset Text {color:#eee; text-shadow: 1px 1px #111, 2px 2px 2px #ddd, 1px -1px #111, -1px -1px #111, -2px -2px 2px #ddd } //Colorful Outline {text-shadow: 2px 2px red, -2px -2px blue, 2px -2px green, -2px 2px purple; color: #FFF} - 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel 🤍 - In this tutorial, I am going to teach you how to use custom code to create a unique look for your Squarespace blog, specifically for the new interface, Squarespace 7.1 → If you are using a 7.0 site like Brine, I have a different tutorial for you to check out here: 🤍 Anywho, this video covers the on-page element names like blog post title, thumbnail image, and read more button styles. I also share some premade codes you can copy and paste into your own site and edit to create some unique designs. All the codes from today's video can be downloaded for free at 🤍 If you have any questions about the codes above, let me know in the comments below! But most importantly, have fun with your Squarespace website. - Not sure which template you are using? My Getting Started with CSS guide can help you make sure you are using the right code snippet. Download it for free here 👉 🤍 - 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ #winwin - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
Why don’t I just use JavaScript??? Because I don’t wanna! 🤨 Okay so there’s a little more to it than that…. 😝 CSS changes the style, JavaScript changes the way something functions. Now 90% of the time, that’s fine! It adds cool stuff to Squarespace. There are some RAD JavaScript plugins out there; no shade for those awesome developers stretching the limits of Squarespace! Y’all rock 😎 But there is that small chance that it will break - break Squarespace or break its own function - and I’m not willing to take that chance. Wanna learn CSS basics for Squarespace... for free?! Check out my class at 🤍 #themoreyouknow #thinkinsidethesquare #customsquarespace
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel 🤍 - This tutorial is for any version of Squarespace, 7 or 7.1! - This tutorial will show you how to create a vertical line in Squarespace. A few important things to note before you copy and paste this into your own site: + There is more than one way to do this! This is just one approach of many because code is super customizable. + There are a TON of creative things you can do with border codes. To learn more about borders, visit 🤍 +The block ID chrome extension I am using in this tutorial can be found here. Important note: I am not affiliated with that extension or company in any way, I just use it myself! 🤍 // solid line #block-123456789 {border-left: 5px solid #50bdb8} // dotted line #block-123456789 {border-left: 5px solid #50bdb8} // faded edges line #block-123456789 {border-width: 5px; border-style: solid; border-image: linear-gradient( to bottom, rgba(0,0,0,0), #000, rgba(0, 0, 0, 0)) 1 100%; border-right:none} // rainbow line #block-123456789 {border-width: 5px; border-style: solid; border-image: linear-gradient( to bottom, red, yellow, blue, purple) 1 100%; border-right:none} //mobile only - don’t forget the extra curly bracket at the end to close your media query! 🤍media only screen and (min-width:480px){#block-12345698…..} 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ #winwin - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
In this 4-minute video, we provide a simple demo on how to generate custom CSS for your Squarespace website using ChatGPT. We walk you through the process of extracting HTML from your Squarespace page and using it as a prompt to generate CSS code using ChatGPT, allowing you to customize the appearance and style of your Squarespace site with ease. New to coding with AI? Start here: 🤍 Please note that the video focuses on a basic demonstration and provides a starting point for generating CSS using ChatGPT. Advanced customization and integration may require additional steps and considerations.
This tutorial is for all versions of Squarespace, from the latest 7.1 to older sites like Brine and Bedford theme templates. - In this tutorial, I am going to show you how a super simple line of code can turn any text block into a multiple-column text section. A few key things to note: + This works in any version of Squarespace and any theme + You need to know the NAME of the text style you are working with! In 7.0 your normal text goes by the code name “p” In 7.1, small, medium, and large paragraph text all have different names + You can install this site-wide or on an individual page OR on an individual post + You can add a line break in the text block with shift+enter (pc) or Ctrl+enter (mac) but a solid line break of “enter” will break the text block into two sections. We don’t want that!! So pay close attention to how you upload your text and utilize line breaks. + Last but not least, no, we can not insert a new text type in the middle of the multi-column paragraph. That will also break it into two sections causing the same problem a line break does Phew - that was a lot, right? Anywho, check out the video to see the step-by-step magic and when you are ready, grab the code below to make it work on your own site, being super careful to use the right code name for your specific type of text. //Two Columns p {column-count:2; column-gap:5%;} // Three Columns p {column-count:2; column-gap:5%;} //Two Columns with Justified Alignment p {column-count:2; column-gap:5%; text-align:justify!important;} //Three Columns with Justified Alignment p {column-count:3; column-gap:5%; text-align:justify!important;} Blog Posts Only // Version 7.1 Blog Posts .blog-item-content p{column-count:.... // Brine Template Blog Posts .BlogItem p{column-count:.... //Bedford Template Blog Posts .entry-content p{column-count:.... //Pacific Templates .entry-content p {column-count:... //York Templates .BlogItem p {column-count:... //Five Template Blog Posts .entry-content p {column-count:... 🔗Links to Related Content 🔗 →How to install CSS in one page on your Squarespace site: 🤍 → How to target one section on your Squarespace site with CSS 🤍 → Free Training: Squarespace CSS Basics: 🤍 - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ 🤍 - - - 📑 Get access to my collection of CSS codes for Squarespace at 🤍 - - - ⭐ NEW: List of my top 7 FREE Squarespace tutorials: 🤍 - - - 🙋 Need some help? Visit 🤍 to see my current support options. - - - 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - - - 💸 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 → 🤍 - - - 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 ♥
In this quick tip video I'll show you how to add a box shadow to images in your Squarespace website using CSS. Squarespace Block/Collection Identifier 🤍 ► Sign up for email updates: 🤍 ► Support my channel by becoming a Patreon 🤍 #Squarespace #SquarespaceTutorial
UPDATED version & free PDG guide available here 👉 🤍 - This video training is for Squarespace users interested in customizing their site beyond their design menu using the code language CSS. In this free training, you'll learn: - What CSS is and how it works with Squarespace sites - How to install CSS three different ways, and what makes them unique - Why themes & versions make a big difference in how you write code This training comes with a free PDF guide available to download at 🤍 - Ready for more codes? I've got you covered! 😎 The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Available now 👉 🤍 The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #anchorlinks #squarespacetips
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - This quick tutorial will show you how to use your own font on your Squarespace website! Please note that I recommend using an OTF font file, which stands for Open Type Font. Rumor has it that most browsers respond best to that type of file. Anywho, once you have your font file, check out this tutorial on how to install it and use it on your Squarespace website! Codes below - enjoy! :) Once you have uploaded your font file to the Custom Files section of your website, this is the code you need to use to install your font into the CSS: 🤍font-face { font-family: 'font-name'; src: url(unique-url-for-your-file: click the file in your custom file folder to get this url) } - After you have that code in place, it’s time to tell Squarespace how you want to use your new font! Use this code to specify what type of text should be using that font. You have five main options, H1, H2, H3. Normal Text, Quote Text, and Quote Source text. Technically there are even more places you can use it, but for the sake of this intro tutorial, we are keeping it to the main types. //Heading One Font// h1 { font-family: 'font-name', alternative-web-safe-font; } //Heading Two Font// h2 { font-family: 'font-name', alternative-web-safe-font; } //Heading Three Font// h3 { font-family: 'font-name', alternative-web-safe-font; } //Normal Font// p { font-family: 'font-name', alternative-web-safe-font; } //Quote Font// .sqs-block-quote blockquote { font-family: 'font-name', alternative-web-safe-font; } //Quote Source Font*// .sqs-block-quote .source { font-family: 'font-name', alternative-web-safe-font; } ▸▸▸ Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at 🤍 - Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
In this video, I'll share 51 of my favorite Squarespace tips. Squarespace Payment Service: 🤍 Link to PDF Guide + More Tips: 🤍 Join Squarespace Today: 🤍 Tip #1: Customize Your Favicon Tip #2: Keep Colors Limited Tip #3: Use Hero Images Tip #4: Use Easy-to-Read Fonts Tip #5: Add Social Proof to Important Pages 1. Quotes from Customers 2. Logo Cascades 3. Ratings and Stars Tip #6: Free Icons Icons 8: 🤍 Tip #7: Free Illustrations Icons 8 Vector Creator: 🤍 Tip #8: Free Stock Photos Unsplash: 🤍 Pexels: 🤍 Tip #9: Free Stock Footage Pexels Video: 🤍 Tip #10: Use Spacers to Give Your Design Breathing Room Tip 11: Single Call to Action Tip 12: Simplify Your Navigation Tip 13: Include Something Free in Your Navigation Tip 14: Customize Your 404 Page Tip 15: Password Protect Private Pages Tip 16: Include User Goals In Your Headlines Tip 17: Pick a Keyword Tip 18: Include Power Words 401 Power Words: 🤍 Tip 19: Customize Your Site Description Tip 20: Include Bulleted Lists Tip 21: Ask Rhetorical Questions Tip 22: The Rule of Three Tip 23: Write Articles in Google Drive Tip 24: Customize the Social Image Tip 25: Change the Author Tip 26: Organize Your Headings Tip 27: Create Images in Canva Canva: 🤍 Tip 28: Text Links Keyboard Shortcut: Command+K Tip 29: HTML Embed Codes Tip 30: Blog Title Tips 1. Try to use a power word 2. Use odd numbers 3. Include a goal 4. Include a keyword Tip 31: Give Away a Freebie Tip 32: Throw a Giveaway Tip 33: Create a Pop-Up Tip 34: Prioritize the Right Social Channels Tip 35: Find Your Communication Superpower Tip 36: Follow the SEO Checklist Link to Checklist: 🤍 Tip 37: Customize the CSS Link to Google Chrome: 🤍 Tip 38: Install Google Analytics Link to Google Analytics: 🤍 Tip 39: Create an Email Nurturing Sequence Day 1: Welcome Email Day 4: Free PDF or Resource Day 7: Interesting Content Day 11: Discount or Product Link Tip 40: Membership Through Memberspace Link to Memberspace: 🤍 Tip 41: Quick Search Hit the '/' Key Tip 42: Quick Login Hit the escape key on a live site. Tip 43: Create a Style Page Tip 44: Double Click on Back Arrow for Home Tip 45: Escape Key for Preview Tip 46: Related Post Section Tip 47: Find What Your Audience is Searching for Answer the Public: 🤍 Tip 48: Name Your Images Tip 49: Upload Files Tip 50: Duplicate Pages Tip 51: Remove Footers Code in the article (YouTube doesn't allow for brackets) Link to Article: 🤍 The Curious Millionaire: 🤍
How To Do Custom CSS On Squarespace Website 2023! (Full Guide) Today I show squarespace custom css,squarespace css tutorial,squarespace tutorial,custom css squarespace,how to use css in squarespace,squarespace css,squarespace,squarespace custom code,squarespace web design,custom css
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel 🤍 - This tutorial is for Squarespace 7.1 sites. If you are using a 7.0 site like Brine or Bedford, check out this tutorial instead: 🤍 Aaaaaand if you have no idea what that means, read up on what version you are using in this article because it makes a big difference in which codes will work for you! 🤍 - In this quick tutorial, I am going to walk you through the step by step process of installing code on a single page in a Squarespace site. There are two ways to do this; the first is my preferred method, page header code injection. Your page header loads before the rest of your page content, so it's a perfect place for CSS! The second option is to use an on-page code block, but I only recommend using this for three very specific reasons. 1 - Code blocks load with the rest of your content, so there is a chance that your changes won’t be visible for a few seconds while your site loads. 2 - If you are on a personal subscription - you don’t have access to page header code injection, so you have to take this route. 3 - This is the only way to make changes to individual collection pages, like single blog posts or individual products. You don't have access to individual collection page header code injection, so on-page code blocks is your best bet. Regardless of which method you use, you have to put your code in between two “style” brackets. Page header code injection and on-page code blocks can hold different types of code so we have to let the browser know that what we are about to share is a “Style” code by literally labeling it as a style. I can’t include the carrot symbols in a youtube description so you have to see the example in the video - pay close attention at the 02:09 mark and check the comments below for the example! 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ #winwin - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
As much as I love Squarespace, sometimes the settings available for mobile are… well, lacking. I used to spend HOURS creating custom code to do mobile specific things, like swapping out backgrounds, specific images, resizing fonts and more just to make it look a little bit better. But thanks to page sections in 7.1, that process has gotten a whole lot easier! - 📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign - This is one of the simplest ways to create a mobile layout in Squarespace! In this tutorial, you’ll see how two lines of code can create a super customized look specifically for mobile. Here is a link to the Chrome extension I used in the video to grab the data section id. I am not affiliated with them in any way, just a fan: 🤍 - - - Here is the code from this tutorial; be sure to change the data section id! 🤍media only screen and(min-width:641px) {[mobile-data-section-id]{display:none}} 🤍media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}} Do you want to do this with more than one section? You can add multiple data section id;s before the “display none” part of the code, separating them with a comma. Learn more about the symbols used in CSS at 🤍 - - - 🔗 RELATED VIDEOS 🔗 How To Customize Your Squarespace Product Page on Mobile: 🤍 How to resize images for mobile in Squarespace: 🤍 How to Create Equal Width Buttons in Squarespace: 🤍 How to use a custom font for the mobile menu in Squarespace 7.1: 🤍 Show The Squarespace Mobile Menu on Desktop: 🤍 - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 PARTNER10 → 🤍 - - - 🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 🤍 - 🙋 Need some help? Visit 🤍 to see my current support options. - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - 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 ♥
Sometimes you’ll have important information and links inside the footer of a website, and making that visible all the time can be really important! This tutorial will teach you how to use CSS to make sure the footer of your site is always visible. - This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: 🤍 — In this tutorial, we are working with a site that has THREE different sections in the footer! You can use the first code below to make the whole thing visible - always - or use one of the other codes to isolate just the last section, first section, or a specific one you have in mind. Be sure to install this in your custom CSS because the footer is visible on every page in your Squarespace site! You can add this code to your CSS file by clicking on design and then custom CSS. If you already have code there, don’t worry! Enter a new line and add this code under it. Here are the different codes from this tutorial: Make the entire footer always visible: #footer-sections { position: fixed!important; width: 100%!important; bottom: 0!important; z-index: 99!important } Make the last section of the footer always visible: #footer-sections .page-section:last-of-type { position: fixed!important; width: 100%!important; bottom: 0!important; z-index: 99!important } Make the first section of the footer always visible: #footer-sections .page-section:last-of-type { position: fixed!important; width: 100%!important; bottom: 0!important; z-index: 99!important } Make the second section of the footer always visible: #footer-sections .page-section:nth-child(2) { position: fixed!important; width: 100%!important; bottom: 0!important; z-index: 99!important } Want to add a border? Include this code before the final bracket: border-top: 1px solid #000 Want to add a box shadow? Add this code before the final bracket: box-shadow: 0 -5px 15px #333 - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 PARTNER10 → 🤍 - - - 🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 🤍 - 🙋 Need some help? Visit 🤍 to see my current support options. - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - 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 ♥
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign - In this tutorial I am going to show you how to use some custom CSS to center all the text in your website footer specifically on mobile devices. A few important things to note before you copy and paste the code below into your own site: ✨ There is more than one way to do this! This is just one approach of many because code is super customizable. 🔗 Here is a link to the tutorial on how to install this code on a single page in your Squarespace site: 🤍 🙋 Need some help? Visit 🤍 to see my current support options. 👍 This code is different for version 7.1 and Brine theme sites. Make sure you are using the right one! If you have no idea what that means, check out this blog article for more info on why it is oh so important: 🤍 Here is the code from the tutorial, specifically for 7.1 sites: 🤍media only screen and (max-width:640px){ #footer-sections * {text-align:center}} Here is the code from the tutorial, specifically for Squarespace sites built on the Brine theme: 🤍media only screen and (max-width:640px){ .Footer * {text-align:center}} - 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel 🤍 - I think a lot of us designers had to shed a few tears when we saw that 7.1 didn’t have the option to separate your nav into two. Not essential for design, but like parallax, we were sad to see it go. The good news is, with a little CSS, we can totally fake it!! This tutorial will show you how to create a fake secondary navigation menu in Squarespace 7.1 using some fancy code. This works for any number of links you have, and text or image logos - plenty of options here. This particular code below is for a four item menu, but you can update it for any number of nav items! Pay close attention to the 02:50 mark to learn more about that. THE CODE Text based site title, here is your code: .header-layout-branding-center-nav-center .header-title-nav-wrapper {flex-basis:100%!important; align:center!important; height:4vw; margin-top:-2vw; padding-bottom:1vw} .header-title {margin-bottom:-8.5%!important; margin-top:1vw} .header-nav-item:nth-child(3){margin-left: 35vw!important} Image based site logo, here is your code: .header-layout-branding-center-nav-center .header-title-nav-wrapper {flex-basis:100%!important; align:center!important; height:4vw; margin-top:-2vw; padding-bottom:1vw} .header-title-logo img {margin-bottom:-8.5%!important; margin-top:1vw} .header-nav-item:nth-child(3){margin-left: 35vw!important} PRO TIP Be sure to adjust the margins and padding with the vw that best fits your own site style. - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks The term "Squarespace" is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.
CSS is easy... until it's not. As much fun as it is to change your site with code, there are some common mistakes that you need to look out for when working with custom code for Squarespace! - Brand new to CSS? Start with my free class on how to customize your site with code: 🤍 - A self taught CSS super nerd, I have spent hours pulling my hair out over super simple code fixes. This is the video I wish I had access to years ago and I hope these tips help you make sense of those syntax errors! If you are brand new to custom code, or a CSS super nerd like me, I hope you find this quick rundown of common problems helpful. Here are some chapters you can jump to: 00:36 How to make sure your code is the one a browser uses 01:15 Why even simple selectors can be sneaky about their names 02:38 How a little - vs - can make Squarespace Codes not work 03:20 Mobile codes can cause problems in Squarespace 04:27 When to tell a browser you're adding a style code in Squarespace - - - 🔗 RELATED VIDEOS 🔗 How to use CSS in Squarespace: 🤍 CSS Symbols - How & When To Use What in Squarespace: 🤍 - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 PARTNER10 → 🤍 - - - 🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 🤍 - 🙋 Need some help? Visit 🤍 to see my current support options. - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - 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 ♥
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel 🤍 - This tutorial is for Squarespace 7.1 sites, not 7.0. If you are using a 7.0 Brine site, check out this tutorial instead: 🤍 And if you have no idea what that means, read up on what version you are using in this article, because it makes a big difference in which codes will work for you! 🤍 - This tutorial will show you how to use an image as the background of your header in Squarespace 7.1 I recommend using an image you upload into your site files so you can make sure you have access to it; using an image hosted by someone else (even someone as cool as unsplash.com) means that the owner could take it down or change it without you knowing; not good for a cohesive site design. Anywho, code is below, and if you have any questions about this tutorial let me know in the comments section. .header-announcement-bar-wrapper {background-image:url('url goes here'); background-repeat:no-repeat; background-size:cover;background-position: center;} .header {background-color:rgba(0,0,0,0)!important} - 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ #winwin - 🙋 Need some help? Visit 🤍 to see my current support options. - ▸▸▸ Ready to be an expert? Copy & pasting CSS is a great way to get started, but if you really want to level up your skills and write your own code, then you're ready for the Custom Code Academy. I created this course to teach you everything I know about CSS for Squarespace. Enrollment is open right now, and access lasts a lifetime. Join the academy today at 🤍 - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
Here's how to Add Custom #CSS HTML and #JS on #Squarespace. Watch this video to learn how to customize your Squarespace website with your own code. Learn how to use Squarespace in the following Playlist: Squarespace Tutorial videos Playlist : 🤍 Hi and welcome to this video. In this video I'm going to show you how you can add custom CSS, HTML and Javascript on your Squarespace website. Let's just get started right away and I have this sample website that I can use for this demonstration. So if you want to add custom CSS HTML or JS, you need to decide if it's something that you want to add for all the pages or it's something you want to add for a specific page. First of all let's see how you can add CSS for your entire site. Maybe you want to add something that will affect multiple pages . If you want to do that, the best way to do it is, you'll just come here under design then here under custom CSS, you'll put the CSS for that purpose. Okay so let's say that we want to add this on our Squarespace, so let's copy it. Then I can go back into Squarespace. If you're working with the custom design CSS, you don't need to do anything else. You'll just need to paste in the CSS. And then you can save, and once you save, the changes will take effect. So that's the first way, if you want to add CSS you can add it on this end. So for any page that we create, this style will apply. I doesn't matter which page we use. Let's go back so that we can see how we can add it on individual pages. If you want to add CSS on an individual page , what you'll need to is you'll need to go into the settings of that page. Here under Home New, you can go into the settings for that page and then you will come into advanced settings. Any code that you add here will be injected at the very top of the page. Note that this is HTML, so what you'll add here will need to be HTML, and the HTML style tags will enable you to add CSS. And as soon as you close it you can see it will automatically get closed and you can add the CSS here. When you are editing the page, just click here to add content. If you want to add HTML content you can use the code block. May be you want to embed something or add any code. Perhaps you want to embed something you can embed it right here. For instance let's go to YouTube and get some YouTube embed code which will be given in form of HTML. And then well come here and see how to embed it. So if you want to embed Mailchimp, Getresponse, any Form that you usually get embed code for, you can embed on Squarespace just like this. Get the embed code, then choose the code block and then you can paste in the code here. . And then I'm going to come back here and then Ill just paste in the code. And once I paste in the code, I will apply . Once you Apply you will see that you video has been embedded on Squarespace here. Let's say you want to add JavaScript in squarespace here. We can add another. Just go over here. I'm on Squarespace 7.1 , and on 7.1 this is what you need to do to add any block. if you want to add any Javascript inside here, you'll need to add JS using the HTML tags. You can add your Javascript inside here. So that's how you can add JavaScript on a page if you want to add JS. If you want to add external Javascript you'll just do it the same way. Maybe you want to add some external Jquery on squarespace. I can just do a sample here using Jquery. If you want to add external JS on a specific page, just do it the same we did it with custom CSS on squarespace,. This is going to add jquery and you can add your code . If you want to add JavaScript on all your pages, maybe it's something that you want to happen on every squarespace page. If you want to add it on all pages, you'll come here under settings and then you are going to go into Advanced and then you'll go into code injection. So if you add it on the footer , it will be added on the footer for all your web pages and if you add it on the header it will be injected on the header for all pages. You can also add CSS and HTML here. CSS and HTML that you need to add you can add them here to be added on every single page . So that's the job of the code injection feature, if you want to add any code that will be on every page, you can use it . If you want to add css on every page you can use the custom CSS on the design settings . Can you customize squarespace? How do I add custom CSS to squarespace?, Is Wix better than squarespace?, Add Squarespace custom code, Customizesquarespace websites, Code in Squarespace settings, Squarespace login, Is squarespace tweakable, 5upp0r7 My Ch4nn3l If this video was helpful to you, consider supporting my channel : 🤍 I will greatly appreciate your support. SOCIAL : Facebook : fb.com/bizanosa Website : bizanosa.com
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - In this tutorial, you'll learn about media query codes and how you can use them to change the way your Squarespace site looks based on screen size. If you want a browser to apply a custom code to a specific device size, media queries are how you make that magic happen! They let a browser know to only apply a code when a screen is a specific pixel width. Before you start plugging away with the codes below, here is some important info you should know: * Squarespace is a responsive website builder.* This means it will automatically change the look, size, and layout of your website content based on screen size. Using the media queries below, you can overwrite some of these responsive changes, but be careful that you aren’t reinventing the wheel! Some of their responsive style changes are there to help with accessibility standards and to make it easier for people to navigate the content of your site. Just because you can change it doesn’t mean you should. 😉 * Devices are always changing. * The current size iPhone is a totally different screen size and resolution than it was 5 years ago, and 5 years from now, it’s probably going to be different again! This is why responsive site builders like Squarespace are great - your site will change based on breakpoints so you don’t have to keep track of every single phone width out there. That also means that you should try to keep your queries to a minimum, and focus on the common breakpoints below, so your site displays similarly across common devices. * Always. Close. Your. Query. ALWAYS. * A media query is kinda like a box that you holds all the codes for that screen size. If you don’t close the box, and you add more code to your site, you will end up with a hot mess pretty quickly. Make sure you always add the closing curly bracket } when you are done with all the code changes for that device size. SUGGESTED BREAKPOINTS FOR SQUARESPACE These are the codes I use in my own Squarespace site creations and are just a suggestion. Change up any of the PX values below to create your own breakpoint. MOBILE ONLY 🤍media screen only and (max-width: 640px) {code goes here} TABLET ONLY 🤍media screen only and (min-width: 641px) and (max-width:950px) {code goes here} DESKTOP ONLY 🤍media screen only and (min-width: 951px) {code goes here} - 📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign - 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips #squarespacemobile #mobilesquarespacesite #mobilesitesquarespace #mobilesquarespace
CSS is one of my FAVORITE ways to customize a Squarspace site to make it unique. In this video, you'll learn my top targeting tips, and get the answer to one of the most common questions my students ask: when do I use a block id and when do I use a selector?! - - - Free training on CSS Basics for Squarespace → 🤍 - - - In this video you'll learn then answers to the three mose common CSS targeting quetions I get: (1) How do you know when to use a block id or a selector? A block id is unique to one specific block of content on a site. A selector is specific for that type. If you want to change all your buttons to be blue on a hover, use the selector. If you want one button to be blue on a hover, use a block id. How do you find out the block id? I use a free Chrome extension. Not an affiliate, just a fan: 🤍 (2) How do you know you picked the right selector? Try giving it a border - if you've outlined the specific thing you want to change, you've got the right selector! You can also set it to display:none. If what you want to edit disappears, then you've got the right one! My tutorials here on YouTube list the selectors that I use for that specific tutorial. For the full list of 500+, you can purchase my Squarespace CSS cheat sheet at 🤍 (3) What if you picked the right one, but nothing happened?! Make sure the browser picks up on your code change by adding !important after the value. You can find more troublehshooting tips at 🤍 - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ 🤍 - - - 📑 Get access to my collection of CSS codes for Squarespace at 🤍 - - - ⭐ NEW: List of my top 7 FREE Squarespace tutorials: 🤍 - - - 🙋 Need some help? Visit 🤍 to see my current support options. - - - 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - - - 💸 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 → 🤍 - - - 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 ♥
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Squarespace tutorial? You can donate via Paypal to help support my YouTube Channel 🤍 - All Squarespace sites are built to be responsive, meaning they will shift content and resize things based on the screen size. While it works fabulously most of the time, sometimes I just don't like the way it looks. I use a cool code trick called a media query to apply code to just the mobile version of my site, so I can do things like switch out banners for solid colors or resize fonts. This tutorial shows you how to work with media queries in Squarespace so you can make your mobile site look exactly the way you want it to! I also wrote down all the media query codes I covered in this video into one pdf that you can get for free at 🤍 ▸▸▸ Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at 🤍 - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform. - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out 🤍 - Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - In this tutorial, you’ll learn how to customize the captions displayed for an image gallery in Squarespace 7.1 What we are going to do is use custom code to give it a solid color background, create multiple lines of text, and then use a little more code to change the text styles and alignment. Before you watch the tutorial and use the code below, here are a few important things to know: This is specifically for version 7.1 and wont work for older sites built on version 7. You can isolate an individual gallery section using its block ID. This tutorial has more info on that: 🤍 You can apply this to a single page using page header code injection or an on page code block. Check out the tutorial on this page to learn how: 🤍 Here is the code from the tutorial. To install it site wide, navigate to Design and then select Custom CSS at the bottom. Paste this code inside the white box there on the right hand side. If you already have code there, just hit enter to add a new line and paste it there. This code will add a background color to the gallery caption: .gallery-caption {background:#fff} This code will create separate lines of text when you use a soft return (shift/enter): .gallery-caption p {white-space:pre} This code will center the text: .gallery-caption p {text-align:center} This code will change the font style of the first line of text in the description; I would recommend only using this code if you have multiple lines separated by the soft return (shift/enter) .Change up the color, font size, font weight, and any other typography code change you want to make! .gallery-caption p:first-line {color: blue; font-size: 1rem; font-weight:bold} You can combine all the codes above into three lines to create the look from the tutorial: .gallery-caption {background:#fff} .gallery-caption p {white-space:pre; text-align:center} .gallery-caption p:first-line {color: blue; font-size: 1rem; font-weight:bold} - 🤩 Want over 60+ pages of custom codes & pro tips specifically for customizing Squarespace? Download my CSS Cheat Sheet, available now at 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 to see my current support options. - 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 #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel 🤍 - Did you know that you can use CSS to change the look of anything highlighted on your website? Your browser refers to it as a selection, and this week's CSS tutorial is all about how to customize it. The code used this week is as follows: ::selection {color:#FFFFFF; background: #50bdb8;} Changing the HEX code after "color:" will change what color the font is, and changing the HEX code after "background:" will change the background color that will show up behind the font! Now no matter what style you go with the last step is the most important, select save when you are done ;) Now I love my color scheme but I am curious - what style did you go with on your own Squarespace site? Let me know in the comments below, and be sure to subscribe for another free tutorial every week! 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ #winwin - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
In this tutorial, you'll learn how to customize the contact form block in Squarespace. To all my long-term fans, you might be thinking, “but Becca - you already did a tutorial form customization like 2 years ago!” and you’re right! I totally did BUT that was the old form block, and today, we’ve got a new one to work with. Squarespace recently updated their custom code options for forms, and I’ve got some exciting new info & design ideas to share with you. 🤩 Get ready to enhance user experience, capture valuable data, and make a lasting impression with your customized Squarespace forms! Here are the selectors used in this tutorial: /* Change the input field border & background */ .sqs-block-form .field-list .field input, .field textarea { border: 1px solid #eee; border-radius: 5px; background: #e5f5f6; } /* Change the focus style */ .sqs-block-form .field-list .field input:focus, .field textarea:focus{ background: #F6EDCE; outline: none!important } /* Change (required) to an asterisk */ .sqs-block-form span.required{ visibility:hidden } .sqs-block-form span.required:before{ content:" * "; visibility:visible!important } /* Change the submit button colors */ .form-wrapper input[type=submit]{ background-color: #A1D9DD!important } .form-wrapper input[type=submit]:hover{ background-color: #EDD17D!important } With the new custom code options we just covered, you can create awesome personalized forms that engage your audience and match your brand perfectly. Forms aren't just for info capture; they're a chance to wow users and give them a seamless experience. So, get creative! BE sure to adjust the colors and borders, and try adding other creative codes to make it uniquely yours. But most importantly, have fun with your Squarespace website. 😉 - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ 🤍 - - - 📑 Get access to my collection of CSS codes for Squarespace at 🤍 - - - ⭐ NEW: List of my top 7 FREE Squarespace tutorials: 🤍 - - - 🙋 Need some help? Visit 🤍 to see my current support options. - - - 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - - - 💸 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 → 🤍 - - - 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 is amazing but they don’t always cover every design need. Luckily CSS is here to help! This tutorial will show you how incredibly simple it is to create a split-page layout in Squarespace with just a little extra code. - This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: 🤍 - This tutorial is an updated version of an older one, but is specific for Squarespace 7.1 and won't work for older versions. - This tutorial will teach you how to use CSS to create a split page layout for a page section in Squarespace, showing the section background image on half of the screen, with the content on the other half. I designed this code to reset on mobile, putting the content back over the image, to help you keep your site easy to use on small devices. Be sure to check out the video to see how this code works and what parts you will want to change! - - - Here is the code from this tutorial; be sure to add your own data section ID - here is the chrome extension I use (not affiliated with this extension or its creator!) 🤍 This code places the image on the left: 🤍media only screen and (min-width: 640px){ [data section id] .section-background { width: 50% } [data section id] .content-wrapper { width: 50%; margin-left: 50%!important; } } This code places the image on the right: 🤍media only screen and (min-width: 640px){ [data section id] .section-background { width: 50%; margin-left: 50%!important; } [data section id] .content-wrapper { width: 50%; margin-left: 0%!important; } } - - - 🔗 RELATED VIDEOS 🔗 How To Create A Split Page List Section in Squarespace: - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 PARTNER10 → 🤍 - - - 🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 🤍 - 🙋 Need some help? Visit 🤍 to see my current support options. - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - 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 ♥
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out 🤍 - Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign - This tutorial features my 7.1 demo site, but the codes will work in any theme in version 7 - In this tutorial I am going to show you how to use custom CSS to change the size of an image specifically on mobile devices. A few important things to note before you copy and paste the code below into your own site: ✨ There is more than one way to do this! This is just one approach of many because code is super customizable. 🔗 Here is a link to the tutorial on how to install this code on a single page in your Squarespace site: 🤍 🙋 Need some help? Visit 🤍 to see my current support options. 🔮 Here is a link to the chrome extension I use to easily find block ID’s in Squarespace. Please note I am not affiliated with them in any way, I just use this extension in my own work! 🤍 🤔 To learn more about targeting a specific page or image, visit the blog post for this tutorial: 🤍 This code will resize all the images on your site to be 60% their standard width and set the margins to “auto” which will center your image. You can adjust the percentage to any size you want to use, and play around with the margin too! .sqs-block-image {width:60%; margin:auto;} If you are trying to target a specific image with a block id, add that block id before the text .sqs-block-image like this: #block-yui-123456789 .sqs-block-image {width:60%; margin:auto;} This second code adds a negative value to the bottom margin to scoot a stack of images closer. .sqs-block-image {width:60%; margin:auto; margin-bottom:-10%} Ready to apply this to just the mobile version of your site? Add the media query to make sure it only applies to screens smaller than 640px in width. 🤍media only screen and (max-width:640px) { .sqs-block-image {width:60%; margin:auto}} How about just the tablet version? You can use the media query below to adjust an image size on any screen larger than 640px but smaller than 950px. 🤍media only screen and (min-width: 640px) and (max-width: 950px) { .sqs-block-image {width:60%; margin:auto}} - 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Squarespace tutorial? You can donate via Paypal to help support my YouTube Channel here 👉 🤍 - 📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign - In this tutorial I am going to show you how to use custom CSS in Squarespace to change a section background image on mobile devices. A few important things to note before you copy and paste the code below into your own site: 🖼️ Be sure to check the focal point for your image - you might not need to use CSS to make your mobile site look better! ✨ There is more than one way to do this! This is just one approach of many because code is super customizable. ⚠️Squarespace made a big layout change after this tutorial was created! You need to add the code .section-border{background:transparent!important} to your CSS so that new layer is hidden and your custom background image shows up perfectly. 🔗 Here is a link to the tutorial on how to install this code on a single page in your Squarespace site: 🤍 🙋 Need some help? Visit 🤍 to see my current support options. This code will remove the background image, leaving the solid color behind your text. 🤍media only screen and (max-width: 640px){ .section-background img { opacity:0!important } .section-border{background:transparent!important} } Use this code to replace the background image of a certain section with an image you upload. Be sure to change the text “your image url here” with the url for the image you upload! Also, don’t forget to change the 1 in nth-child(1) to represent the order number of the section you want to change. Be sure to add this on a single page using page header code injection, check the comments for some details on that or watch this tutorial here:🤍 🤍media only screen and (max-width: 640px){ #page .page-section:nth-child(1) .section-background img {opacity:0 } #page .page-section:nth-child(1) .section-border{background:transparent!important} #page .page-section:nth-child(1) .section-background { background-image: url(your-image-here); background-size: cover; background-position: center; background-repeat: no-repeat; } } - 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
Kicking off the new year here InsideTheSquare by dropping some serious code knowledge for Squarespacers. 😎 CSS vs HTML vs Javascript: Three code languages you can use in Squarespace and what they can do! 🎨 CSS is the style 🧱 HTML is the content 🔢 Javascript is an added function I use CSS to change what I can’t in the site styles menu. I use HTML in combination with other codes like Javascript. I use Javascript raaaaaarely because it can change the way Squarespace works; be careful with that one! Do you use all three? Have a fav, like me?! Hint - mine is CSS 😉 ❤️💬 Comment below and share this with your Squarespace friends! #squarespacetips #thinkinsidethesquare #squarspacetutorial #squarespace - - - 🙋 Need some help? Visit 🤍 to see my current support options. - - - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - - - 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 ♥
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - This tutorial features my 7.1 demo site, but the codes will work in any theme in version 7 - In this tutorial I am going to show you how to use custom CSS to add a filter to an image specifically on a hover. A few important things to note before you copy and paste the code below into your own site: ✨ There is more than one way to do this! This is just one approach of many because code is super customizable. 🔗 Here is a link to the tutorial on how to install this code on a single page in your Squarespace site: 🤍 🙋 Need some help? Visit 🤍 to see my current support options. 🔮 Here is a link to the chrome extension I use to easily find block ID’s in Squarespace. Please note I am not affiliated with them in any way, I just use this extension in my own work! 🤍 In this tutorial I am going to show you how to use custom CSS to apply an image filter specifically on a hover for your on page images. We can use specific code names to target image types, and block id's to target specific images. There are 6 filters that work great with Squarespace, and a run down on each one is available for free on my blog at 🤍 Here is a list of hover effect codes examples for grayscale for each of the 6 image block types. For an example of the other 5 filters, check out 🤍 for some more free code examples to try! All on-page image blocks: .intrinsic:hover img {filter:grayscale(1)} Card Layout .design-layout-card:hover img {filter:grayscale(1)} Overlap Layout .design-layout-overlap:hover img {filter:grayscale(1)} Collage Layout .design-layout-collage:hover img {filter:grayscale(1)} Stack Layout .design-layout-stack:hover img {filter:grayscale(1)} Poster Layout .design-layout-poster:hover img {filter:grayscale(1)} These codes are specific for those on page image styles. You can use a block id to isolate just one. Here is a link to that Chrome extension I used in the tutorial. Please note I am not affiliated with them in any way, I just use this extension in my own work! 🤍 To isolate just one image, place the block ID before the hover, like this: #block-123456:hover img {filter:grayscale(1)} There are a TON of other image types, like blog thumbnails, summary items, portfolio images, galleries, products, etc etc etc - there are WAY too many to list in a YouTube description! This tutorial shows you the img code trick that you can use if you work with a block ID. If you want to check out the code names for other specific image types, many of them are in my CSS cheat sheet. Here is a quick list of what pages those are on: On Page Images: page 26, 7.1 Galleries: page 28, Portfolios: page 34, Blogs: page 20 Events: page 19, Products: page 35, Summary Blocks: page 43 - 🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 to see my current support options. - The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥ - #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
This video is applicable to Squarespace 7.0 only. If you have coding knowledge and want to customize your site beyond the adjustments you can make in the Design panel, you can add CSS code using the CSS Editor. CSS should only be used to change fonts, colors, and backgrounds. Other CSS changes could potentially harm your site. Get started on your Squarespace website at: 🤍 For more Squarespace tutorials, visit: 🤍 ABOUT SQUARESPACE Squarespace empowers millions of dreamers, makers, and doers by providing them with the tools they need to bring their creative ideas to life. On Squarespace’s dynamic all-in-one platforms, customers can claim a domain, build a website, sell online, and market a brand. Our suite of products combines cutting-edge design and world-class engineering, making it easier than ever to establish and own your online presence. FOLLOW US ON SOCIAL IG: 🤍 TW: 🤍 FB: 🤍 LI: 🤍
Get the plugin: 🤍 Create a Mega Menu in Squarespace 7.1 - In this video I show you how to easily create a mega menu in Squarespace 7.1 with my new mega menu plugin! Sign up for my free Squarespace CSS for beginners eCourse: 🤍 Learn to create custom layouts in Squarespace! 🤍 My goal is to help you create more custom Squarespace websites so that you can charge more for your services. If you need help designing, updating, or implementing custom code on your Squarespace website, please reach out to me: 🤍 If my content has helped you out I would really appreciate a small donation to allow me to keep making tutorials: 🤍 Music: 🤍
⚡️ FREE TRAINING⚡️ DIY Your Dream Site: 5 key steps to a stress free + beautiful website - Join instantly here: 🤍 Did you know you can create a vertical line in Squarespace with two quick steps and a little copy + paste code? Here's how 👇 Step 1: ⚡️ Add a code block where you want your vertical line to appear ⚡️ Add your code (find it in our blog post via the link below!) ⚡️ Save! Step 2: ⚡️ Go to Design, Custom CSS ⚡️ Copy + Paste the code from our blog post ⚡️ Adjust the look of your line and save! Make sure to visit the link below to grab the full deets ✨ 🤍
Squarespace CSS Deep Dive: Adding SVG Icons to Buttons - In this video I get much more granular and show you a cool technique for adding SVG icons to buttons that automatically inherit the button text color. Get the code! 🤍 IconMonstr: 🤍 SVG Encoder: 🤍 Sign up for my free Squarespace CSS for beginners eCourse: 🤍 Learn to create custom layouts in Squarespace! 🤍 Get my giant library of CSS and Code Snippets for 7.1! 🤍 My goal is to help you create more custom Squarespace websites so that you can charge more for your services. If you need help designing, updating, or implementing custom code on your Squarespace website, you can hire me to do so through my contact page: 🤍 If my content has helped you out I would really appreciate a small donation to allow me to keep making tutorials: 🤍 Save 10% off your first subscription of a Squarespace website or domain by using code PARTNER10. (This is an affiliate link, so if you end up setting your website live I will receive a small commission!) squarespace.syuh.net/sewebdesign Music: 🤍
.svg){kind=small}
![Squarespace Understanding Where to Customize Your Website [Code Injection, Custom CSS, and More]](https://i.ytimg.com/vi/pSAk80PMJX4/mqdefault.jpg "Squarespace Understanding Where to Customize Your Website [Code Injection, Custom CSS, and More]")
