# Re | Slider with text over image

**URL:** <https://community.sitejet.io/t/re-slider-with-text-over-image/4168>\
**Category:** Website Builder\
**Tags:** cms\_presets, cms\_code\
**Created:** [January 3, 2025, 4:06pm UTC](https://community.sitejet.io/t/re-slider-with-text-over-image/4168 "2025-01-03T16:06:28Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lisa\_Tippette](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lisa_tippette/32/44_2.png) [@Lisa\_Tippette](https://community.sitejet.io/u/Lisa_Tippette)\
**Post date:** [January 3, 2025, 4:06pm UTC](https://community.sitejet.io/t/re-slider-with-text-over-image/4168/1 "2025-01-03T16:06:28Z")

</div>

I’m reopening this post for further clarification. When I copy the code given, where do I paste it? As well as the CSS code? Thanks for providing further assistances on this. I would also like to request a pre-made slider where this can be done automatically.

Thanks!  
~Lisa

> [@Slider with text over image](https://community.sitejet.io/t/slider-with-text-over-image/2609/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, $arrow…

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [January 7, 2025, 10:36am UTC](https://community.sitejet.io/t/re-slider-with-text-over-image/4168/2 "2025-01-07T10:36:01Z")

</div>

Hey Lisa,

I highly recommend not to do that if you are already unsure where to put the code.

You could either try to rebuild the slider from scratch after you have seen it in the template (copied in a test side), or, send us a mail and Martin can probably record you a quick screencast how he does it 🙂

However, you can actually easily build this slider yourself. I checked with Giaco who did this template… - if you take a look at the breadcrumbs, you see that there is a `content-slider` preset and in there, there is a `unequal-columns` preset 🙂

If you take a look at the CSS Code, you will find this:

```auto
.ed-element.preset-content-slider-ashop {

    ....

	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;
		}
	}
}

```

But this can also be done with the style panel. If you still face issues, send us a ticket please 🙂

---

<div class="post-metadata">

**Author:** ![Lisa\_Tippette](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lisa_tippette/32/44_2.png) [@Lisa\_Tippette](https://community.sitejet.io/u/Lisa_Tippette)\
**Post date:** [February 6, 2025, 2:43pm UTC](https://community.sitejet.io/t/re-slider-with-text-over-image/4168/3 "2025-02-06T14:43:50Z")

</div>

Could you please have Martin record a screencast of how he does it? Thank you!

~Lisa

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [February 7, 2025, 8:10am UTC](https://community.sitejet.io/t/re-slider-with-text-over-image/4168/4 "2025-02-07T08:10:09Z")

</div>

I will ping @Martin.Sitejet.Team here 🙂 He will be back next week.

---

<div class="post-metadata">

**Author:** ![Lisa\_Tippette](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lisa_tippette/32/44_2.png) [@Lisa\_Tippette](https://community.sitejet.io/u/Lisa_Tippette)\
**Post date:** [February 7, 2025, 4:27pm UTC](https://community.sitejet.io/t/re-slider-with-text-over-image/4168/5 "2025-02-07T16:27:47Z")

</div>

Thanks, Andre! 🙂

---

<div class="post-metadata">

**Author:** ![Martin.Sitejet.Team](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/martin.sitejet.team/32/25_2.png) [@Martin.Sitejet.Team](https://community.sitejet.io/u/Martin.Sitejet.Team)\
**Post date:** [February 11, 2025, 10:41am UTC](https://community.sitejet.io/t/re-slider-with-text-over-image/4168/6 "2025-02-11T10:41:22Z")

</div>

Hi @Lisa_Tippette, could you please open a new ticket [via our contact form](https://help.sitejet.io/hc/en-us)?

I will then record a screencast for you.

---

<div class="post-metadata">

**Author:** ![Lisa\_Tippette](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lisa_tippette/32/44_2.png) [@Lisa\_Tippette](https://community.sitejet.io/u/Lisa_Tippette)\
**Post date:** [February 11, 2025, 4:07pm UTC](https://community.sitejet.io/t/re-slider-with-text-over-image/4168/7 "2025-02-11T16:07:33Z")

</div>

Oka- just sent in a support ticket. Thanks!

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [February 12, 2025, 10:40am UTC](https://community.sitejet.io/t/re-slider-with-text-over-image/4168/8 "2025-02-12T10:40:40Z")

</div>