Slider with text over image

Helpdesk Website Builder
,
1

Can someone show me how to set up a slider like in the Ashop template with text on TOP of the images? TIA!

2

Hi @Lisa_Tippette,

you could simply copy the whole preset from the Ashop template and paste it into your website, then you head back to the Ashop template and copy also the CSS

/* HEADER - Slider */
.ed-element.preset-content-slider-ashop {
	@include content-slider(
		$background: $none, 
		$adaptive-height: true, 
		$border-width: 0px, 
		$border-style: solid, 
		$border-color: $color-primary, 
		$box-padding: 0rem, 
		$margin: 0rem, 
		$margin-tablet: 0rem, 
		$margin-mobile: 0rem, 
		$arrows: true, 
		$arrows-show-on-hover: false, 
		$arrow-position: inside, 
		$arrow-size: 2.5rem, 
		$arrow-color: $none, 
		$arrow-color-hover: $none, 
		$arrow-background: $color-background, 
		$arrow-background-hover: $color-primary, 
		$arrow-circle: false, 
		$dots: false, 
		$dots-position: inside, 
		$dots-color: $color-primary, 
		$dots-color-active: $color-primary, 
		$dots-margin: 6px, 
		$dots-width: 12px, 
		$dots-height: 0px, 
		$dots-circle: true
	);

	padding: 0 2rem;

	.slick-slider .slick-list { border-radius: 20px; }

	.content-container {
		>.inner {
			padding-top: $spacer-container-lg*2;
			padding-bottom: $spacer-container-lg*2;
		}
	
		.content-inner { max-width: 30rem; }
	}

	@media screen and (max-width: $breakpoint-md-max) {
		padding: 0 1rem;
	}

	@media screen and (max-width: $breakpoint-sm-max) {
		padding: 1rem 0;
	
		.content-container >.inner {
			padding-top: $spacer-container;
			padding-bottom: $spacer-container;
		}
	}
}

/* HEADER - Slider - Unequal column */
.ed-element.preset-unequal-columns-ashop {
	@include unequal-columns(
		$box-background: $none, 
		$box-padding: 0rem, 
		$box-width-xs: 100%, 
		$box-width-sm: 50%, 
		$box-width-lg: 60%, 
		$margin: 0rem, 
		$margin-horizontal: false
	);
}

/* HEADER - Container with Title */
.ed-element.preset-banner-ashop {
	@include banner(
		$arrow: true, 
		$arrow-boxed: false, 
		$arrow-circle: false, 
		$arrow-margin: 2vw, 
		$arrow-padding: 1rem, 
		$arrow-size: 30px, 
		$arrow-color: $white, 
		$arrow-background: $color-default, 
		$min-height: 50vh, 
		$min-height-subpage: 400px, 
		$pattern-on-bg: false, 
		$animate-background: false, 
		$headline-color: $color-default
	);

	margin: 0 2rem;
	border-radius: 20px;

	@media screen and (max-width: $breakpoint-md-max) {
		margin: 0 1rem;
	}

	@media screen and (max-width: $breakpoint-sm-max) {
		//needs important to overrite the height
		min-height: 260px !important;
		margin: 0;
		margin-top: 1rem;
	}
}

.header-container-sample {
	margin: 0 2rem;
	border-radius: 20px;

	>.inner {
		padding-top: $spacer-container-lg*2;
		padding-bottom: $spacer-container-lg*2;
	}

	@media screen and (max-width: $breakpoint-md-max) {
		margin: 0 1rem;
	}

	@media screen and (max-width: $breakpoint-sm-max) {
		margin: 1rem 0;
	
		>.inner {
			padding-top: $spacer-container;
			padding-bottom: $spacer-container;
		}
	}
}
3

Thanks, Martin. I’ll try that! :slight_smile:

1 Like
4

I tried this with a new site of mine and it broke the site.

Is there an easier way to put text on a slider image? I am trying to duplicate the header on this site: https://mhmrlaw.com/

Thanks!

1 Like
5

Hey @David_McArdle - on which website (ID?) are you trying to reproduce this?

Looking at your link, I would recommend adding an image slider that changes the background and a static text above it - without testing it. Because the text is basically the same on all sliders.

6

Thanks @Andre, I will give that a try.

7

If it does not work, feel free to post the website ID :slight_smile: