# Revolution Slider {% hint style="info" %} **Add section -> Builder -> Revolution Slider** {% endhint %} ## Revolution Slider Here you can choose what kind of slide transitions it will be. This is the main difference between the “Revolution Slider” and the “Slick Slider”. One can set the time of the speed, with which the sliders will be changed. In order to have such an effect on your page, **you need to add a block “Revolution Slider” first and then add blocks “Slide for Revolution”**, where you can select the images for the sliders and customize them. The number of “Slide for Revolution” blocks depends on the number of slides you want to have. ### Layout Here you can choose the height of the image from the dropdown list of **“Height”**. The **“Minimum height”** and **“Image height size”** can be set on the scale from 0 to 1000px. The size of the columns can be chosen from the dropdown list **“Size of the column”**. The sliders have **Arrows** or **Bullets**, which help to navigate to the next or to the previous slider. You can choose either one of them, both of them, or none for your sliders. One can also decide how often the sliders should be changed by the next ones using the **“Delay (seconds)”** scale from 3 to 15 seconds. If you need the parallax effects for the image or its content, you may set it on the **“Parallax of the image”** scale from 0 to 16 and on the **“Parallax of content”** scale from 0 to 16. If you enable the option **“Preload spacer”**, the space for the “Builder” section, where the “Revolution Slider” is built-in will be removed for ca. 2-3 seconds while the store page will be loading. Once the page is loaded the whole block will be displayed again. ## Slide for Revolution ### General In this section, you can add a URL for the slide that will redirect your customers to the needed page, when clicking on the slider. Simply click on it and choose the desired page from the dropdown list, or you can paste a link that is not on this list. ### Image You can add an image both for a desktop and a mobile version. The recommended image size is 1440 x 550 pixels. For the mobile version you can set the horizontal position using a **“Horizontal position for the mobile image”** scale from 0 to 100%, where 50% is a center position, 0% - move to the left, 100% - move to the right. The settings will be disabled if you choose “Auto image adaptation height” in Layouts -> Height, which will come further in the settings. ### Text Here you can customize the text content for your slide. There are 3 text lines that can be added. Delete the line value for the text or button if you want to hide the element and use "\
" for a line break. Of course, the style of the text content can be changed in **“Colorized style”**, where you can choose one of eight possible styles for this purpose. ### Button #1 - #2 For each banner in the promo box, you can add two buttons, which can be customized. There are three customization options for the buttons: **Button text, URL for the button**, and **Button style**. In the **Button text**, you can write the title of the button, e.g.: Shop now, or More. In the **URL for the button** insert the link to which the client should be redirected when clicking on the button and in the **Button style** you can choose one of the button styles which are offered in the dropdown list. ### Other content #### Custom HTML This option allows you to replace the whole text content in the promo box with the page content. How to add and edit a page you can read [**here**](https://mpithemes.gitbook.io/shella-shopify-theme/get-started/how-to-add-and-edit-a-page)**.** ### Video If you want to have a video on your Home page, you can add it here. If this is a YouTube or Vimeo link, you can simply insert it in the **“YouTube or Vimeo video URL”**. If the source of the video is different, you can upload it in *Shopify Admin-> Settings-> Files* and add a link here. Once you have uploaded the video, copy its URL and paste into **“Video URL”**. You can also decide whether the video should have autoplay or control, simply by enabling or disabling such options like **“Video autoplay”** and **“Video controls”**. ### Layout Here you can choose the type of layout for the text on the slide. Shella theme offers a lot of types for the layout, simply choose the one, that suits best for your store. Additionally, you can choose the proper content position on the desktop and the height of the image. Here you can choose the **Type** of layout for the text on the slide. Shella theme offers a lot of types for the layout, simply choose the one, that suits best for your store. Additionally, you can choose the proper **“Content position on the desktop”** and **“Content horizontal align”.** If you need to align the text on the left or right sides and include the text into a container, enable the option **“Add container”**. (This option works only for the **Layout Type #1 (Text over the image)** and **“Full width”** for the **“Content width”** set in the Builder section). Use the scale from 0 to 100% to change the **“Content width”.** The width of the text can also be set from 0 to 1000 px in the **“Text max width”** scale, where 0 is auto-size and 1000 px is 100% of the width. ### Effects In this section, you can add the unique effects, which make the block “Slide for Revolution” so extraordinary. First of all, you can set a time for the particular slide, which will be needed for the slide transition. It may differ from another slider’s time settings, or it can be the same if you choose 0 on the **“Delay”** scale from 0 to 60 seconds.\ In **“Slide animation”** you can add the code for the slide transitions. The codes for this purpose you can find in [**Slide Transitions****.**](https://www.themepunch.com/revsliderjquery-doc/slide-transitions/)\ In **“HTML layer animation”** you can add the code for the layer transitions. The code for this purpose you can find in [**Layer Transitions**](https://www.themepunch.com/revsliderjquery-doc/layer-transitions/)**.** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/builder/revolution-slider.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.