![]() ![]() You'll find plenty of copy/paste code to use in your own website in the Resources section below. My goal was to offer you a simple app to customize & export a cool CSS background for your projects. I recommend placing this code in Design > Custom CSS. CSS backgrounds, 1 click away from your project. Once you have the Section ID, you can add CSS code. "Your Page Title Here" becomes "#your-page-title-here".Īlternatively, you can use the Squarespace ID Finder to get this information without having to do the conversion yourself. ![]() add a # symbol at the beginning of the section ID.replace any spaces in the title with hyphens.To convert your Index Section page title into a section ID: To add CSS to my "Get Unstuck" Index Section, I have to convert the page title into a section ID that I can use in my CSS code. Step 2: Convert the Index Section Title into a Section ID So in my settings, I can see that I named the 2nd Index section on my homepage "Get Unstuck." In this module you will find out how to use the various types of gradients available in CSS. Under the Index Page, you'll find a list of Index Sections.įor example, I use a subtle gradient on the 2nd Index section found on my homepage. This comes in useful in a few ways which we’ll get into later. To do this, open up your settings, and navigate to the list of pages on your website. While declaring the a solid color uses background-color property in CSS, gradients use background-image. The methods in this tutorial should work in all Squarespace templates, but please let me know if you run into a template where it doesn't work.īefore you can add any CSS code, you have to decide which Index Section is going to get a beautiful background gradient. Note 2: I use the Brine template, and that's what this tutorial is based on. Note: For the purposes of this tutorial, I'm going to specifically talk about adding gradients to Squarespace Index pages. ![]() For 7.1 instructions, scroll down just a little further. The following instructions primarily cover 7.0. This article was written before Squarespace 7.1 was released. Now that you've seen a few ways that big companies use gradients on their websites, let's go over how you can add gradients to your website! So how do you add gradients to your Squarespace website? Here are a few examples of gradients that you may have seen around the web. For example, this block has a gradient background. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |