Slider with text over image

Helpdesk Website Builder
,
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;
		}
	}
}