I know this is a year+ after the initial request but in case anyone else lands here like I did...
I've found the easiest (and best-performing) way to do this on a 7.1 site is to hide the blog post title and recreate the title in the body of the post using a Heading 1. This gives you lots of flexibility to put an image, video, or any other block (or blocks) above the post title. Even columns! It also enables you to have a different title on the index page / summary blocks versus on the post page itself, should you want to do that.
My experimentation with moving the title or image with JavaScript always had just enough "jump" to it on page load as to be undesirable. Using CSS and a little content duplication is rock-solid and hugely flexible.
Add this to Custom CSS to get the effect on ALL blog post pages site-wide, preserving the ability to edit the title in Edit mode. This does not account for the categories, as that wasn't in my requirements.
.blog-item-title {
display: none;
// show the "real" title when in Edit mode
.is-expanded & {
display: block;
}
}
Hope that helps someone.
The co-owners Nick & Hannah are wonderful! I've had many interactions with them through email & social media and their recent webinar was awesome, giving us a chance to give them real-time feedback & ask questions live. The SK team is always extremely receptive to feedback and always happy to help if I have a question, any time.
As a long-time user myself (I've used it for over a year now, having signed up to try the Beta version when they first launched last fall & just renewed my plan this month), I'll answer your questions with my own experience & opinions:
Site handoff can still be easy, even if I used SquareKicker! While designing, I try to be conscious of whether I think the client will want to perform edits in SK after handoff or not, and then use that to decide which types of edits I make with SK so they don't cause confusion down the road, as the one downside is that there's not really a visible sign that a block has been edited by SK until you open the SK editor so it can be hard for clients to know whether to edit a style in Site Styles or SK. That said:
My clients don't tend to be in industries that keep their site's content updated as often as I do, and so they don't tend to want to edit design stuff after handoff, just content; they also don't want the subscription or to learn an additional thing. I teach my client the how-tos of basic edits & content updates in Squarespace, then remove the site from the Active list in my SquareKicker account so it no longer counts toward my 10 Active sites. If the client needs an adjustment to something I've edited using SK, then I put it back in the Active list, make the changes & once the client is satisfied, I move it back to Inactive. Easy peasy.
IF the client DOES want to use SK to edit themselves & take over the subscription, that's easy as well: simply email Nick & tell him specifically what Squarespace website url you need transferred & share the email the client used to signed up for their free trial of SK. Nick transfers the code/changes made with SK and the ownership of the plugin to the client's SK account FOR us; this removes it from my entire site list, gives client full access & they can choose what plan they want, while keeping the changes I made with it & the ability to make further changes themselves.
If the client's subscription lapses, the design changes STAY, but further changes aren't allowed until the subscription is active again.
SK's subscription cost for clients: Of course! I just explain that SK gives them more design power which will help their site be more unique, but it's an external plugin not native to Squarespace. If they want to use it themselves or have ownership of how it works, they can opt to pay for it longterm (annually) or month-by-month as needed, subscribing & cancelling the subscription when they need to use it & when they don't. It doesn't have to be an ongoing cost, which is nice!
A happy side effect of keeping their site in my SK site list, is that I essentially take on the cost as I'm paying for the Designer Plan which allows 10 active sites regardless of what they decide, and I can keep their site in my Active or Inactive list as needed. Inactive sites don't count toward my Active 10, so I rarely reach the limit, but I do typically have 3-5 Active at any given time.
On your last concern about not being a "real designer" if you use a tool like SquareKicker, that's just BS and/or imposter syndrome making you second guess yourself! I daresay anyone can say that about anyone, regardless of whether they used a tool like SK or not –just based on a judgment of skills & what was done in the design, alone. 😂 In fact, I recently had a client reach out who'd had their site designed IN Sqsp 2-3 years ago and I've NEVER seen a Sqsp site look so much like something that originated in the late 90s or early 00s. I honestly had no idea Sqsp sites could even look that dated & with a severe lack of design strategy, –and yes I definitely judged the designer a bit! Here's a few things that actually matter, regarding this argument though:
1) You are a designer if you did the work, the work is functional for the client, the finished product ultimately helped their business, you got paid to do it, and the client is happy. That's really all that matters.
2) Design & Development are 2 completely different things. I am a "web designer" and I'm confident in that title; while I can write basic HTML and CSS, I would not call myself (& don't want to be) a "web developer" & that's okay with me! There is a place for both.
3) The nature of how the Sqsp platform works means that more extreme customizations HAVE to be coded in, because it's not included in the native features. Whether or not you write the code yourself points more toward whether or not you've ALSO got some development skills.
4) Anything that saves time is gold to people who work with clients 1:1, because our time is literally money, whether that means automations used in our CRMs or tools like SK –both save us time, but one wouldn't mock us for saving time writing emails or reminders to clients manually when we can automate that & save time. Same deal with using SK; it accomplishes the same task, but faster.
5) I think SK works for many levels of designers, who know coding basics, who can code sites from the ground up, or can't write code at all, which is pretty amazing. Those who would scoff at it or make fun of "us" for using it, etc likely aren't designing on Sqsp to begin with, so I wouldn't let this worry you. I've used it for over a year myself, and some of the changes I make with it, I could write myself but the fact that I don't have to is nice!
6) I'd argue that using SK to make custom changes can actually be smarter than writing the code ourselves if the client isn't on a site maintenance package with you, because if Sqsp changes the code on their backend and our custom code stops working because of that change, it's because the static code written won't update itself; the customization may break resulting in a panicked client request to fix it. BUT if we use SK for stuff like that, this is something they stay on top of for us, so as the code changes on Sqsp's end, SK will quickly update the way the plugin implements those design changes, which keeps things from breaking, and our clients from panicking that something looks wrong or doesn't work/display/whatever. 🙌🏻
7) I also do subcontract work for another Sqsp designer who also uses it for her clients as well, and when I build the sites for her (& also use SK during the build), I just handoff ownership of that site's SK plugin to her when the build is done and she chooses whether to keep the site in her plan or pass off to her client. So never doubt that "real" designers are using it in the wild! lol
Hope that helps! 😄
I was looking for an answer to this too but couldn't find one! So I made this code from the calendly one, and am posting it here in case it helps someone else. Obviously change the style to suit your needs. If anyone has a better way to do this let me know. This is my first squarespace site so I may have missed an easy trick!
<!-- Calendly link widget begin -->
<center>
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'YOUR CALENDLY LINK GOES HERE'});return false;"
style="padding: 21px 34px;
font-weight: 600;
letter-spacing: 1px;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
letter-spacing: .15em;
color: #fff;
background-color: #89c8cd;
border-color: #89c8cd;
text-decoration:none;
border-radius: 3px;"
>YOUR TEXT HERE</a>
</center>
<!-- Calendly link widget end -->