No video :(

How to create “Read More” dropdowns inside Auto Layouts in 7.1

Beatriz Caraballo • Squarespace coding tutorials

Подписаться 946

Просмотров 1,5 тыс.

50% 1

Thanks to a Club member, I learned that we can use markdown markup inside the description area of Auto Layouts in 7.1.
So, based on that realization, today we'll be tackling a really awesome customization and build dropdowns inside these sections in Squarespace to display/hide larger pieces of content!
You can grab the code over here:
beatrizcaraballo.com/blog/dro...
-----------------------
//Timestamps
00:00 - Intro
01:00 - Quick overview of the setup
03:41 - Adding the dropdown functionality
07:11 - Styling the dropdowns with CSS
-----------------------
//Helpful links
⇝ Find the code you need amongst hundreds of Squarespace tutorials and snippets: beatrizcaraballo.com/codebase
⇝ Receive new Squarespace CSS tricks and exclusive offers on an often-ish basis: beatrizcaraballo.com/vip
⇝ Get in touch: beatrizcaraballo.com/contact
-------------------------------------------------------------------
Music from #Uppbeat (free for Creators!):
uppbeat.io/t/jonny-boyle/tres...
License code: DT8VYCZ0NE1FUHWY

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

7 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@hollybaerSF Год назад

No way! This is so cool! I can't wait to use this! THANKS B!! 😀😀

@beatrizecaraballo Год назад

Oh yay! I'm so glad to hear you liked this one! You're most welcome 😊

@danielhahn655 11 месяцев назад

This was brilliant! Thank you!

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

I appreciate that! You're most welcome ☺

@oneninedesign Год назад

I love this so much! I was using anchor links to link to the long bio on another page and it's hard to teach clients how to maintain that. Thanks so much!

@beatrizecaraballo Год назад

So glad to hear you found this alternative helpful, Andrea! It's definitely a great way to make things easier for clients to update. It's my pleasure! ☺

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

Do you have a video on how to hide and reveal whole sections with a button?

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

I don't but Will does! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4_fvE8mO1ic.html&ab_channel=WillMyers Hope that helps!

@ThamarCampbell Месяц назад

This is great! What snippet might be required to create the same effect with a carousel?

@beatrizecaraballo Месяц назад

Thank you! And you can use the same code with the Carousel Auto Layout 🙌

@ThamarCampbell Месяц назад

@@beatrizecaraballo Thank You!

@MickeyOwenTM Год назад

Thanks. Is there s way to have the link text to disappear? like if it said "read more" we'd want that to disappear and ideally not leave a gap in the paragraph of text.

@beatrizecaraballo Год назад

You're welcome! It depends on how smooth you want the transition to be and how exactly you want the text to go away (fade/slide/etc), but you can achieve a basic text removal with pure CSS by including this in your code: .list-item-content__description h6.open-dropdown { height: 0; margin: 0; visibility: hidden; } Hope that helps!

@KylaVilla-hd6sw 2 месяца назад

For some reason i can't get this to work with the carousel. Any common mistakes that could be causing this? The menu simply won't retract or expand like it's supposed to.

@beatrizecaraballo 2 месяца назад

You may want to check that you have the jQuery library inside your Code Injection section. The script usually says something like code.jquery or ajax.googleapis. If you don't see that, go ahead and grab the one inside the blog post where it says "JQUERY LIBRARY (IF NEEDED)" Add it to your Header Code Injection section and the code should work! If it doesn't, feel free to email me an email to your page + trial password (if the site isn't live) so I can take a closer look at the problem.

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

Can you move the "+" to appear to the left of the H6 text?

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

Absolutely! If you change the pseudo-element from ::after to ::before in this line of the code... .list-item-content__description h6::after { } ...you'll have the symbol on the left side of the text! You can also simply write it inside the description field, as part of the h6 text, and skip that code snippet instead. Hope this helps!

@atkarx 2 месяца назад

Is they a way to have the text display to the right of the image?

@beatrizecaraballo Месяц назад

Yes, totally! You can use flexbox to make that happen. There's a snippet for that inside the Snippet Directory if you're interested: beatrizcaraballo.com/blog/side-by-side-thumbnail-content-auto-layout-simple-list-squarespace

@GeekFilter 3 месяца назад

Haven't used square space in 11 years and I've noticed it's more stable but also for more irritating. Following your tutorial I am trying to add the pound signs to get the H6. It does nothing. I have a piece of text that has 6 pound signs followed by more. So this: ###### read more. Any clue what I might be doing wrong? And of course, like every project, it was due yesterday!

@beatrizecaraballo 3 месяца назад

Interesting issue! If you're copy/pasting the text with the space and the pound signs that usually doesn't work. Try pasting in the ######read more text and THEN adding the space inside the corresponding field to bring up the markdown style! Another thing to check for is that you're adding the h6 to the Description field of the slides. The title field doesn't accept any markup. Hope that helps!