pixel

The other day a question popped up in the Facebook Group asking how to get a Harlequin (the diamond shape) pattern with your Divi website.

I am going to use the Divi theme for WordPress to demonstrate, but you should be able to achieve this with any WordPress site via CSS.

You can easily follow the steps, and I made you a video, for those of you with the Layouts Cloud plugin ($15), I have added this as a Layout into the Community Cloud (called Harlequin Pattern Eileen Sharing to Divi Cloud) and you can download it directly from there into your page builder.

FIRST: sometimes people have trouble with the CSS, if you do, I suggest you try to paste this all as clean text, sometimes the ” are curly, which breaks the code.

To begin, navigate to a page or post and open the Divi Builder.

This example uses one column, the text module and the code module.

modules needed for the harlequin pattern in WordPress

Open the Text module and toggle into Text and past this:

<div class=”grid”>
<div class=”grid-item grid-1″>
<div class=”grid-inner”></div>
</div>
<div class=”grid-item grid-2″>
<div class=”grid-inner”>2 – black</div>
</div>
<div class=”grid-item grid-3″>
<div class=”grid-inner”>3</div>
</div>
<div class=”grid-item grid-4″>
<div class=”grid-inner”>4 -FF6666</div>
</div>
<div class=”grid-item grid-5″>
<div class=”grid-inner”>5</div>
</div>
<div class=”grid-item grid-6″>
<div class=”grid-inner”>6</div>
</div>
<div class=”grid-item grid-7″>
<div class=”grid-inner”>7</div>
</div>
<div class=”grid-item grid-8″>
<div class=”grid-inner”>8</div>
</div>
<div class=”grid-item grid-9″>
<div class=”grid-inner”>9</div>
</div>
<div class=”grid-item grid-10″>
<div class=”grid-inner”>10</div>
</div>
<div class=”grid-item grid-11″>
<div class=”grid-inner”>11 BABY</div>
</div>
<div class=”grid-item grid-12″>
<div class=”grid-inner”>12</div>
</div>
<div class=”grid-item grid-13″>
<div class=”grid-inner”>13</div>
</div>
</div>

 

Notes: Take a look at the div for the first diamond:

<div class=”grid-inner”></div>

And then the second:

<div class=”grid-inner”>2 – black</div>

By adding 2 – Black we get text over the diamond, which is what you see over the second image.  If you don’t want text, simply delete the text – you must do this through the while in text mode though, because if you delete through the Visual tab you will wipe out all these div codes and make yourself crazy.

text mode for harlequin pattern

Save that, then add a code module and paste in this code.

 

<style>
.grid {
width: 100%;
max-width: 900px;
margin: 0 auto;
background: #ff6666;
}

.grid::after {
content: “”;
display: block;
clear: both;
}

.grid-item {
width: 21.833%;
padding-bottom: 21.833%;
overflow: hidden;
float: left;
background: #ff666;
transform: rotate(45deg);
margin: 5.5%;
margin-top: -11%;
background-size: cover;
}

.grid-item.grid-1 {
background-image: url(“https://YourURL.com/wp-content/uploads/2013/11/52-cups-of-coffee.jpg”);
}
.grid-item.grid-2 {
background: #000000;
}
.grid-item.grid-3 {
background-image: url(“https://YourURL.com/wp-content/uploads/2018/02/food-08.jpg”);
}
.grid-item.grid-4 {
background: #FFA69E;
}
.grid-item.grid-5 {
background-image: url(“https:/YourURL.com/wp-content/uploads/2018/02/restaurant-hero-03.jpg”);
}
.grid-item.grid-6 {
background-image: url(“https://YourURL.com/wp-content/uploads/2017/10/whitney-wright-286731-2-e1507135768639.jpg”);
}
.grid-item.grid-7 {
background-image: url(“https://YourURL.com/wp-content/uploads/2018/01/girl-2.png”);
}
.grid-item.grid-8 {
background-image: url(“https://YourURL.com/wp-content/uploads/2018/01/table-1.png”);
}
.grid-item.grid-9 {
background-image: url(“https://YourURL.com/wp-content/uploads/2017/07/lydia-harper-212187-3.jpg”);
}
.grid-item.grid-10 {
background-image: url(“https://YourURL.com/wp-content/uploads/2017/07/pawel-blazewicz-29578.jpg”);
}
.grid-item.grid-11 {
background-image: url(“https://YourURL.com/wp-content/uploads/2017/03/play-wordpress-testing-2.jpg”);
}
.grid-item.grid-12 {
background-image: url(“https://YourURL.com/wp-content/uploads/2017/01/The-Post-Post-Checklist.jpg”);
}
.grid-item.grid-13 {
background-image: url(“https://YourURL.com/wp-content/uploads/2016/10/bees-on-honeycomb.jpg”);
}

.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
margin-top: 5%;
}

.grid-item:nth-child(5n+4) {
margin-left: 21.9%;
}

.grid-item:nth-child(5n+6) {
clear:left;
}

.grid-item:nth-child(5n+6):last-of-type {
margin-left: 38.25%;
}

.grid-item:hover {
background: #FFF;
}

.grid-inner {
box-sizing: border-box;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-45deg);
text-align: center;
padding-top: 40%;
font-size: 2em;
}
</style>

Let me point out a few things you will want to customize:

.grid {
width: 100%;
max-width: 900px;
margin: 0 auto;
background: #ff6666;
}

Change the background to whatever you want, this is the hex for pink.

.grid-item {
width: 21.833%;
padding-bottom: 21.833%;
overflow: hidden;
float: left;
background: #ff666;
transform: rotate(45deg);
margin: 5.5%;
margin-top: -11%;
background-size: cover;
}

Again, change the background to whatever you want, this is the hex for pink.

.grid-item.grid-1 {
background-image: url(“https://YourURL.com/wp-content/uploads/2013/11/52-cups-of-coffee.jpg”);
}

You will need to add the images you want to use into your media library, then one by one, take the urls and paste them into the appropriate grid number.  Yes, I do realize this takes time, but you could have two windows open at once, and if it were simple then everyone would be doing it 🙂

finding the url of an image on your wordpress site

If you would like a diamond to be colored, NOT an image use this:

.grid-item.grid-4 {
background: #FFA69E;
}

Again, change that background to whatever you like.

.grid-item:hover {
background: #FFF;
}

Change the hover color, above hover is set to white (#FFF), but you can make it yellow, or green, or whatever works for you.

harelquin (diamnond pattern) in your Divi WordPress website

There are endless options, you just need to have a bit of imagination, and patience.  Using the harlequin pattern will really make a gallery of images special.

 

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This