Arrow at bottom of section

[webxid]

Hi, I was wondering how I could get an animated arrow to be at the bottom of every section?

[Prasant]

Hello Daniel,

Thanks for writing in!

Please note that this will require some custom development work which falls outside the scope of support we can offer. Having said that you can use following steps to get started.

1. Inspect the section and under Customize > Setup > Class add a class name, Ex next-section.

2. Add following CSS under X > Theme Options > CSS:

.x-section.next-section {
   position: relative;
}

.x-section.next-section:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    margin-left: -40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 40px;
    border-color: #f3f3f3 transparent transparent transparent;
}

For animation, please take a look at following tutorial to get started.

https://www.w3schools.com/cssref/css3_pr_animation.asp

Thanks.