In this video, you'll learn how to embed images inside accordion descriptions in a Squarespace website, making your content more visually appealing and engaging for your viewers.
Say goodbye to boring text and hello to a more dynamic website with this simple trick. Watch now and level up your Squarespace game!
You’ll need to watch the video below to see the step-by-step process, but here is an overview of what we are doing:
02:03 First, we’ll add the images to our custom files in Squarespace. Hosting them with the rest of your content is a good habit to get into 😉
03:00 Next, we’ll use custom code to create a space for content before the text in an accordion item description.
03:45 Then we’ll add the image as the background of the space we created.
05:26 After that, we’ll target the second item in the accordion, and give it a different background image.
06:29 I’ll also show you how to remove the image space from the third item in case you don’t want images in all of you accordions.
07:11 Finally, we’ll use some clever code to place the image next to the description, instead of above it, in case that style is better for your specific site.
- - -
Original blog post: insidethesquare.co/squarespac...
- - -
Here is the full code from the tutorial:
.accordion-item__description:before{
content:" ";
display:block;
width:250px;
height:120px;
background-image:url(gus.jpg);
background-size:contain;
background-repeat:no-repeat;
margin-right:15px
}
.accordion-item:nth-child(2) .accordion-item__description:before{
background-image: url(shawn.png)!important
}
.accordion-item:nth-child(3) .accordion-item__description:before{
content:none!important
}
.accordion-item__description{
display:flex!important
}
- - -
Related Content:
🖼️ Add images to a single block: • Understanding Squaresp...
🆓 Learn CSS for FREE: insidethesquare.co/learn
☕️ If you found this free tutorial helpful, buy me a coffee to say thanks: buymeacoffee.com/insidethesquare
- - -
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 #SquarespaceHack #Accordiondescriptions #EmbedImages #WebsiteDesign #WebDevelopment #CSS #HTML #Tutorial #HowTo #WebDesignCoding #SquarespaceTutorial #WebDevelopmentTutorial #WebsiteHack #AccordionHack #ImageEmbedding #WebDesignTips #WebDevelopmentTips #SquarespaceTips
12 июл 2024
