![]() Just two well-chosen colors suffice to add some drama, while preserving the sense that you have things under control. Be wary of using too many colors unless you have a specific idea. That way you reinforce your brand and give the site a sense of coherence. I recommend choosing colors that match or complement the color palette you use on your site. In most cases you'll add CSS to your Squarespace site by going to Design > Custom CSS in the Style Editor. If, for example, you have an index page section in the Brine template named "grandma", the code would look like this: It works exactly the same as I outlined in the earlier post on CSS background patterns: just put the code in between the curly brackets that follow the page or block identifier. You'll need to identify the page or block you want to add the animated color gradient to. The main ones are the rule to govern the animation, the angles, and the background size. I use an animated color gradient as a background for a section on the Marksmen Studio homepage.Īdding an animated gradient background is similar to adding a gradient background that is not animated, except that we have to throw in some extra elements. But the sweeping animated gradient, which utilizes the color palette from the image at the top of the index page, gives it a cool, sophisticated look. It's just a contact form with some CSS styling. Check out the footer on this Squarespace website by Pocketknife. ![]() (Note: sometimes color gradients are called ombré, though that refers to gradations within the same color family.)ĭone properly, animated gradients can add a nice touch to an otherwise unremarkable page, or even completely alter how it's perceived. What are animated gradients?Īnimated color gradients are gradients that shift along a background according to a defined formula, either infinitely or for a specified number of iterations. Now it's time to play with a different kind of background: animated gradients. I've also posted on adding a color gradient border with CSS, changing Squarespace's announcement bar's background to a color gradient. Then highlight the text you want to display as a button and make it a link.In an earlier post, we covered adding CSS background patterns in Squarespace. ![]() You can do this in Marketing > Announcement Bar. To do this, you will need to add a link to part of the text of your announcement bar. You can also add interest and create more conversions turning your link into a button on the Announcement Bar. Once it’s enabled, you will be able to edit the content and add a Clickthrough URL to the page you (either on or off your website) want to direct people towards. Simply navigate to Marketing > Announcement Bar and choose Enable Announcement Bar. It’s easy to turn on the Announcement Bar. Note: this is a premium feature and is only available to sites who are on a Business or Commerce Squarespace plan. I’ve had clients use this space to share their best (or newest opt-in), get their latest COVID-19 policy updates in front of potential clients, and promote their new services. Relay important information (like your COVID-19 policy, upcoming leave, or a unexpected opening in your project calendar) Let visitors know your availability for the upcoming months Promote your newest blog post, project, or service This one simple bar at the top of your website can be a great lead generator because you can use it to promote anything you like: Today, I’m sharing five ways you can customize the Squarespace Announcement Bar using CSS. Squarespace’s built-in Announcement Bar is a great way to give your website a little extra something when it comes to marketing, but it tends to be a bit boring.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |