# Image with animated text

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fv59Nm4bx2FYHOetYEaOX%2FUntitled.png?alt=media&#x26;token=df15a5c2-655e-4dc2-ac86-8426818823df" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FbYWlNfX3JtAWq8a4XxAH%2F2024-03-1318-24-29-ezgif.com-gif-to-webp-converter.webp?alt=media&#x26;token=c79210ea-52dd-4c84-9f8a-f810b60ae403" alt=""><figcaption></figcaption></figure>

## **Adding a Section**

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`Image with animated text.`**

## **Section settings**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fnhv6ncnhdBO8wgfqnyWI%2FUntitled%201.png?alt=media&#x26;token=76cf1217-5de4-4b48-ad1e-0287947da6ca" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F1dXBey0MW2ES9lQHg6Lm%2FUntitled%202.png?alt=media&#x26;token=cf8beb30-e6d2-4823-a9e7-d5c5b437d530" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FdAnohqCjawLBpwS3tv9w%2FUntitled%203.png?alt=media&#x26;token=15560e21-324e-4fd1-9a68-b5ca5ce672ad" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - setting allows you to set the text for the title;
2. **`Heading desktop font size`** - setting allows you to set the font-size for the desktop title;
3. **`Heading background-image`** - the setting allows you to set the background-image for the heading.
4. **`Enable heading outline`** - setting allows you to turn on the outline for the heading(Not working with heading background-image);
5. **`Subheading`** - setting allows you to set the text for the subtitle;
6. **`Text`** - setting allows you to set the text for the text;
7. **`Button label`** - setting allows you to set the label for the button;
8. **`Button aria-label`** - setting allows you to set the `aria-label` for the button. This attribute allows screen readers to better convey information to people with disabilities;
9. **`Button link`** - setting allows you to set a link for the button;
10. **`Button type`** - setting allows you to set the type of the button;
11. **`Image`** - setting allows you to select the image;
12. **`Top layer`** - setting allows you to select heading/image as top layer between each other.
13. **`Enable animation`** - setting allows you to turn on the mouse-move animation for the image(Animation is working by mouseover of the section, when it has heading and image);

### Colors

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FVpH2vtkQehiLrqkwVEpV%2FUntitled%204.png?alt=media&#x26;token=e810721e-775c-40e3-8c13-6f7c4de2e9d8" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - setting allows you to select the color of the heading;
2. **`Heading outline`** - setting allows you to select the color of the heading outline;
3. **`Heading background`** - setting allows you to select the color of the heading background container;
4. **`Subheading`**- setting allows you to select the color of the subheading;
5. **`Text`** - setting allows you to select the color of the text;

### Layout

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FFxNOR0fQHvqBehGJRlbZ%2FUntitled%20(16).png?alt=media&#x26;token=3efd5bd2-9bd4-4e77-bed5-eff1372998ec" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop;**
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile.**