Objects that can add value to the NICEPAGE

Hello Luanderson,

Thank you for the suggestions!

We've forwarded your feature requests to our development team for consideration.

...................................................
Sincerely,
George.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Obrigado

Dear Luanderson,

Regarding the Wahtsapp chat, you may implement floating button on your website
Whatsapp floating button

You can download and use the animated icons/images as needed. Refer to the attached block 111.zip and import it into your project.

For the Animated Shape Separator, you can utilize HTML blocks and CSS code to achieve a similar effect. Nowadays, AI can assist with this.
Refer to the attached block 222.zip (export the block to your project)

1.Create an HTML block and paste the following code

<div class="mountain-separator">
  <svg viewBox="0 0 1440 100" preserveAspectRatio="none">
    <path class="mountain-layer back" d="M0 60 L240 30 L480 65 L720 20 L960 60 L1200 35 L1440 50 L1680 30 L1920 65 L2160 20 L2400 60 L2640 35 L2880 50 V100 H0 Z"></path>
    <path class="mountain-layer mid" d="M0 75 L300 45 L600 80 L900 35 L1200 75 L1440 55 L1740 45 L2040 80 L2340 35 L2640 75 L2880 55 V100 H0 Z"></path>
    <path class="mountain-layer front" d="M0 90 L360 60 L720 95 L1080 50 L1440 85 L1800 60 L2160 95 L2520 50 L2880 85 V100 H0 Z"></path>
  </svg>
</div>

2.On the Property Panel, name your block mountain-separator

3.Press Edit CSS and paste the following code

.mountain-separator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85px; /* Low height, as you requested */
  line-height: 0;
  overflow: hidden; /* Clip excess at the edges for seamless looping */
}

.mountain-separator svg {
  display: block;
  width: 200%; /* Stretch the SVG width to create a seamless loop */
  height: 100%;
}

/* Colors and animations for layers with parallax effect */
.mountain-layer.back {
  fill: #214034;
  animation: slideLeft 35s linear infinite;
}

.mountain-layer.mid {
  fill: #355c4d;
  animation: slideLeft 22s linear infinite;
}

.mountain-layer.front {
  fill: #4a7c59;
  animation: slideLeft 12s linear infinite;
}

/* Infinite leftward movement */
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

4. Go to the Quick Preview, and objects that will be animated

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp