---
description: Editing slides.
---

# Slides

## Add slide&#x20;

If you have followed _**Start**_ chapter, you already have slides added to your slider. If so, please scroll to [_**Edit slide**_](https://app.gitbook.com/@transition-slider/s/wordpress/editing/slides#edit-slide) section.

Otherwise, if your _**Slides tab**_ is empty and looks like on image below, jump to [_**Add new slide**_](https://app.gitbook.com/@transition-slider/s/wordpress/new-slider#add-new-slide) section to read how to add slides.&#x20;

![Slides tab (empty)](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_h7GqMvrJjLIuH8q3q%2F-M_h8YEzhMkHQMvCltOc%2F94.png?alt=media\&token=04fcc308-ce29-4396-ac01-5c1818441aa8)

After slides are added, _**Slides tab**_ should look like this:

![Slides tab (with slides)](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_hBbHp9FWZOEUZZhfK%2F-M_hCrj94AWVchElBsFf%2F95.png?alt=media\&token=cd201828-e1aa-45a2-8f95-6e1b03b450f1)

## Edit slide

Now that you have slides added to your slider, you can _edit_ each slide individually. Hover with mouse over image and click EDIT to enter slide settings.

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_hFeNkuRoF9gTGxM_Y%2F-M_hG8-iI8GgktZ1WI50%2F96.png?alt=media\&token=bc57da02-fa20-4381-b45a-7a126536c312)

That will lead you to _**Slide settings page**_. If you look at the "_breadcrumb navigation_" on the top, you'll see exactly where you at (for example: `Dashboard > Slider > Slide 1`).

![Slide settings page](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_ijFJGfh7Wk3PMPa3P%2F-M_irloKcZnN4-Wj0LSA%2F97.png?alt=media\&token=27c21d0a-bb75-414b-9c6c-97403df9910e)

### Device settings

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_ijFJGfh7Wk3PMPa3P%2F-M_is9JOWpjDejk4GAzC%2F98.png?alt=media\&token=3cfe77fe-be22-4dbd-9041-970535b7c748)

{% hint style="info" %}
Switch between icons (**Desktop/Tablet/Mobile**) to target **Slide settings** for certain **device**.&#x20;

Each device can have own **Slide settings** and **Layer Elements**.&#x20;

If these settings stays unchanged, all devices will have the same settings as Desktop by defualt (first icon).
{% endhint %}

### Slide navigation and actions

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_ijFJGfh7Wk3PMPa3P%2F-M_itrVLvODi-JxEJi-E%2F99.png?alt=media\&token=fc6ae9ee-809a-40f2-a26a-a519bcf0d685)

{% hint style="info" %}
From here, you can switch to next or previous slide with _**NEXT**_ and _**PREVIOUS**_ buttons.

_**SAVE**_ button will save current slider changes.

_**PREVIEW**_ button will open slider modal window to see current changes (doesn't require saving).

_**BACK**_ button will lead you one step back to _Dashboard -> Slider settings._
{% endhint %}

### Tooltip helper

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_iuna7F5K0YuGCp9J-%2F-M_jDZRA3piHtRhbxjGk%2F105.png?alt=media&#x26;token=21e4fac8-9e66-47ce-8fe3-8a399d32df8a" alt=""></div>

{% hint style="info" %}
Mouse hover this icon to know more about certain option.
{% endhint %}

## Slide settings

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_iuna7F5K0YuGCp9J-%2F-M_j7D8xIOzZ-qZLRCWK%2F100.png?alt=media&#x26;token=0221c9ef-0f48-4e87-b85c-5e23276479ad" alt=""></div>

In _**Slide settings**_ window on the left side you can adjust some _main slide options_, like setting up slide animation, changing background and thumbnail.

### Background

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_iuna7F5K0YuGCp9J-%2F-M_jA-H0n0t8Ym-geBPv%2F101.png?alt=media&#x26;token=b00a1f69-5c90-450f-b287-c928de18a01a" alt=""></div>

Change slide image or video via wordpress media library.

### Thumbnail

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_iuna7F5K0YuGCp9J-%2F-M_jADOreOwkYm8vtPIo%2F102.png?alt=media&#x26;token=35ffff99-99f9-49e9-a41f-72302d1e9771" alt=""></div>

Thumbnail image of slide will be generated automatically, after you select background image. If you don't like that, thumbnail image can be changed manually by clicking on area _Choose thumbnail image_.

### Transition

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_iuna7F5K0YuGCp9J-%2F-M_jCUqz2gznrTRoZcDW%2F103.png?alt=media&#x26;token=bdb1558b-94c7-4cea-91e5-61ff47de4831" alt=""></div>

Select _**Transition effect**_ for current slide from dropdown menu from one of the pre-built transitions by clicking on arrow on the right side, or leave _Default_.

{% hint style="info" %}
Hover with mouse over image to see transition preview.
{% endhint %}

_**Effect Duration -**_ duration of selected _**Transition effect**_ between current and next slide

_**Effect Brightness -**_ brightness of selected _**Transition effect**_, between current and next slide.

_**Effect Distance -**_ offset of selected _**Transition effect,**_ between current and next slide.

_**Effect Blur -**_ motion blur of selected _**Transition effect**,_ between current and next slide.

### Advanced

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_iuna7F5K0YuGCp9J-%2F-M_jC_EUY7WQM6bUUV1M%2F104.png?alt=media&#x26;token=42a2c91e-e7d0-40bb-ba81-19e33b51afee" alt=""></div>

Slide can be _clickable_ and you can also invert colors of website menu when slider is on certain slide.

To enable clicking on entire slide, in field _**Full Slide Link**_ insert url where you want to redirect when user clicks on slide.

_**Open link in new window**_

If _**checked**_, clicking on slide will open new tab. If this option is _**unchecked**_, clicking on slide will redirect in the same tab.&#x20;

_**Invert menu colors**_

If _**checked**_, when the slider goes to this slide, website menu colors will be inverted. If this option is _**unchecked**_, Transition slider won't effect website menu. &#x20;



&#x20;

## Layer settings

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jKllY_3TMc8RVYRji%2F-M_jVgqlCZ2YC45Lf2oM%2F106.png?alt=media&#x26;token=953e7acb-0d56-4452-9d7f-ba095dcf55ba" alt=""></div>

In _**Layer settings**_ window on the left side you can add _**Layer Elements**_ like Text editor, Heading, Button, Image, Video or iFrame. To add _**Layer Element**_, simply click on icon and it will be added to scene.

Each _**Layer Element**_ can be adjusted individually and you can add as many elements as you want. We will be describing them one by one.

### Text Editor

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jeuQ8XQT3VxMj1Aum%2F-M_kyW1QFAcSnvm83qT1%2F115.png?alt=media&#x26;token=2eecca26-0a54-4457-8fa3-7e966c8d5f20" alt=""></div>

Click on _**Text Editor**_ icon to add text to scene. Once it's on scene, click on it to open it's options.

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jYEjd8S_0w7z6Yk_2%2F-M_jZV1X7mpqCEddcCBb%2F107.png?alt=media\&token=8fe836b3-4e4e-44c6-ae90-def7e1b2d122)

{% hint style="info" %}
switch between tabs below to open more details about settings.
{% endhint %}

{% tabs %}
{% tab title="Content" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l7bNEIIwJLZLiqO4j%2F133.png?alt=media&#x26;token=c21c5254-3ea1-463a-81c0-fcc0070667e9" alt=""></div>

Under _**Content**_ tab you'll find sections _**General**_ and _**Templates**_.

### General

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l7nHXBQErEgp5Deli%2F134.png?alt=media&#x26;token=ea9257d7-0710-47b3-84f4-61c402a08b17" alt=""></div>

In _**General**_ section you can type your text content and use embedded text editor for text formatting.

### Templates

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l82db-w_lzcc0gbVd%2F135.png?alt=media&#x26;token=9249ea03-5639-49b7-8ba7-9fb39286bd33" alt=""></div>

In _**Templates**_ section you can select 1of 16 _text templates_ for your text. _Text templates_ are pre-built texts with best fonts and sizes.


{% endtab %}

{% tab title="Style" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l656O0WEHBhdYlwMk%2F129.png?alt=media&#x26;token=758cf241-8931-4a93-b445-c9ffebe08fd7" alt=""></div>

Under _**Style**_ tab you'll find sections _**Typography, Background, Border, Spacing, Position, Size.**_

### Typography

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6GA9uwyXVM7yCY7J%2F126.png?alt=media&#x26;token=9865e356-67a8-453d-8d8f-a5f7de8b36d9" alt=""></div>

In _**Typography**_ section you can fully customize your Text Element content. Change font size, weight, line height, etc.

One of the great features here is Google Font selection. Select one of the thousand beautiful **Google Fonts,** or you can use default system font.

### Background

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5rN4846c9NlHMmsa%2F127.png?alt=media&#x26;token=0fa6897d-4c3c-4d36-8e21-e9ee5a921a2b" alt=""></div>

In _**Background**_ section you can add background color to your Text Element.

### Border

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5XriKPs1SHHBbk77%2F128.png?alt=media&#x26;token=49568ab7-eb20-4ef0-87be-b6b7ffb8e64e" alt=""></div>

In _**Border**_ section you can create border styles for your Text Element.

### Spacing

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6cGBf99NSdNGO2m0%2F130.png?alt=media&#x26;token=465179f6-9034-4189-87eb-036edb81cc1b" alt=""></div>

In _**Spacing**_ section you can add margin and padding to your Text Element.

### Position

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6t7CxwXEUVKbebkR%2F131.png?alt=media&#x26;token=0f774813-7cbf-4fcf-9aed-5a24af51b13b" alt=""></div>

In _**Position**_ section you can adjust Text Element position on scene. There are two main position options: _relative_ and _absolute_.

_**relative**_ - this will position element as table row. This is the most used position in our [Templates](https://app.gitbook.com/@transition-slider/s/wordpress/slider-templates), and showed as best practice. With _**relative**_ position you can achieve that all your Layer Elements are always visible on slide, and positioned properly, which is not always the case with _**absolute**_ position.

_**absolute**_ - this will position element exactly to the scene coordinates x and y. Center of the scene is 0,0. With _offset_ parameter you can change text position up/down, left/right by pixels.

_**Display**_ options _**block**_ and _**inline-block**_ gives you more flexibility in ordering your Layer Elements.

_**Horizontal Align**_ and _**Vertical Align**_ are responsible for aligning Layer Element to left/center/right of the scene.

### Size

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l75kkZxyv4VBbU6MR%2F132.png?alt=media&#x26;token=ff11686c-28a5-4c68-9e2a-0d06d65159ca" alt=""></div>

In _**Size**_ section you can adjust text dimensions. 6 input fields are actual css properties: width, min-width, max-width, height, min-height, max-height. These settings are useful if you want your text to be in rectangle or square of exact size.
{% endtab %}

{% tab title="Advanced" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l8oCwVSxo5m7LSnAi%2F136.png?alt=media&#x26;token=5ae1fa82-5622-4b91-a16f-a2b4a3fda249" alt=""></div>

Under _**Advanced**_ tab you'll find sections _**Animation, Parallax**_ and _**Custom CSS**_.

### Animation

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9MbDwtoHEa9cGz3V%2F137.png?alt=media&#x26;token=d69b7f71-7ad3-463d-83e8-528ca4fab478" alt=""></div>

_**Animation type**_

Text Element can be animated to scene when slide loads. To do that select _**Animation type - animation**_. If you just want your text to appear instantly, select _**none**_.

_**Enter animation**_ - animation when slide loads.

_**Exit animation**_ - animation when slider goes to next slide.

_**Speed**_ - duration of animation.

_**Delay**_ - animation starts with delay.

### Parallax

_**Parallax**_ option simulates 3D depth by moving the slider background slower than the webpage when scrolling. 0 is minimum value, and 1 is maximum value.

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9WWoL2NBJZ1vXgCD%2F138.png?alt=media&#x26;token=0ab55465-4571-45f2-8fe7-9abcf5b70d6d" alt=""></div>

### Custom CSS

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9e8veLt-FSR7oCPY%2F139.png?alt=media&#x26;token=caf37d27-9e48-4fad-8e3f-42dc5a95439f" alt=""></div>

Add your own _**custom css**_ properties to Text Element.&#x20;

{% hint style="warning" %}
Custom CSS should be written by [css syntax](https://www.w3schools.com/css/css_syntax.ASP).
{% endhint %}
{% endtab %}
{% endtabs %}

### Heading

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jeuQ8XQT3VxMj1Aum%2F-M_kyq4cLQhohEdmhrV_%2F116.png?alt=media&#x26;token=e4d965e3-7c68-4142-8dea-3bcb59f9b060" alt=""></div>

Click on _**Heading**_ icon to add heading to scene. Once it's on scene, click on it to open it's options.

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jYEjd8S_0w7z6Yk_2%2F-M_j_KztaJmMMxz5mJX6%2F108.png?alt=media\&token=d8f98ef1-f9a3-49d2-a669-8aebaacc5dbf)

{% hint style="info" %}
switch between tabs below to open more details about settings.
{% endhint %}

{% tabs %}
{% tab title="Content" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uD4PaFfYYMKBEMqvE%2F-M_uE2ZrwK-gm9FWPz7U%2F151.png?alt=media&#x26;token=c6035ced-4613-4709-a64e-46f1bc8a859f" alt=""></div>

Under _**Content**_ tab you'll find sections _**General**_ and _**Templates**_.

### General

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_lPhwY81z-sIiZM3DH%2F-M_lTvFgqCcplO27K0TU%2F141.png?alt=media&#x26;token=8e9b99fa-3390-4261-a894-ef08ec84d5d0" alt=""></div>

In _**General**_ section you can type your Heading content and use embedded text editor for text formatting.

### Templates

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_lPhwY81z-sIiZM3DH%2F-M_lTxxoaP0u5YIJj1Xq%2F142.png?alt=media&#x26;token=04321ebc-3c11-4bb2-b601-447d22fe52b3" alt=""></div>

In _**Templates**_ section you can select 1of 16 _text templates_ for your Heading. _Text templates_ are pre-built texts with best fonts and sizes.
{% endtab %}

{% tab title="Style" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tesW-UsWNBg3oe-1N%2F-M_top3YdwLzxtH3wL62%2F143.png?alt=media&#x26;token=5f215845-1310-4dbd-95bb-b49cb530634c" alt=""></div>

Under _**Style**_ tab you'll find sections _**Typography, Background, Border, Spacing, Position, Size.**_

### **Typography**

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tesW-UsWNBg3oe-1N%2F-M_tqYCvI389_MnjlKiS%2F126.png?alt=media&#x26;token=179806cf-77ab-48a0-9698-8252c48b0913" alt=""></div>

In _**Typography**_ section you can fully customize your Text Element content. Change font size, weight, line height, etc.

One of the great features here is Google Font selection. Select one of the thousand beautiful **Google Fonts,** or you can use default system font.

### Background

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tesW-UsWNBg3oe-1N%2F-M_tqbWcXml2VjRafcls%2F127.png?alt=media&#x26;token=088be47c-8b46-4f31-8638-8fb5ff962468" alt=""></div>

In _**Background**_ section you can add background color to your Heading Element.

### Border

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tesW-UsWNBg3oe-1N%2F-M_tqjnzX6pLI5mFkee6%2F128.png?alt=media&#x26;token=5dec5be2-19bf-49ed-91fa-f8b1b1d2d3b3" alt=""></div>

In _**Border**_ section you can create border styles for your Heading Element.

### Spacing

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tesW-UsWNBg3oe-1N%2F-M_tqmeoOZ6G-c3xHXWE%2F130.png?alt=media&#x26;token=ac72b5df-b655-4110-999a-6f0fb9a419eb" alt=""></div>

In _**Spacing**_ section you can add margin and padding to your Heading Element.

### Position

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tesW-UsWNBg3oe-1N%2F-M_tqq-hnAMIT2Mm_iUB%2F131.png?alt=media&#x26;token=92294f7c-3019-423e-a1e9-ab3c804e4ccc" alt=""></div>

In _**Position**_ section you can adjust Heading Element position on scene. There are two main position options: _relative_ and _absolute_.

_**relative**_ - this will position element as table row. This is the most used position in our [Templates](https://app.gitbook.com/@transition-slider/s/wordpress/slider-templates), and showed as best practice. With _**relative**_ position you can achieve that all your Layer Elements are always visible on slide, and positioned properly, which is not always the case with _**absolute**_ position.

_**absolute**_ - this will position element exactly to the scene coordinates x and y. Center of the scene is 0,0. With _offset_ parameter you can change text position up/down, left/right by pixels.

_**Display**_ options _**block**_ and _**inline-block**_ gives you more flexibility in ordering your Layer Elements.

_**Horizontal Align**_ and _**Vertical Align**_ are responsible for aligning Layer Element to left/center/right of the scene.

### Size

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tesW-UsWNBg3oe-1N%2F-M_tqtDiH8lYBXPRLgBx%2F132.png?alt=media&#x26;token=38ee0319-286c-48e1-a8b2-6b57e66441a1" alt=""></div>

In _**Size**_ section you can adjust text dimensions. 6 input fields are actual css properties: width, min-width, max-width, height, min-height, max-height. These settings are useful if you want your text to be in rectangle or square of exact size.
{% endtab %}

{% tab title="Advanced" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tesW-UsWNBg3oe-1N%2F-M_tp44_t6qIVob-VC4R%2F144.png?alt=media&#x26;token=97cfe60d-54b4-4ec1-9c61-2576d4bff352" alt=""></div>

Under _**Advanced**_ tab you'll find sections _**Animation, Parallax**_ and _**Custom CSS**_.

### Animation

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9MbDwtoHEa9cGz3V%2F137.png?alt=media&#x26;token=d69b7f71-7ad3-463d-83e8-528ca4fab478" alt=""></div>

_**Animation type**_

Heading Element can be animated to scene when slide loads. To do that select _**Animation type - animation**_. If you just want your Heading to appear instantly, select _**none**_.

_**Enter animation**_ - animation when slide loads.

_**Exit animation**_ - animation when slider goes to next slide.

_**Speed**_ - duration of animation.

_**Delay**_ - animation starts with delay.

### Parallax

_**Parallax**_ option simulates 3D depth by moving the slider background slower than the webpage when scrolling. 0 is minimum value, and 1 is maximum value.

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9WWoL2NBJZ1vXgCD%2F138.png?alt=media&#x26;token=0ab55465-4571-45f2-8fe7-9abcf5b70d6d" alt=""></div>

### Custom CSS

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9e8veLt-FSR7oCPY%2F139.png?alt=media&#x26;token=caf37d27-9e48-4fad-8e3f-42dc5a95439f" alt=""></div>

Add your own _**custom css**_ properties to Heading Element.&#x20;

{% hint style="warning" %}
Custom CSS should be written by [css syntax](https://www.w3schools.com/css/css_syntax.ASP).
{% endhint %}
{% endtab %}
{% endtabs %}

### Image

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jeuQ8XQT3VxMj1Aum%2F-M_kzI9cxKsxYEuD4bxU%2F117.png?alt=media&#x26;token=f9679a13-31ae-4b4f-bd58-52bbf588889b" alt=""></div>

Click on _**Image**_ icon to add image to scene. Wordpress media library will open where you can select image. _Choose_ desired image and click _Select_ to add image to scene.&#x20;

Once it's on scene, click on it to open it's options.

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jYEjd8S_0w7z6Yk_2%2F-M_jaO2JEnA4s4C_xAIz%2F109.png?alt=media\&token=e8cdf6df-f327-4f28-a1fb-14e5cbeb2664)

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jYEjd8S_0w7z6Yk_2%2F-M_jbVrLz4E230WHMjc4%2F110.png?alt=media\&token=73653076-ddf6-40a8-af1d-cc104c2f3ddc)

{% hint style="info" %}
switch between tabs below to open more details about settings.
{% endhint %}

{% tabs %}
{% tab title="Content" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uFetrgDmHLR8VbwCi%2F-M_uH0H-BPdMvR9FT5P6%2F157.png?alt=media&#x26;token=280a738d-5b49-46c2-b12e-f3c99ee7d87c" alt=""></div>

Under _**Content**_ tab you'll find section _**General**_.

### General

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uFetrgDmHLR8VbwCi%2F-M_uH36KNIjJKyfsXB0h%2F156.png?alt=media&#x26;token=a39b1143-0b72-484b-9c7d-e0a496698a1c" alt=""></div>

In _**General**_ section you can change image source by clicking on _**Choose image**_ area.
{% endtab %}

{% tab title="Style" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tsdKNhXS7sziBmCQk%2F-M_ttoG_7R4agrRXzK5K%2F146.png?alt=media&#x26;token=8c5bcdf9-d30a-4814-87b7-3b0d05c3cfff" alt=""></div>

### Background

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5rN4846c9NlHMmsa%2F127.png?alt=media&#x26;token=0fa6897d-4c3c-4d36-8e21-e9ee5a921a2b" alt=""></div>

In _**Background**_ section you can add background color to your Image Element.

### Border

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5XriKPs1SHHBbk77%2F128.png?alt=media&#x26;token=49568ab7-eb20-4ef0-87be-b6b7ffb8e64e" alt=""></div>

In _**Border**_ section you can create border styles for your Image Element.

### Spacing

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6cGBf99NSdNGO2m0%2F130.png?alt=media&#x26;token=465179f6-9034-4189-87eb-036edb81cc1b" alt=""></div>

In _**Spacing**_ section you can add margin and padding to your Image Element.

### Position

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6t7CxwXEUVKbebkR%2F131.png?alt=media&#x26;token=0f774813-7cbf-4fcf-9aed-5a24af51b13b" alt=""></div>

In _**Position**_ section you can adjust Image Element position on scene. There are two main position options: _relative_ and _absolute_.

_**relative**_ - this will position element as table row. This is the most used position in our [Templates](https://app.gitbook.com/@transition-slider/s/wordpress/slider-templates), and showed as best practice. With _**relative**_ position you can achieve that all your Layer Elements are always visible on slide, and positioned properly, which is not always the case with _**absolute**_ position.

_**absolute**_ - this will position element exactly to the scene coordinates x and y. Center of the scene is 0,0. With _offset_ parameter you can change text position up/down, left/right by pixels.

_**Display**_ options _**block**_ and _**inline-block**_ gives you more flexibility in ordering your Layer Elements.

_**Horizontal Align**_ and _**Vertical Align**_ are responsible for aligning Layer Element to left/center/right of the scene.

### Size

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l75kkZxyv4VBbU6MR%2F132.png?alt=media&#x26;token=ff11686c-28a5-4c68-9e2a-0d06d65159ca" alt=""></div>

In _**Size**_ section you can adjust Image dimensions. 6 input fields are actual css properties: width, min-width, max-width, height, min-height, max-height. These settings are useful if you want your image to be in rectangle or square of exact size.
{% endtab %}

{% tab title="Advanced" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tsdKNhXS7sziBmCQk%2F-M_ttqajWt4G4nq7AI99%2F147.png?alt=media&#x26;token=4a137ae7-82b8-4e23-b6f9-c2c030bca4f7" alt=""></div>

Under _**Advanced**_ tab you'll find sections _**Animation, Parallax, Custom CSS**_ and _**On click.**_

### Animation

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9MbDwtoHEa9cGz3V%2F137.png?alt=media&#x26;token=d69b7f71-7ad3-463d-83e8-528ca4fab478" alt=""></div>

_**Animation type**_

Image Element can be animated to scene when slide loads. To do that select _**Animation type - animation**_. If you just want your image to appear instantly, select _**none**_.

_**Enter animation**_ - animation when slide loads.

_**Exit animation**_ - animation when slider goes to next slide.

_**Speed**_ - duration of animation.

_**Delay**_ - animation starts with delay.

### Parallax

_**Parallax**_ option simulates 3D depth by moving the slider background slower than the webpage when scrolling. 0 is minimum value, and 1 is maximum value.

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9WWoL2NBJZ1vXgCD%2F138.png?alt=media&#x26;token=0ab55465-4571-45f2-8fe7-9abcf5b70d6d" alt=""></div>

### Custom CSS

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9e8veLt-FSR7oCPY%2F139.png?alt=media&#x26;token=caf37d27-9e48-4fad-8e3f-42dc5a95439f" alt=""></div>

Add your own _**custom css**_ properties to Image Element.&#x20;

{% hint style="warning" %}
Custom CSS should be written by [css syntax](https://www.w3schools.com/css/css_syntax.ASP).
{% endhint %}

### On click

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_ttuVp4KyWgAd8FuuU%2F-M_tx_yOKM3nBp36483q%2F148.png?alt=media&#x26;token=3b7d2c52-7f8a-4d7d-9888-cfc937393984" alt=""></div>

Image Element can have custom actions _on click_. Select _**Action**_ from dropdown menu:

#### none

Remove action from Image element

#### Open in Lightbox

Open Image Element in Lightbox mode.

#### Go to URL

Redirect to custom URL on Image Element click.
{% endtab %}
{% endtabs %}



### Button

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jeuQ8XQT3VxMj1Aum%2F-M_kzTiytqfeBAl1uoQ4%2F118.png?alt=media&#x26;token=e610ae69-2d7c-4b98-b5a0-222001c1bed6" alt=""></div>

Click on _**Button**_ icon to add button to scene. Once it's on scene, click on it to open it's options.

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jYEjd8S_0w7z6Yk_2%2F-M_jc4xOSQBr7ED-z-eY%2F111.png?alt=media\&token=54e8b137-fd46-437b-9801-a63f4f31d5dd)

{% hint style="info" %}
switch between tabs below to open more details about settings.
{% endhint %}

{% tabs %}
{% tab title="Content" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uD4PaFfYYMKBEMqvE%2F-M_uESeXEPr1nYLqUsCQ%2F152.png?alt=media&#x26;token=a3040022-3c0f-43b1-b96d-55f5bd488c07" alt=""></div>

Under _**Content**_ tab you'll find sections _**General**_ and _**Templates**_.

### General

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tyIQa62gNrFjjhNEk%2F-M_uAgB_PX1SBH5lxMoh%2F149.png?alt=media&#x26;token=180fb691-c634-4e86-af5d-3e861473ce08" alt=""></div>

In _**General**_ section, under _**Label**_ option, you can type text content inside Button Element.

Button Element can have _**Link**_ (custom url) to redirect to another page on button click, which can be done in same tab (**Open in new tab** - _unchecked_) or in new tab (_**Open in new tab**_ - _checked_).

### Templates

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_tyIQa62gNrFjjhNEk%2F-M_uAvOV5WcUGsg2y0uh%2F150.png?alt=media&#x26;token=5ae73f31-a6d2-4209-af0d-8444b88f0dcf" alt=""></div>

In _**Templates**_ section you can select 1of 12 _Button templates_ for your Button Element. _Button templates_ are pre-built buttons with most common web button visual trends.
{% endtab %}

{% tab title="Style" %}


<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uD4PaFfYYMKBEMqvE%2F-M_uEUm0MiXuaN_QqXA5%2F153.png?alt=media&#x26;token=3b47650e-07d9-499c-82cd-52cd7efda09c" alt=""></div>

Under _**Style**_ tab you'll find sections _**Typography, Background, Border, Spacing, Position, Size.**_

### Typography

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6GA9uwyXVM7yCY7J%2F126.png?alt=media&#x26;token=9865e356-67a8-453d-8d8f-a5f7de8b36d9" alt=""></div>

In _**Typography**_ section you can fully customize your Button Element content. Change font size, weight, line height, etc.

One of the great features here is Google Font selection. Select one of the thousand beautiful **Google Fonts,** or you can use default system font.

### Background

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5rN4846c9NlHMmsa%2F127.png?alt=media&#x26;token=0fa6897d-4c3c-4d36-8e21-e9ee5a921a2b" alt=""></div>

In _**Background**_ section you can add background color to your Button Element.

### Border

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5XriKPs1SHHBbk77%2F128.png?alt=media&#x26;token=49568ab7-eb20-4ef0-87be-b6b7ffb8e64e" alt=""></div>

In _**Border**_ section you can create border styles for your Button Element.

### Spacing

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6cGBf99NSdNGO2m0%2F130.png?alt=media&#x26;token=465179f6-9034-4189-87eb-036edb81cc1b" alt=""></div>

In _**Spacing**_ section you can add margin and padding to your Button Element text.

### Position

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6t7CxwXEUVKbebkR%2F131.png?alt=media&#x26;token=0f774813-7cbf-4fcf-9aed-5a24af51b13b" alt=""></div>

In _**Position**_ section you can adjust Button Element position on scene. There are two main position options: _relative_ and _absolute_.

_**relative**_ - this will position element as table row. This is the most used position in our [Templates](https://app.gitbook.com/@transition-slider/s/wordpress/slider-templates), and showed as best practice. With _**relative**_ position you can achieve that all your Layer Elements are always visible on slide, and positioned properly, which is not always the case with _**absolute**_ position.

_**absolute**_ - this will position element exactly to the scene coordinates x and y. Center of the scene is 0,0. With _offset_ parameter you can change text position up/down, left/right by pixels.

_**Display**_ options _**block**_ and _**inline-block**_ gives you more flexibility in ordering your Layer Elements.

_**Horizontal Align**_ and _**Vertical Align**_ are responsible for aligning Layer Element to left/center/right of the scene.

### Size

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l75kkZxyv4VBbU6MR%2F132.png?alt=media&#x26;token=ff11686c-28a5-4c68-9e2a-0d06d65159ca" alt=""></div>

In _**Size**_ section you can adjust button dimensions. 6 input fields are actual css properties: width, min-width, max-width, height, min-height, max-height. These settings are useful if you want your button to be of exact size.
{% endtab %}

{% tab title="Advanced" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uD4PaFfYYMKBEMqvE%2F-M_uEeXqUxjkXk_HHujv%2F154.png?alt=media&#x26;token=023166e1-8cae-4b48-bb8b-9a17de113127" alt=""></div>

Under _**Advanced**_ tab you'll find sections _**Animation, Parallax**_ and _**Custom CSS**_.

### Animation

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9MbDwtoHEa9cGz3V%2F137.png?alt=media&#x26;token=d69b7f71-7ad3-463d-83e8-528ca4fab478" alt=""></div>

_**Animation type**_

Button Element can be animated to scene when slide loads. To do that select _**Animation type - animation**_. If you just want your button to appear instantly, select _**none**_.

_**Enter animation**_ - animation when slide loads.

_**Exit animation**_ - animation when slider goes to next slide.

_**Speed**_ - duration of animation.

_**Delay**_ - animation starts with delay.

### Parallax

_**Parallax**_ option simulates 3D depth by moving the slider background slower than the webpage when scrolling. 0 is minimum value, and 1 is maximum value.

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9WWoL2NBJZ1vXgCD%2F138.png?alt=media&#x26;token=0ab55465-4571-45f2-8fe7-9abcf5b70d6d" alt=""></div>

### Custom CSS

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9e8veLt-FSR7oCPY%2F139.png?alt=media&#x26;token=caf37d27-9e48-4fad-8e3f-42dc5a95439f" alt=""></div>

Add your own _**custom css**_ properties to Button Element.&#x20;

{% hint style="warning" %}
Custom CSS should be written by [css syntax](https://www.w3schools.com/css/css_syntax.ASP).
{% endhint %}
{% endtab %}
{% endtabs %}

### Video

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jeuQ8XQT3VxMj1Aum%2F-M_kzWjEwa6-NELvbc5-%2F119.png?alt=media&#x26;token=0eeb1a8b-51e3-4d28-b8db-34bcefa9a7bd" alt=""></div>

Click on _**Video**_ icon to add video to scene. Wordpress media library will open where you can select video. _Choose_ desired video and click _Select_ to add video to scene.&#x20;

Once it's on scene, click on it to open it's options.

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jYEjd8S_0w7z6Yk_2%2F-M_jd7JSU2Lw6OS1TaPM%2F112.png?alt=media\&token=d2395ec7-56f5-4e51-b6f4-d6f2fef33ac5)

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jYEjd8S_0w7z6Yk_2%2F-M_jdi-io5xHHBIlLOdG%2F113.png?alt=media\&token=15602157-2d92-461d-aece-f0fb919d476e)

{% hint style="info" %}
switch between tabs below to open more details about settings.
{% endhint %}

{% tabs %}
{% tab title="Content" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uFetrgDmHLR8VbwCi%2F-M_uGUtz1TZlJTG4w90l%2F155.png?alt=media&#x26;token=5011474c-8b24-449b-b23c-d58c05dc6041" alt=""></div>

Under _**Content**_ tab you'll find section _**General**_.

### General

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uFetrgDmHLR8VbwCi%2F-M_uH_0Ub3ev9mtQLzo_%2F158.png?alt=media&#x26;token=856a5b85-43db-4ee6-a360-14155c3e1bd0" alt=""></div>

In _**General**_ section you can change video source by clicking on _**Choose video**_ area.
{% endtab %}

{% tab title="Style" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uFetrgDmHLR8VbwCi%2F-M_uIMXDl4L4n3iYAxOQ%2F159.png?alt=media&#x26;token=92ae16a0-e099-4697-83a3-6b18982f3581" alt=""></div>

### Background

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5rN4846c9NlHMmsa%2F127.png?alt=media&#x26;token=0fa6897d-4c3c-4d36-8e21-e9ee5a921a2b" alt=""></div>

In _**Background**_ section you can add background color to your Video Element.

### Border

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5XriKPs1SHHBbk77%2F128.png?alt=media&#x26;token=49568ab7-eb20-4ef0-87be-b6b7ffb8e64e" alt=""></div>

In _**Border**_ section you can create border styles for your Video Element.

### Spacing

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6cGBf99NSdNGO2m0%2F130.png?alt=media&#x26;token=465179f6-9034-4189-87eb-036edb81cc1b" alt=""></div>

In _**Spacing**_ section you can add margin and padding to your Video Element.

### Position

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6t7CxwXEUVKbebkR%2F131.png?alt=media&#x26;token=0f774813-7cbf-4fcf-9aed-5a24af51b13b" alt=""></div>

In _**Position**_ section you can adjust Video Element position on scene. There are two main position options: _relative_ and _absolute_.

_**relative**_ - this will position element as table row. This is the most used position in our [Templates](https://app.gitbook.com/@transition-slider/s/wordpress/slider-templates), and showed as best practice. With _**relative**_ position you can achieve that all your Layer Elements are always visible on slide, and positioned properly, which is not always the case with _**absolute**_ position.

_**absolute**_ - this will position element exactly to the scene coordinates x and y. Center of the scene is 0,0. With _offset_ parameter you can change text position up/down, left/right by pixels.

_**Display**_ options _**block**_ and _**inline-block**_ gives you more flexibility in ordering your Layer Elements.

_**Horizontal Align**_ and _**Vertical Align**_ are responsible for aligning Layer Element to left/center/right of the scene.

### Size

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l75kkZxyv4VBbU6MR%2F132.png?alt=media&#x26;token=ff11686c-28a5-4c68-9e2a-0d06d65159ca" alt=""></div>

In _**Size**_ section you can adjust Video dimensions. 6 input fields are actual css properties: width, min-width, max-width, height, min-height, max-height. These settings are useful if you want your image to be in rectangle or square of exact size.
{% endtab %}

{% tab title="Advanced" %}


<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uFetrgDmHLR8VbwCi%2F-M_uJWL3rNL0ROKU-VFL%2F160.png?alt=media&#x26;token=c85a6373-1190-4323-bfbd-d5dd699560e9" alt=""></div>

Under _**Advanced**_ tab you'll find sections _**Animation, Parallax, Custom CSS**_ and _**On click.**_

### Animation

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9MbDwtoHEa9cGz3V%2F137.png?alt=media&#x26;token=d69b7f71-7ad3-463d-83e8-528ca4fab478" alt=""></div>

_**Animation type**_

Video Element can be animated to scene when slide loads. To do that select _**Animation type - animation**_. If you just want your vidoe to appear instantly, select _**none**_.

_**Enter animation**_ - animation when slide loads.

_**Exit animation**_ - animation when slider goes to next slide.

_**Speed**_ - duration of animation.

_**Delay**_ - animation starts with delay.

### Parallax

_**Parallax**_ option simulates 3D depth by moving the slider background slower than the webpage when scrolling. 0 is minimum value, and 1 is maximum value.

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9WWoL2NBJZ1vXgCD%2F138.png?alt=media&#x26;token=0ab55465-4571-45f2-8fe7-9abcf5b70d6d" alt=""></div>

### Custom CSS

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9e8veLt-FSR7oCPY%2F139.png?alt=media&#x26;token=caf37d27-9e48-4fad-8e3f-42dc5a95439f" alt=""></div>

Add your own _**custom css**_ properties to Video Element.&#x20;

{% hint style="warning" %}
Custom CSS should be written by [css syntax](https://www.w3schools.com/css/css_syntax.ASP).
{% endhint %}

### On click

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_ttuVp4KyWgAd8FuuU%2F-M_tx_yOKM3nBp36483q%2F148.png?alt=media&#x26;token=3b7d2c52-7f8a-4d7d-9888-cfc937393984" alt=""></div>

Video Element can have custom actions _on click_. Select _**Action**_ from dropdown menu:

#### none

Remove action from Video element

#### Open in Lightbox

Open Vdieo Element in Lightbox mode.

#### Go to URL

Redirect to custom URL on Video Element click.
{% endtab %}
{% endtabs %}

### iFrame

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jeuQ8XQT3VxMj1Aum%2F-M_kzdvxXnQIC4kVv-oI%2F120.png?alt=media&#x26;token=b6995824-55ea-42bd-a485-7f7ddc402b32" alt=""></div>

Click on _**iFrame**_ icon to add iframe to scene. Once it's on scene, click on it to open it's options.

![](https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_jYEjd8S_0w7z6Yk_2%2F-M_jejTWhHJEZsgpCgyc%2F114.png?alt=media\&token=226c40d6-909e-4c85-ad18-bf51cabe14df)

With iFrame Element you can embed any website page into your slide.

{% hint style="info" %}
switch between tabs below to open more details about settings.
{% endhint %}

{% tabs %}
{% tab title="Content" %}
<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uJjc6QtfJrrgTX73p%2F-M_uL-ZzPf9whQ4mmBC-%2F161.png?alt=media&#x26;token=9599e6be-16e0-4682-9b44-2ce5277288ad" alt=""></div>

Under _**Content**_ tab you'll find section _**General**_.

### General

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uJjc6QtfJrrgTX73p%2F-M_uLjGYrd3BGqc9lGLZ%2F164.png?alt=media&#x26;token=a8b8c81d-fa65-4555-971e-d6da84a74dfa" alt=""></div>

In _**General**_ section you can set iFrame source in _**URL**_ field. iFrame source can be any website url, for example: [https://transitionslider.com/](https://transitionslider.com/).&#x20;
{% endtab %}

{% tab title="Style" %}


<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uJjc6QtfJrrgTX73p%2F-M_uLOwAL6a1jrDlHBJo%2F162.png?alt=media&#x26;token=29861680-8854-49e3-9915-140d3d219b49" alt=""></div>

### Background

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5rN4846c9NlHMmsa%2F127.png?alt=media&#x26;token=0fa6897d-4c3c-4d36-8e21-e9ee5a921a2b" alt=""></div>

In _**Background**_ section you can add background color to your iFrame Element.

### Border

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l5XriKPs1SHHBbk77%2F128.png?alt=media&#x26;token=49568ab7-eb20-4ef0-87be-b6b7ffb8e64e" alt=""></div>

In _**Border**_ section you can create border styles for your iFrame Element.

### Spacing

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6cGBf99NSdNGO2m0%2F130.png?alt=media&#x26;token=465179f6-9034-4189-87eb-036edb81cc1b" alt=""></div>

In _**Spacing**_ section you can add margin and padding to your iFrame Element.

### Position

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l6t7CxwXEUVKbebkR%2F131.png?alt=media&#x26;token=0f774813-7cbf-4fcf-9aed-5a24af51b13b" alt=""></div>

In _**Position**_ section you can adjust iFrameElement position on scene. There are two main position options: _relative_ and _absolute_.

_**relative**_ - this will position element as table row. This is the most used position in our [Templates](https://app.gitbook.com/@transition-slider/s/wordpress/slider-templates), and showed as best practice. With _**relative**_ position you can achieve that all your Layer Elements are always visible on slide, and positioned properly, which is not always the case with _**absolute**_ position.

_**absolute**_ - this will position element exactly to the scene coordinates x and y. Center of the scene is 0,0. With _offset_ parameter you can change text position up/down, left/right by pixels.

_**Display**_ options _**block**_ and _**inline-block**_ gives you more flexibility in ordering your Layer Elements.

_**Horizontal Align**_ and _**Vertical Align**_ are responsible for aligning Layer Element to left/center/right of the scene.

### Size

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_kzhqQrrtjcaFBp61-%2F-M_l75kkZxyv4VBbU6MR%2F132.png?alt=media&#x26;token=ff11686c-28a5-4c68-9e2a-0d06d65159ca" alt=""></div>

In _**Size**_ section you can adjust iFrame dimensions. 6 input fields are actual css properties: width, min-width, max-width, height, min-height, max-height. These settings are useful if you want your iframe window to be of exact size.
{% endtab %}

{% tab title="Advanced" %}


<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_uJjc6QtfJrrgTX73p%2F-M_uLVsqGmzWgFs55uow%2F163.png?alt=media&#x26;token=419c70bc-5eef-493e-86d4-8a16edab06db" alt=""></div>

Under _**Advanced**_ tab you'll find sections _**Animation, Parallax**_ and _**Custom CSS**_.

### Animation

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9MbDwtoHEa9cGz3V%2F137.png?alt=media&#x26;token=d69b7f71-7ad3-463d-83e8-528ca4fab478" alt=""></div>

_**Animation type**_

iFrame Element can be animated to scene when slide loads. To do that select _**Animation type - animation**_. If you just want your iFrame to appear instantly, select _**none**_.

_**Enter animation**_ - animation when slide loads.

_**Exit animation**_ - animation when slider goes to next slide.

_**Speed**_ - duration of animation.

_**Delay**_ - animation starts with delay.

### Parallax

_**Parallax**_ option simulates 3D depth by moving the slider background slower than the webpage when scrolling. 0 is minimum value, and 1 is maximum value.

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9WWoL2NBJZ1vXgCD%2F138.png?alt=media&#x26;token=0ab55465-4571-45f2-8fe7-9abcf5b70d6d" alt=""></div>

### Custom CSS

<div align="left"><img src="https://183905966-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVG1EB_gdhnYteO-Tot%2F-M_l7KZXNLAXLCskOc1m%2F-M_l9e8veLt-FSR7oCPY%2F139.png?alt=media&#x26;token=caf37d27-9e48-4fad-8e3f-42dc5a95439f" alt=""></div>

Add your own _**custom css**_ properties to iFrame Element.&#x20;

{% hint style="warning" %}
Custom CSS should be written by [css syntax](https://www.w3schools.com/css/css_syntax.ASP).
{% endhint %}
{% endtab %}
{% endtabs %}

###
