#1. First, add text to the Scrolling Block (you can add any text because we will use text to change this text then).

#2. Use this code to Page Header Code Injection (Page where you use Scrolling Block)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
.m-scroll {
display: flex;
position: relative;
width: 100%;
height: 90px;
margin: auto;
overflow: hidden;
z-index: 1;
}
.m-scroll__title {
display: flex;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
white-space: nowrap;
transition: all 0.7s ease;
}
.m-scroll__title > div {
display: flex;
animation: scrollText 40s infinite linear;
}
.m-scroll__title img {
margin: 0 20px 6px;
}
.m-scroll__title h1 {
margin: 0;
font-size: 1.7rem;
color: #000;
transition: all 1.4s ease;
display: flex;
}
/*div:hover {
animation-play-state: paused;
}*/
@keyframes scrollText {
from { transform: translateX(0%); }
to { transform: translateX(-50%); }
}
</style>
<script>
const words = ['WORK HARD PLAY HARD', 'WORK HARD PLAY HARD']
const imgUrl = 'https://i.ibb.co/TR6zRRj/Untitled-200-x-200-px.png';
$(document).ready(() => {
const textBlock = $('.sqs-block.marquee-block.sqs-block-marquee');
const htmlWords = `
<div class="m-scroll">
<div class="m-scroll__title">
<div>
<h1>
${words.map((w) => `${w}<img width="20px" src="${imgUrl}"/>`).join('')}
</h1>
<h1>
${words.map((w) => `${w}<img width="20px" src="${imgUrl}"/>`).join('')}
</h1>
</div>
</div>
</div>
`;
$(htmlWords).insertAfter(textBlock);
$(textBlock).remove();
})
</script>

#3. Result

#4. Note
Add text/image in this position. If you use 1 text only, you should repeat twice (same as the code in the screenshot).

if you use 3 different text, enter something like this

this is the Text color
