How to add a scrolling text

Hey Jak73,
Try this in a code block element
<marquee>This text will scroll from right to left</marquee>
you will want to add some style for the font size and color, etc

Best regards,
Mike

Hi,
Please see this Marquee Generator as it will help you choose all of these settings including the speed of the scroll, then just place the code it gives you in a code block element.

Best regards,
Mike

Hi,
Try this example: Infinite Marquee in it’s css change the “body” class to .marquee > .track > .content and add your font and color there.
If you need a hand just include admin login in the Private Content area.

Best regards,
Mike

Hi,
The code you are seeing needs to be inside a style tag, so try this in your code block element

<style>
.marquee > .track > .content {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 25px; 
  font-family: 'press-start-2p';
}

.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 200px;
  overflow-x: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
</style>
<div class="marquee">
  <div class="track">
    <div class="content"> All of Joakims NFTs are one of a kind (1/1) artworks. Each artwork will be available either on Opensea or Rarible only!</div>
  </div>
</div>

Best regards,
Mike

Hi,
To make it full width try this in your Quick CSS:

#top.page-id-600 .avia_codeblock_section.avia_code_block_0 {
  width: 100vw !important; 
  position: relative !important; 
  left: calc(-50vw + 50%) !important; 
}

to add another going the other direction add this to a new code block element

<style>
.marquee-two > .track-two > .content-two {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 25px; 
  font-family: 'press-start-2p';
}

.marquee-two {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 200px;
  overflow-x: hidden;
}

.track-two {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-two 32s linear infinite;
}

@keyframes marquee-two {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
</style>
<div class="marquee-two">
  <div class="track-two">
    <div class="content-two"> All of Joakims NFTs are one of a kind (1/1) artworks. Each artwork will be available either on Opensea or Rarible only!</div>
  </div>
</div>

and if you want the second code block full width add this Quick CSS for it

#top.page-id-600 .avia_codeblock_section.avia_code_block_1 {
  width: 100vw !important; 
  position: relative !important; 
  left: calc(-50vw + 50%) !important; 
}

Best regards,
Mike