Creating a testimonial with a collage block

00
01
02
03
99

Custom carousel testimonials are a great option to display the kind words your clients have said about your work.

But sometimes, it’s fun to mix things up.

That’s why today, I bring you a cool customization that you can use if you’re looking to create a different kind of testimonial block for your site:

Personally, I think this would look really cool on a landing page of some sort but, regardless of how you use it IF you decide to use it at all, why don’t we just dive into it?

Looking for a container to target

We’ll be starting out with a collage block previously styled through our Site Styles.

Mine only has a title and subtitle. You can have a button on yours if you like!

Now, with the help of our Inspect Element tool, we’ll be looking for a way to target the subtitle container.

The reason behind this is that, surprise surprise, we’ll be using pseudo-elements to create our client thumbnail and name.

Meaning that we want to find the most suitable container to “attach” our new info to, in order to make it easy for us to position things where we want them.

In this case, since we want to have the thumbnail + name displaying right under the subtitle text, it makes sense to add the pseudo elements to that container.

Don’t worry if this doesn’t make much sense right now, it will (hopefully) become clearer as we go along.

Ok, so here’s our subtitle container:

It has a couple of classes including one that’s called .image-subtitle-wrapper, so we’ll be using that one.

Now, because that class doesn’t really specify we’re dealing with a collage block, we’ll have to either:

a) look for a parent or ancestor’s class that DOES reflect the fact we’re dealing with a collage block, to make sure no other type of block gets affected, or

b) use our block’s ID to make it crystal clear we’re ONLY wanting to add this particular thumbnail and name to this collage block, and no other.

In this tutorial I’ll be going with the parent/ancestor class.

Meaning, my code WILL affect aaaaall collage blocks on my site.

If you’re wanting to add a specific thumbnail + name to ONE collage block, use your block’s id instead!

Moving on, if we browse a bit higher up in our code from where we saw the subtitle container (darker blue) we can see there’s an ancestor container that has a bunch of classes (light blue), including one called .design-layout-collage which seems perfect for what we need:

So, let’s go ahead and start building our selector with what we have so far!

.design-layout-collage .image-subtitle-wrapper {

}

Creating the client thumbnail

Now, like we talked about before, we’ll be “attaching” our new elements (thumbnail and client’s name) to this subtitle container via pseudo-elements.

So, starting with the thumbnail, we’ll be creating an ::after pseudo-element and set up the basic properties needed to create an empty container that will hold our picture:

.design-layout-collage .image-subtitle-wrapper::after {
  background-color: white;
  content: '';
  display: block;
  height: 20px;
  width: 20px;
}

Cool! We have a tiny little block showing up under our text.

I’ll be adding a margin to the top to create some distance and also increase its dimensions to 50px to make it bigger.

.design-layout-collage .image-subtitle-wrapper::after {
  background-color: white;
  content: '';
  display: block;
  height: 50px;
  margin-top: 20px;
  width: 50px;
}

Ok ok, awesome.

How about we make it round?

.design-layout-collage .image-subtitle-wrapper::after {
  background-color: white;
  border-radius: 50%;
  content: '';
  display: block;
  height: 50px;
  margin-top: 20px;
  width: 50px;
}

Alright, I think we’re ready to bring the image!

I uploaded mine via the “Manage Custom Files” button in my Custom CSS window, and then clicked on the newly added file to get its URL.

With your image url on hand, we can now set the background-image and style it to fit nicely inside our white container:

.design-layout-collage .image-subtitle-wrapper::after {
  background-image: url('https://static1.squarespace.com/static/5dcc1af67bfd1d65d6324dc5/t/5e4ff5cc097a363847b3d225/1582298574610/allef-vinicius-C_1jjFJioWg-unsplash.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  content: '';
  display: block;
  height: 50px;
  margin-top: 20px;
  width: 50px;
}

Whoop! Our client headshot appeared!

But… I still think it’s too small so I’ll amp up the width and height of my container yet again.

80px should be perfect!

.design-layout-collage .image-subtitle-wrapper::after {
  background-image: url('https://static1.squarespace.com/static/5dcc1af67bfd1d65d6324dc5/t/5e4ff5cc097a363847b3d225/1582298574610/allef-vinicius-C_1jjFJioWg-unsplash.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  content: '';
  display: block;
  height: 80px;
  margin-top: 20px;
  width: 80px;
}

Heck yes!

Lovely.

Creating the client name

With our thumbnail in place, we can now move onto adding the name or any other detail you want next to our client’s headshot.

Now, here’s the thing…

Ideally we would “attach” the name pseudo-element to our new thumbnail, right? That would make things fairly simple to style.

The problem is that this isn’t possible. We can’t attach an ::after to an ::after or a ::before to a ::before or create a mix of the two.

However, there’s still a way.

What we’re going to do is create another pseudo-element (a ::before this time) for the subtitle container we targeted previously, and then put it in place by using position: absolute.

But enough talk, let’s just go for it, ok?

.design-layout-collage .image-subtitle-wrapper::before {
  content: 'Marisa L.';
}

As you can see, the name showed up ABOVE our subtitle text.

I’ll add a temporary background to the name to make it easier to spot.

We don’t want the name all the way up there, we want it next to the image.

So, what we’re going to do is give it a position of absolute to take it out of the normal flow of the page and be able to move it more freely.

.design-layout-collage .image-subtitle-wrapper::before {
  content: 'Marisa L.';
  position: absolute;
}

Great!

Now, let’s move it to the bottom of our block by setting its bottom offset to 0.

.design-layout-collage .image-subtitle-wrapper::before {
  content: 'Marisa L.';
  position: absolute;
  bottom: 0;
}

As you can see, our client’s name went beyond the spot where we want it to be.

That’s because we haven’t set the reference point it needs.

Its reference point can be any parent or ancestor container that has a defined position, other than static (the default).

In this case, we want the direct parent that’s holding it (the subtitle container) to be its guide, because that way when we say bottom, our browser will understand its the bottom of that subtitle container, aka where our thumbnail already is!

Therefore, we’ll target our subtitle container and give it a position of relative.

.design-layout-collage .image-subtitle-wrapper {
  position: relative;
}

Awesome!

You see how the name moved immediately?

Because now bottom: 0 means “the bottom edge of the subtitle container”.

Ok, all that’s left now is tweaking the title font and putting the name in place.

I’ll be setting mine to 90px from the left (again, from the left of the subtitle container) and then using the transform property to pull the name slightly upwards from where it is currently located.

Oh, and I’ll also add a bit more information under the content property.

.design-layout-collage .image-subtitle-wrapper::before {
  color: white;
  content: 'Marisa L. | Lifestyle coach';
  font-size: 14px;
  letter-spacing: .2em;
  position: absolute;
  bottom: 0;
  left: 90px;
  text-transform: uppercase;
  transform: translateY(-50%);
}

How about that?!

Here’s the final result on desktop:

And here’s the result in tablets:

Aaaand on mobile phones:

Hm… things are a bit odd-looking here.

No biggie!

We can simply write a media query for the ::before pseudo element and then tweak the content and font styles slightly to make things fit better:

@media screen and (max-width: 640px) {
  .design-layout-collage .image-subtitle-wrapper::before {
    content: 'Marisa L. Lifestyle coach';
    font-size: 12px;
    line-height: 1.6em;
  }
}

Isn’t this gorgeous?!

Well, there you have it!

This is a great way to add some variety to the client testimonials on your site, using a collage block and a few CSS tricks.

Until next time,

B.

Full code

/*CREATING A TESTIMONIAL WITH A COLLAGE BLOCK*/
.design-layout-collage .image-subtitle-wrapper::after {
  background-image: url('https://static1.squarespace.com/static/5dcc1af67bfd1d65d6324dc5/t/5e4ff5cc097a363847b3d225/1582298574610/allef-vinicius-C_1jjFJioWg-unsplash.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  content: '';
  display: block;
  height: 80px;
  margin-top: 20px;
  width: 80px;
}

.design-layout-collage .image-subtitle-wrapper {
  position: relative;
}

.design-layout-collage .image-subtitle-wrapper::before {
  color: white;
  content: 'Marisa L. | Lifestyle coach';
  font-size: 14px;
  letter-spacing: .2em;
  position: absolute;
  bottom: 0;
  left: 90px;
  text-transform: uppercase;
  transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .design-layout-collage .image-subtitle-wrapper::before {
    content: 'Marisa L. Lifestyle coach';
    font-size: 12px;
    line-height: 1.6em;
  }
}