squarespace tutorials

Hello Ladies! This is where I will include any tutorials that you have mentioned that you would like me to show you. If you ever have any questions, or want me to add any more tutorials, please just let me know!

 

Using Blocks In Squarespace

 

There are honestly so many amazing things that can be done using one tiny feature on the Squarespace platform. I LOVE the blocks feature. 

Let's say you want to add a picture, another block of text, a quote, a video, a gallery, a slideshow, or any of it's many other options. It's super simple to do! 

First you simply hover your mouse over the side of the area that you are wanting to add your item to. You will see this little teardrop appear. Click on that teardrop and you will have the blocks menu appear. Next you simple choose the block that you are wanting to use.

If you want to embed a video, create a slideshow, add a questionnaire form, add a button, an image, a quote, new text, etc... All of that is done right here in this little box. It's all pretty easy to do once you realize that and just start clicking.  

Adding Images To Your Gallery Page

 

You already know how to use the Block Feature of the platform since you have added an image to a post already. Now you just need to see how simple it is to continue adding images to your gallery the way that they already exist. This is super simple to do!

First you simply hover your mouse over the side of the area that you are wanting to add your item to. You will see this little teardrop. When you are doing this on your gallery you will want to look for the teardrop that has a line that only spans the width of the picture above it. If you hover and you only see the line that goes all the way across, just move your mouse a tiny little bit. 

Next you will choose the image option in the blocks menu. 

Now you will add your image. When you do this I typically recommend you remove the caption option. Also, for SEO purposes you will want to name each image. 

Now, something that I do want to point out is that doing this does not allow for each image to be clickable, if this is something that is important to you, then we will have to set the gallery up using the gallery gadget rather than adding images this way. 

things you can do with images

 

Put Them Side By Side

You can also add images side by side like you see above or on the gallery page posts to make them look nice, or add them into the text where the text surrounds it. You add your images, then simply drag one to the side of the next! BUT... Do you remember those lines that pop up below the images when your looking to add something? They also appear beside the image when your moving them side by side! Simply move the picture around until you see the line that is exactly the same height as the image your putting it next to and then let it go. 

 

Add Your Image Next To The Text Or Make Your Image A Part Of The Text

To Add it Next To The Text - You start this just like you would any other time. I click above or below the text and then add my image. I name the image, remove the caption, center the little circle onto the part that I want to be considered the focus of the image, and then hit save. Now You will drag your image over beside the text that your wanting it to be a part of. If it's a large image you will have to resize it. I will teach you how to do that below.

When you click the image like your going to edit it, you will see an outline surrounding the image. To make it smaller and let your text have more room you will hover over the side line that is closer to the text. And icon that looks like a line with an arrow on each side. Click that and drag it over away from the text and the image will shrink while proportions stay the same. 

To Add It In With The Text/Wrap The Text Around It -You start this just like you would above. I click above or below the text and then add my image. I name the image, remove the caption, center the little circle onto the part that I want to be considered the focus of the image, and then hit save. Now You will drag your image over onto the text that your wanting it to be a part of. A square or rectangle representing the image will appear kind of over the text. Click it there. If it's a large image you will have to resize it. As long as you have enough text, it will wrap around the image. I am going to throw in some dummy text just to show you what I mean. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu velit feugiat, tristique turpis ac, rutrum justo. Vivamus imperdiet accumsan nibh, et fringilla mauris volutpat in. Cras neque mauris, fringilla a erat id, sodales laoreet nulla. Curabitur et luctus nulla. Duis tincidunt enim nec pulvinar mattis. Fusce cursus molestie pellentesque. Aenean mollis auctor pretium. Mauris luctus, justo quis sollicitudin imperdiet, mi nunc sodales turpis, eu consectetur mi orci id nulla. Sed metus urna, consequat ut porttitor vel, luctus at tellus. Nullam vel pellentesque magna. Sed a scelerisque eros. Vivamus id erat vel turpis aliquam blandit. Donec ut ipsum nulla. Maecenas turpis leo, elementum at dui non, egestas varius lacus. Sed feugiat vel augue et congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu velit feugiat, tristique turpis ac, rutrum justo. Vivamus imperdiet accumsan nibh, et fringilla mauris volutpat in. Cras neque mauris, fringilla a erat id, sodales laoreet nulla. Curabitur et luctus nulla. Duis tincidunt enim nec pulvinar mattis. Fusce cursus molestie pellentesque. Aenean mollis auctor pretium. Mauris luctus, justo quis sollicitudin imperdiet, mi nunc sodales turpis, eu consectetur mi orci id nulla. Sed metus urna, consequat ut porttitor vel, luctus at tellus. Nullam vel pellentesque magna. Sed a scelerisque eros. Vivamus id erat vel turpis aliquam blandit. Donec ut ipsum nulla. Maecenas turpis leo, elementum at dui non, egestas varius lacus. Sed feugiat vel augue et congue.

 

Resize Your Image Height & Select Focus Point

So the next thing that I want to teach you to do is change the height of your image and select your exact focus point of the image. Both of which are actually extremely easy to do. 

Screenshot 2016-11-03 10.59.54.png

Selecting The Focus Point - This is honestly so super simple, and will only take me half a second to explain it to you. So When you look at the image above, do you see that image box where you add your image, name your image, etc??? Have you ever noticed that little grey circle on top of the image that you added? That little grey circle will add the focus on the image. You simple drag it to where you want the focus to be I do this with every single image. Just trust me and do it. Because it will come in handy with the next thing I am teaching you. 

Change the Height of The Image -This is another simple thing! Let's say you added an image to a post, but it just looks too tall, and you don't necessarily need the bits on the top and bottom of the image. You can resize it pretty easily! Once you have selected the focus point of the image and placed it where you would like it, you will hover over it like your going to edit it. You see that little full grey circle at the bottom of the image? You click that and drag it up to make the image shorter! By selecting that focus point first you will ensure that the part you want remaining in view does. If you have to change the focus point it will remove the height changes. But its easy to redo!

Changing Fonts/Colors On A Specific Page While Leaving The Rest Of Them The Same

 

Finding the Main CSS Coding

You wanted me to show you how to change the fonts, colors, spacing, etc on specific pages rather than just doing it in the template designer. The main code for this is simple, and you can tweak it according to what you would like to change! 

.h2{
    font-family: calluna;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6em;
    font-size: 1.2em;
    text-transform: none;
    text-decoration: none;
    letter-spacing: 1px;
    color: #ec4b6f;
}

Okay, so that code above shows how to edit so many things! I recommend only including what you are actually trying to change when you type the code in, BUT I wanted to show you most of your options. 

h2 - The h2 is the heading selection. For example the Main CSS Coding that you see for the title of this tutorial is your h2 selection because you gave it the Heading 2 attributes. 

font-family - you can change this by typing the font name into the " ". Make sure you leave those there, or it will not work! You will only be able to use fonts that Squarespace provides though. Custom fonts from elsewhere is a whole new thing! 

text-transform - you have a few options here! You can do uppercase, lowercase, capitalize. 

font-weight -  you can see the options that there are for each of the fonts. You can only use a weight that Squarespace already accepts. These are typically 100, 300, 500 etc.. The bigger the number, the heavier the weight, which means the bolder it looks. 

letter spacing - I typically don't mess with this. But the higher the number, the more spacing between each letter. 

font style -  you have a few options here! You can do normal, italic, oblique, and bold. 

color - You can change this easily as long as you know your #value! Simply type it in there. Here are your color values!

Navy Blue- #373e5d | Dark Pink: ##ec4bf6 | Light Pink: #efabb5 | Gold: #f2d382

padding - I always start this out with the 0 0 0 0 values. Now you just need to know what each 0 stands for. If for example I did padding: 10px 20px 30px 40px; ... this is what you would be changing in terms of each number. padding: 10px(top) 20px(right) 30px(bottom) 40px(left). I would normally use the same values on top & bottom, and then again on right & left, but this example just shows you to change this. 

margin - margin can be done the same way. BUT you probably won't use margin often. Padding adds padding to the text, but changing margins physically moves the entire item. 

This is where it gets tricky...

Now that you know how to change the coding, we have to choose what you are changing it for! This is where I said I would be doing some teaching. Now that you know the general code, and what each thing changes, I can tell you where to change it and how to choose what you are changing. 

How To Choose What You Are Changing

Okay. So if you want specific text on the page to take on certain attributes then I suggest giving that text a specific tag. For example, select the text and apply Heading 1. The tag for that would be h1. BUT if you want to find that tag and the current styling on the page you will highlight what you are wanting to change, right click, and the select inspect element.  You should then see something like the code that I provided. You can actually test your edits right there. They just won't save.  What I do is copy this code, paste it where I need to, make the tweaks there, and then save. But this teaches you where to find the selector that you need to use to change a specific selection. 

Now that I know what to change, and how to change it... WHERE THE HECK DO I CHANGE IT?!?

Okay. So there are two places that you can insert custom CSS. 

OPTION ONE - The first option changes the css for that selection on the entire site. Here is how you find this place! LOGIN > DESIGN CUSTOM CSS. Once again. I suggest that you only use this option if you want to change a certain selection on the entire site!!!

OPTION TWO - This option will change the css for the selection on a specific page. LOGIN > PAGES > CLICK GEAR  NEXT TO PAGE >ADVANCED >PAGE HEADER CODE INJECTION. This is where you type your code in. Now when you do it on the custom css page you will typically see the changed right there, even before you hit save so that you can make sure you like it before saving. Here, you will have to hit save first! Then refresh your page and you should see your edits in action. 

Selecting Specific Thumbnail Images To Represent A Post/Page

 

Okay. So every time you do a post and someone sees if on something like Bloglovin' or Feedly OR you share it on social media like pinterest, facebook, or twitter a picture usually accompanies the link. Did you know that you can choose which image represents that post?!? 

Yup, you sure can!

One thing that I will mention is that I prefer to do this FIRST when creating my post because if you accidentally publish it or save it without an image, it may not always apply the way that you would like it to. In some cases it will just show a random image from the post.

Screenshot 2016-11-03 11.37.59.png

So when you begin a new post you will see a box pop up where you add your text and images and such. On the upper right corner of that you will see Content, Options, Location, and Social. Content is where you add your post content. Now click Options. Here you will see a box to add a thumbnail image. Simply add your image there and then select the focal point.

Another thing I recommend you doing is clicking over to the Social tab there as well. 

When you do this, you will see the connected accounts that you have. If you want the post to automatically share to these accounts when you publish it, you simple click to turn that option on right there! 

ALL DONE!

 

That is everything that I could think of to put on this page for you. If you have any questions, or think of any other tutorials that you need just let me know! I am always here to help, and you will find this platform really is so easy to learn and work with!