Categories
Squarespace

How to place an image in between sections in Squarespace version 7.1 // Squarespace CSS Tutorial [Video]

How to place an image in between sections in Squarespace version 7.1 // Squarespace CSS Tutorial

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

This tutorial is specific for version 7.1. If you are using a brine theme site with index pages, check out this tutorial instead:

In this tutorial I am going to show you how to use custom CSS to pull an image up so it hovers between two sections of your site.

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: https://www.youtube.com/watch?v=kX6kRjCbzu8

🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ 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! https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

This code will add a negative top margin to an image on your site so it will hover between two sections.

.sqs-block-image {margin-top:-50%}

If you are trying to target a specific image with a block id (which I STRONGLY recommend) add that block id like this:
#block-yui-123456789 {margin-top:-50%}

Want to adjust this code for the mobile version of your site? Add this media query in a new line to make sure it only applies to screens smaller than 640px in width. Don’t forget to change that example text to the right block id!
@media only screen and (max-width:640px) { #block-yui-123456789 {margin-top:-50%}}


🤩 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 👉 https://InsideTheSquare.co/css

🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️

🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ 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

Watch/Read More
Categories
Squarespace

How to Make Buttons the Same Width in Squarespace [Video]

How to make uniform buttons in Squarespace for a neater look.Code Snippet You'll Need:/* Medium Button Styling */.sqs-block-button-element--medium { width: 70% !important;}💻 Visit my agency website: www.kanseptagency.com📱 Visit me on IG: www.instagram.com/marinemilyjohnson👉🏻 Or my business IG here: www.instagram.com/kanseptagency📧 Send me an email: hello@kanseptagency.com📆 New video every Friday! 🎉

Categories
Squarespace

Squarespace Block Conclusion | Squarespace 7.1 [Video]

Hey guys, If you are watching this video that means you have learn how to use squaresapce block. In the next series I will discuss about squaresapce section. so please subscribe my channel to continue learning from me.Facebook Page: https://www.facebook.com/byaahmmadWebsite: https://aahmmad.com/

Categories
Squarespace

THE ULTIMATE SIDEKICK FOR YOUR SQUARESPACE WEBSITEWith SquareKicker say goodbye to copy & paste Squarespace plugins. Customize your Squarespace website with this full control design and animation extension. SquareKicker is a no-code solution for custom design on Squarespace websites. Unleash your creativity and design the way you always wanted. Until now, Squarespace websites have typically been made with either their pre-made templates or complex code. SquareKicker takes the simplicity and elegance of creating beautiful websites on Squarespace while seamlessly integrating the power for designers to build customizations without needing to write a single line of code. There has never been a design tool that allows so much flexibility!Get started for free at SquareKicker.com