top of page

Create a Marquee without Knowing Code by Using this Generator Tool


code tools for the non-coder with a Wix website from DeWriteSites

Once in a while it is nice to adorn your website with a repetitively moving line of text when you want to call special attention to something, provide a temporary alert, or direct visitors to a particular place. That moving line of text is called a marquee. And you can learn how to create one for your own Wix website without knowing any coding -- although code will be used.

Here's an example of a scrolling marquee:

The first things you need are a few decisions:

  • what you want your marquee to say

  • the color of the text

  • the general style of text - serif, san serif, or something more fancy

  • font size

Next step is to go to this marquee generator tool:

Working within the green areas, select your settings. The top row of arrows indicate the direction from which you want your marquee to scroll. Then, I recommend a fairly slow scroll speed -- adjusted with the little toggle bar.

Click on the field for text colors and a color picker chart will appear. Or, if you know the color's hex numbers you can just type them in. If you need the marquee to really stand out you can select a color for its background strip, or you can clear any default numbers that appear, or type in transparent.

The Padding and Margins settings control how much space are around the top, bottom and sides of your scrolling text. The default seems to be 1.5 em, which I think is too much. I've set the marquee padding above to 0.5 em, and ignored the margin setting. But the larger you want your font size to be, the more padding you will need.

Now, paste or type in your text. This should be relatively short, especially if your scroll direction is right to left. Try 20 words or less to start, and adjust as needed.

Click on the field for fonts and a menu of available type styles will pop up. The choices here are limited, probably to ensure compatibility with all computer operating systems and browsers.

Click on the field for size system -- ems, pixels, centimeters, inches, etc -- and change that to pixels. There's no magic in that, but it will be what you are used to in the Wix editor, so you'll have an idea of how small 8 px is or how large 72 px is. Select for italic, bold, or small caps if you must or leave those settings alone. I'd leave alignment and line-height alone too.

Now what you have done is created a code that the Wix html function will recognize. You'll see it to the right of the green blocks of settings. Click once in The Code area and it should highlight itself for you to use the Ctrl+C keys to copy.

How to Get Your Marquee Code onto a Wix Page

The next step is to go to the page where you want your marquee to appear. Then go to the vertical stack of tool icons on the left of your editing screen, and click on the Add icon, and then the More link. At the top of the menu that opens there is an icon for HTML iframe. Click on that and an ugly gray box appears on your page. Don't worry, it should go away when the code is pasted in.

Wix html iframe tool

Make sure the cursor is blinking next to where it says HTTPS only in the add code field, then use the Ctrl+V keys to paste in your code.

Wix html settings  for small bits of user entered code

It's possible that you'll want to make some changes in the code once you see how it looks on your page. You can go back to the generator tool to do that, or you can carefully make the changes in the Wix HTML iframe settings. Be sure to keep any single quotation marks you see. For example where at right the font-family is shows as 'Comic Sans MS' you can replace that with something else on the generator font list, such as Arial. Just be sure it's between the single quotes -- e.g., 'Arial' .

Have fun!

Search By Tags
  • facebook.png
  • pinterest.png
  • linkedin.png
  • google.png
bottom of page