Multicolumn Heading Title Turn it To An Image

Store Design
,
1

is it possible to do this? (see image below)

so i can make my homepage more cute~! :slightly_smiling_face:

LBook11_0-1682151103655.png
LBook11_0-1682151103655.png1224×511 442 KB

thank you

2

www.lostbookph.com :slightly_smiling_face:

3

this worked thank you very much! but the “see more” on mobile looks like this

LBook11_0-1682155728696.png
LBook11_0-1682155728696.png627×268 118 KB

4

and also, can i turn it into an image instead? like this ?

LBook11_1-1682155970569.png
LBook11_1-1682155970569.png740×225 5.82 KB

5

@LBook11

Add this css too

.title-wrapper-with-link a {
   text-align: center;
   margin: 0 auto;
}

SaviorInfo_0-1682156772032.png
SaviorInfo_0-1682156772032.png473×892 195 KB

6

@LBook11

There’s no need to add an image. This can be done through CSS.

Paste below CSS in base.css file

.collection-list-title, .multicolumn .title {
  line-height: 50px;
  margin: 20px auto;
  z-index: auto;
  cursor: default;
  background-color: #eb7d99;
  position: relative;
  padding: 0 30px;
  color: white;
  width: auto !important;
}
.multicolumn .title {
  margin: 18px auto;
}
.collection-list-title::after, .collection-list-title::before,
.multicolumn .title::after, .multicolumn .title::before {
  border-width: 25px 0 25px 25px;
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
}
.collection-list-title::before, .multicolumn .title::before {
  border-width: 25px;
  border-color: #eb7d99 transparent;
  left: -25px;
}
.collection-list-title::after, .multicolumn .title::after {
  border-width: 25px;
  border-color: #eb7d99 transparent;
  right: -25px;
}
.title-wrapper-with-link a {
  width: 100%;
  text-align: center;
}
@media (max-width: 767px) {
  .collection-list-title, .multicolumn .title {
    padding: 0 10px;
    margin: 17px auto;
  }
  .multicolumn .title {
    margin: 15px auto;
  }
}

SaviorInfo_1-1682158712615.png
SaviorInfo_1-1682158712615.png1919×1079 290 KB

Hope it helps you. Please mark the solution as accepted. For any further queries you can contact me in future.

Thanks

7

OMG Thank you sooo sooo much for helping! :heart_eyes: it all worked~!