Do It Yourself – Website Tutorials

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 http://bit.ly/guide-to-css
—
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 typing text effect in Squarespace, where a block of text will appear to be typed onto the page after it loads. 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/squarespace-tutorials/typing-text

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=”typit”(right angle bracket)HERE IS AN EXAMPLE OF SOME TYPING TEXT(left angle bracket)/div(right angle bracket)

Step two: Navigate to your Custom CSS (Design – Custom CSS) and paste this code below
.typeit {
overflow: hidden;
font-size:25px; /* this can be any font size you want */
border-right: 2px solid #50bdb8; /* change this color in the keyframe too */
white-space: nowrap;
margin: 0 auto;
animation:
typeit 3.5s steps(40, end),
right-border .5s step-end infinite;
}
@keyframes typeit {
from { width: 0 }
to { width: 100% }
}
@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #50bdb8; /* change this in the css above too */ }
}

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;

Want to change the font size on mobile? Add this line to your custom CSS and change the value to the font size you want to use on any screen smaller than 640px in width:
@media only screen and (max-width: 640px){ .typeit { font-size:25px!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 at https://InsideTheSquare.co/css

—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #scrollingtext #squarespacecodes #freesquarespacetutorial

The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.

source