Create a Marquee without Knowing Code by Using this Generator Tool

21 Apr 2019

 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:

https://www.html.am/html-generators/marquee-generator.cfm

 

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.

 

 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.

 

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!

 

 

 

Please reload

Additional Posts With Helpful Tips for You

9+Things You Need to Know and Do to Avoid an ADA Compliance Lawsuit

How to Know if You Can Build a Good Website on Your Own

Why You'd Want  to Add Special Reports and a Blog to your Website Design

Changes to De*WriteSites Webmastering Policy and Rates for 2019

1/4
Please reload

Please reload

Search By Tags
  • facebook.png
  • pinterest.png
  • linkedin.png
  • google.png

To avoid playing phone tag,
initial contact by email is preferred

Note: emails without date, timezone and hour for chat won't get a response