Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare
—
This tutorial was recorded in my 7.1 demo site but also works for older versions of Squarespace.
—
This tutorial will show you how to create a scrolling text effect in Squarespace, where a sentence will appear to move from the right to the left. A few important things to note before you copy and paste this into your own site:
+ This will work in any version of Squarespace, 7, 7.1, and even older sites built on Squarespace 5.
+ There is more than one way to do this! This is just one approach of many because code is super customizable.
+ Get creative with the font itself using some CSS! I have a few examples of codes for color, bold font styles, but get creative here 🙂
+ Youtube won’t allow those greater-than/less-than/angled brackets in a YouTube description, and those are key for steps one and three! If you can’t see the code in the video, you can copy it right out of my blog post at https://insidethesquare.co/scroll
Alrighty, that’s it for the good-to-know info! Steps and codes from the demo are below. If you need any help along the way, visit insidethesquare.co/code-help
—
Step One: Add a code block to your site with the sentence you want to feature, like this example here.
(left angle bracket)div class=”scroll”(right angle bracket)HERE IS AN EXAMPLE OF SOME SCROLLING TEXT(left angle bracket)/div(right angle bracket)
Step two: Navigate to your Custom CSS (Design – Custom CSS) and paste this code below
.scroll{
overflow: hidden!important;
position: relative!important;
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
-moz-animation: scroll 15s linear infinite;
-webkit-animation: scroll 15s linear infinite;
animation: scroll 15s linear infinite;}
@-moz-keyframes scroll {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#page {overflow-x:hidden}
Optional Step Three: Customize your code with some CSS! You can change the font family, color, size, style and more using some code. If you want to change the font color and thickness, add this after your first curly bracket {
color:red; font-weight:bolder;
▸▸▸ 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 https://InsideTheSquare.co/css
—
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
