Crelly Slider

0. Introduction

Our premium themes provide header integration for Crelly Slider. On this page you will learn how to do a quick setup of your slider and you'll also be able to select from our premade code snippets for styling elements in Crelly.

1. Setup

a. Create the slider

b. Slider config

c. Slides editing

d. Slides editing

e. Adding your alias

f. Slider display

g. Adding text layers

2. Code snippets

2.0. General

After you completed step 1.g. from the section above, you can now start styling text elements. While having a text element selected, follow the steps shown on the image.

2.1. Buttons

Code

Result

Small Medium Large

Small

color:#fff;
border: 2px solid #fff;
padding: 15px 30px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

color:#fff;
border: 2px solid #fff;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

color:#fff;
border: 2px solid #fff;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

background-color:#fff;
color:#444;
padding: 17px 32px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

background-color:#fff;
color:#444;
padding: 21px 36px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

background-color:#fff;
color:#444;
padding: 25px 40px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

color:#fff;
border-radius:12px;
border: 2px solid #fff;
padding: 15px 30px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

color:#fff;
border-radius:12px;
border: 2px solid #fff;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

color:#fff;
border-radius:12px;
border: 2px solid #fff;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

background-color:#fff;
color:#444;
border-radius: 12px;
padding: 17px 32px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

background-color:#fff;
color:#444;
border-radius: 12px;
padding: 21px 36px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

background-color:#fff;
color:#444;
border-radius: 12px;
padding: 25px 41px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

color:#E86464;
border: 2px solid #E86464;
padding: 15px 30px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

color:#E86464;
border: 2px solid #E86464;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

color:#E86464;
border: 2px solid #E86464;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

background-color:#E86464;
color:#fff;
padding: 17px 32px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

background-color:#E86464;
color:#fff;
padding: 21px 36px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

background-color:#E86464;
color:#fff;
padding: 25px 40px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

color:#E86464;
border-radius:12px;
border: 2px solid #E86464;
padding: 15px 30px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

color:#E86464;
border-radius:12px;
border: 2px solid #E86464;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

color:#E86464;
border-radius:12px;
border: 2px solid #E86464;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

background-color:#E86464;
color:#fff;
border-radius: 12px;
padding: 17px 32px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

background-color:#E86464;
color:#fff;
border-radius: 12px;
padding: 21px 36px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

background-color:#E86464;
color:#fff;
border-radius: 12px;
padding: 25px 41px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

color:#5E92E0;
border: 2px solid #5E92E0;
padding: 15px 30px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

color:#5E92E0;
border: 2px solid #5E92E0;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

color:#5E92E0;
border: 2px solid #5E92E0;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

background-color:#5E92E0;
color:#fff;
padding: 17px 32px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

color:#5E92E0;
border-radius:12px;
border: 2px solid #5E92E0;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

color:#5E92E0;
border-radius:12px;
border: 2px solid #5E92E0;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

color:#5E92E0;
border-radius:12px;
border: 2px solid #5E92E0;
padding: 15px 30px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

color:#5E92E0;
border-radius:12px;
border: 2px solid #5E92E0;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large

color:#5E92E0;
border-radius:12px;
border: 2px solid #5E92E0;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

background-color:#5E92E0;
color:#fff;
border-radius: 12px;
padding: 17px 32px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

background-color:#5E92E0;
color:#fff;
border-radius: 12px;
padding: 21px 36px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large


background-color:#5E92E0;
color:#fff;
border-radius: 12px;
padding: 25px 41px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

color:#FFC150;
border: 2px solid #FFC150;
padding: 15px 30px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

color:#FFC150;
border: 2px solid #FFC150;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large


color:#FFC150;
border: 2px solid #FFC150;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

background-color:#FFC150;
color:#fff;
padding: 17px 32px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium

color:#FFC150;
border-radius:12px;
border: 2px solid #FFC150;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large


color:#FFC150;
border-radius:12px;
border: 2px solid #FFC150;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small

color:#FFC150;
border-radius:12px;
border: 2px solid #FFC150;
padding: 15px 30px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium


color:#FFC150;
border-radius:12px;
border: 2px solid #FFC150;
padding: 19px 34px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large


color:#FFC150;
border-radius:12px;
border: 2px solid #FFC150;
padding: 23px 38px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button
Small Medium Large

Small


background-color:#FFC150;
color:#fff;
border-radius: 12px;
padding: 17px 32px;
text-transform: uppercase;
font-size: 14px;
font-weight:700;

Medium


background-color:#FFC150;
color:#fff;
border-radius: 12px;
padding: 21px 36px;
text-transform: uppercase;
font-size: 18px;
font-weight:700;

Large


background-color:#FFC150;
color:#fff;
border-radius: 12px;
padding: 25px 41px;
text-transform: uppercase;
font-size: 22px;
font-weight:700;
Button

2.2. Text

Code

Result


color:#fff; /*Change the color here */
font-size: 78px; /* Change the font size here */
font-weight:600; /*Change the font weight here (100-800) */
line-height:1.2; /*Change the line height here*/

Example text