Solved

How to overlay headings and links on images using Dawn theme's multicolumn function?

Justin34
Trailblazer
312 0 82

Hi everyone!

 

I am using the Dawn theme. When designing my website, I used the multicolumn function option. I have six "columns" altogether. I have it set up on my desktop for three columns per row. The only thing I include is an image, a heading and a link. What I was wondering is if there is anyway to put the heading and link directly over the image for each image, heading, and link. Maybe put a little opacity over the image too so the heading and the link can be read. Is there anyway to do this?

 

I hope this question makes sense.

 

My website is www.pennsylvaniaparks.org

 

Thanks!

ALL I THINK ABOUT IS OUR PARKS 🙂
Accepted Solution (1)
LitCommerce
Astronaut
2860 684 735

This is an accepted solution.

Hi @Justin34,

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

.multicolumn-card-spacing {
    margin: 2.5rem;
}
@media screen and (min-width: 750px) {
	.background-none .multicolumn-card__image-wrapper {
		margin: 1.5rem;
	}
}

it will display like this:

Screenshot.png

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 6 (6)

LitCommerce
Astronaut
2860 684 735

Hi @Justin34,

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

.multicolumn-card__image-wrapper {
	position: relative;
}
.multicolumn-list__item.center .media--adapt img {
    width: 100%;
}
.multicolumn-card__image-wrapper:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    z-index: 2;
    opacity: 0.2;
}
.multicolumn-card__info {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.multicolumn-card__info * {
    color: #fff !important;
}

it will display like this:

Screenshot.png

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Justin34
Trailblazer
312 0 82

That screenshot looks great!! Is there anyway to make the space between the two rows the same width as the space between the columns? Thanks so much!

ALL I THINK ABOUT IS OUR PARKS 🙂
LitCommerce
Astronaut
2860 684 735

This is an accepted solution.

Hi @Justin34,

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

.multicolumn-card-spacing {
    margin: 2.5rem;
}
@media screen and (min-width: 750px) {
	.background-none .multicolumn-card__image-wrapper {
		margin: 1.5rem;
	}
}

it will display like this:

Screenshot.png

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Justin34
Trailblazer
312 0 82

That is ABSOLUTELY PERFECT!! Thank you so much for your help. Really made a difference. Have a fantastic day!

ALL I THINK ABOUT IS OUR PARKS 🙂
anatchim
Tourist
8 0 2

Hi @LitCommerce 

I was trying to apply this same solution to a specific section of my website, through the "Custom CSS" field on the properties panel
custom-css.jpg

...however it has a limit of 500 characters, and I can't do it.

If I put the code on the "section-multicolumn.css" file, this would be applied on every "Multicolumn" section I use sitewide, right?... 
How do I workaround to apply the code only to a specific page? 🤨

Thank you so much,

Ana

Ksu10005
Excursionist
21 0 3

Hello @LitCommerce 
I'm doing the same thing now, but I have several multicolumn sections on one page and when I add this code it applies to all these sections, but I need to do it only for one particular section. How can I make it?