Accordion Blocks in Squarespace - New Feature! // Squarespace Accordion

Подписаться 26 тыс.

Просмотров 8 тыс.

50% 1

Brand new Squarespace feature - accordion blocks! Learn all about this new type of content block in this video.
---
Just getting started with Squarespace? Awesome! 😍 I want to teach you the basics - check out my free training course here 👉 insidethesquar...
---
Accordion blocks are a new type of content block available in Squarespace. Commonly used for FAQ sections, accordion blocks will show a title and when you click on it, additional text will be revealed underneath it.
These accordion blocks have their own custom design menu that we’ll take a look at in this tutorial. YOu can use it to assign specific font styles, customize alignment and spacing, as well as customize the divider and arrow or plus/minus icons. There are a LOT of options to explore!
If you want to customize the background of the accordion block, check out this tutorial: • How To Change the Back...
And if you want to customize the divider line, creating a gradient or even using an image, check out this tutorial: • Video
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquar... ❤️
---
🙋 Need some help? Visit insidethesquar... to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace
Edited
Just Starting with Squarespace CSS?
Awesome! 😍
I'll teach you the basics - grab my free Getting Started Guide here 👉 insidethesquar...
---
This video is an overview on portfolio and blog pages in Squarespace 7.1.
I created this video to help you figure out the best option for your Squarespace website and it covers the key similarities and differences.
Portfolios and blogs are cool ways to share your content, but they aren’t the same!
Both blogs and portfolios have pagination, nested URLs, advanced social share and SEO options, and thumbnails.
Blogs can have comments, author data, tags, and categories which can be helpful (or harmful!) for your overall site SEO. Blogs can also be scheduled in advance, drafted for approval, and have unique excerpts and links to sources.
Where can you find more about this cool stuff? It’s all in this video!
Portfolios can't have comments, tags, or categories, or be scheduled in advance, but they do have one awesome feature that blog’s don’t. Page sections!!
Portfolio projects can be MUCH more customizable than standard blog posts. I’ll show you exactly how to make changes to projects in a portfolio and you'll see how easy it is to make project entries look great.
You can find out even more in this video!
What do you think will be the best for your Squarespace site? Let me know in the comments below!
---
🥳 Ready to launch? Use the code PARTNER10 for 10% off (affiliate code): insidethesquar... ❤️
---
🙋 Need some help? Visit insidethesquar... to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Опубликовано:

22 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 59

@InsideTheSquare Год назад

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-euJqHXs_L1M.html

@VicHooper 3 года назад

Hallelujah! Thanks, Squarespace and thanks Becca for bringing it to our attention.

@InsideTheSquare 2 года назад

I was SO happy to see this new content block too!! Super excited to see what happens inside 7.1 next! 🥳

@jonellegood8816 3 года назад

So glad Squarespace has made this a native option to their design build and we don't have to make this style work with custom code anymore. Thanks for taking some time to show off the features. I always appreciate your quick and helpful tutorials that are packed with great content.

@InsideTheSquare 2 года назад

I was so happy to see this too! And you are so welcome - I think that sharing exciting feature updates like this is *almost* as much fun as creating custom codes. Almost. 😉

@jonellegood8816 2 года назад

@@InsideTheSquare well, you're great at both. So keep it up!

@meaganjustus 3 года назад

It's great we don't have to code for this anymore!! (not that it was hard before but easier for clients to update and make changes themselves now!) Thanks for the tutorial 😊 Have a great day!

@InsideTheSquare 2 года назад

Right?! I’m so glad they made this a built in feature!! 🙌

@pearllaw Год назад

Very clear demonstration, thanks!

@InsideTheSquare Год назад

Yay! So happy I could help! 🙌🏻

@philpallen 3 года назад

THANKS for the awesome tutorial. I haven't tried this yet, but now I'm totally equipped to give it a whirl. You're simply the best!

@bellagetsbold 3 года назад

Yessss! Perfect timing, have just been stuck on an accordion markup code dilemma for my program FAQs - so stoked to be able to scrap that & just use this simple accordion block instead 🥳 thank you for bringing it to our attention so quickly Becca! 🙌🏼

@fionaharrison9314 8 месяцев назад

Thanks for this, exactly what I was looking for!

@InsideTheSquare 8 месяцев назад

Awesome - glad I could help! :)

@creativewebusa Год назад

Another great video @InsideTheSquare ! I have a tough question for you today, is it possible to add a summary block within an accordion ? I have tried numerous ways to try and get the Summary block to show up within an accordion but no luck so far. Basically, the accordion heading will show * it should be closed at first ) then when you click on the accordion heading it opens just as it normally would but it should display a summary block of posts etc. Any idea how to accomplish this i would be extremely grateful

@InsideTheSquare Год назад

Great question! Unfortunately using the built in accordion block we can only add text. But you can try the DIY method using this older tutorial of mine - hope it helps! insidethesquare.co/squarespace-tutorials/click-to-reveal

@adrianemarie6381 2 года назад

Question about the new accordion block... Do you know if the description text (Paragraph 1, Paragraph 2, etc.) within the accordion is able to rank in SEO? Since it isn't "visible" until expanded I'm wondering if it crawls the same. SS support did not know the answer to this question. Great video Becca! Very thorough. Keep up the helpful tutorials.

@InsideTheSquare 2 года назад

That is a great question - and I have no idea! I'll reach out to one of my fav Squarespace SEO experts and get back to ya on that... stay tuned!

@adrianemarie6381 2 года назад

@@InsideTheSquare Hey Becca! Any updates on this?

@govbradford 2 года назад

Great tutorial! With all the settings they have in this block, once you fine tune it, is there a way to duplicate it so you can easily add another with the same settings?

@InsideTheSquare 2 года назад

Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. If I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!

@govbradford 2 года назад

@@InsideTheSquare It would!

@eddiechan707 7 месяцев назад

Hello! When the accordion expands and collapses, it moves blocks that are beside it. Is there a code that can stop the adjacent content from moving? I get that the blocks under the accordion moves since it directly affects them, but would love to know if there is a code that stops the adjacent content from moving. Thanks!

@InsideTheSquare 7 месяцев назад

Christy Price shared a great tip for this at the 10:53 minute mark in this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FFHWVYdfheo.html

@eddiechan707 6 месяцев назад

@@InsideTheSquare OMG, such a simple workaround, how could I not figure this out?🤦‍♂. Thank you so much!

@theclassroomnook5501 2 года назад

Thanks so much for this update! I am using this for an FAQ block on a post. Do you know if there is any easy to copy and paste this entire accordion block on another page of my website without having to recreate it question by question? Thanks so much!

@InsideTheSquare 2 года назад

I wish - that would be so helpful! But sadly 😞

@jackquinn314 Год назад

Is there a way to have accordion blocks open to separate galleries of videos? I want to organize some embedded videos by collapsing them within an accordion-style design. Please let me know if you have a tutorial that covers something like this!! Thank you.

@InsideTheSquare Год назад

Hey Jack- Great question! I'm working on more video related tutorials this year and I’ll definitely add this to my tutorial to-do list; stay tuned 😉

@alexrackovs3978 2 года назад

Hi, how do you change colour of the text inside the accordion?

@InsideTheSquare 2 года назад

Hey Alex! You can use a little custom CSS to change up the color; change the word purple in this code below to the color you want to see and add it to your CSS panel under Design > Custom CSS .sqs-block-accordion .accordion-item__description {color: purple!important} To learn more about the types of color you can use, check out this article here: insidethesquare.co/colors

@speakaus8681 2 года назад

Your video's are very helpful thank you! If my site has more than one accordion (on different pages) is there a way to code a different colour for each accordion? Thanks in advance.

@InsideTheSquare 2 года назад

Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉

@AboundWebDesign Год назад

So is there a way to use custom fonts in the description area in the accordion block? I'm needing to use a font not available natively in Squarespace.

@InsideTheSquare Год назад

Totally! I don’t have a tutorial on that yet, but I do have the code. Feel free to send me an email and I’ll share it with ya (support-at-insidethesquare.co) and in the meantime I’ll add this to my tutorial to do list!

@nataliehendrix7397 2 года назад

Are you able to make the text on the block go the other way? Like instead of it reading up and down, could you use code for it to go left to right?

@InsideTheSquare 2 года назад

Great question Natalie! I'll have to brainstorm on this one; probably possible with some clever CSS. if i am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!

@courtneyhinton7570 Год назад

Is there a word limit to what can be put into the accordion? I have some text missing on my accordions and I can't figure out why.

@InsideTheSquare Год назад

Interesting - Not that I’m aware of! I even have full podcast episode transcripts in an accordion. I would reach out to Squarespace support team to see if they can take a look - something’s not quite right there ☹️ Good luck!

@Cayley.yzsabelle Год назад

can we add video inside accordion?

@InsideTheSquare Год назад

Depending on what Squarespace plan you have, you can. You can find out more from this post on the official Squarespace Forum: forum.squarespace.com/topic/220463-embed-a-video-within-the-accordion-drop-down-menu/

@chenesebeanmua 2 года назад

Thank you for this. Plus I just noticed that SP now has this feature. However I'd like to embed a form (that's not SP) using this feature, would you know how to do that if possible?

@InsideTheSquare 2 года назад

Hey Chenese! That's a tricky one - embedding a function inside of another function can be complicated. I'd be happy to work up a fix for ya - feel free to email me a link to the site with the form on it and I'll see what I can do! 👍👍

@dalestalnaker7646 Год назад

Thanks! I am trying to convert a WordPress site with accordions to Squarespace and still utilize accordions to consolidate content. can images be inserted into the accordion?

@InsideTheSquare Год назад

Hey Dale! You can't add an image or table to an accordion block but you can code your own! Here is an old tutorial that will walk you through it: insidethesquare.co/squarespace-tutorials/click-to-reveal

@dalestalnaker7646 Год назад

Thanks for your reply, but the above referenced video said _nothing_ about inserting _images_ into the accordion content. Is this even possible? If so, how? Also, my wordpress website had accordions containing tables. Can tables be inserted into the accordion content? How?

@corinnecuozzo3677 2 года назад

Anyone know how to update the font size for these? I want the FAQ titles to be larger

@InsideTheSquare 2 года назад

Hey Corinne! This code will do the trick - change 30px to whatever size you want the font to be. .accordion-item__title {font-size: 30px}

@steve_aventura 3 года назад

Can you add an image instead of text in an accordion item?

@allanstanley9590 3 года назад

Or both text an an image... I am using a third party code that does that, but does not provide the ability to modify text etc. the way the Squarespace has done. Perhaps some code from ITS...

@InsideTheSquare 2 года назад

Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉

@lynnzetaylor3276 10 месяцев назад

Can you help me figure out why all of the content on my products in the accordion blocks are all getting changed to the same thing?

@InsideTheSquare 10 месяцев назад

I would definitely recommend reaching out to the official Squarespace support team for help: support.squarespace.com

@JaiSequoia 3 года назад

It’s a great addition but still doesn’t compare to accordion plugins where you can add any content in each section (any other kind of block!) but it’s a nice feature. Hopefully they’ll add colour options in there too.

@InsideTheSquare 2 года назад

Wouldn't that be the best? Until then, CSS to the rescue! 😅 haha