W I D G E T ย T U T O R I A L S
How to Change the Text in the Floating Marquee Bar on Google Sites
The Floating Marquee Bar is a dynamic, attention-grabbing widget exclusive to our Google Sites Templates 2.0. To use and personalize this feature, you'll need to open and edit one of your purchased template.In this tutorial, weโll walk you through the simple steps to customize the widget to suit your design and content needs.
Table of Contents
How to add your text in Floating Bar
1. Open a template
Open Google Sites Editor and click on a Google Sites Template 2.0 you purchased from us. https://sites.google.com/newIf you havenโt purchased Templates 2.0 yet, click here to check them out.
2. Open the Floating Bar
In your Google Sites Editor, locate the Floating Marquee Bar widget. Double-click on the widget to open the pop-up window that contains the embedded code.Within the code, scroll near the bottom and find the line that says:text.textContent = ' โน YOUR TEXT HERE ';ย // Default text
3. Replace the Textย
Simply replace the text within the quotation marks with your desired message.Example:HTMLtext.textContent = ' โน New summer collection! '; // Default text
4. Save and Publish
Once you've replaced the text with your message, click "Next" and "Save". This updates the code within your Google Sites template.ยFinally, publish your website to make the changes visible to your visitors.
Design Options / CSS Editing
Want to do more than change the text?ย Widget supports further customization, allowing you to modify the speed and appearance.
How to resize text
To resize text, simply resize the embedded frame. Floating Marquee Bar is fully responsive, so you can create unique design for your website.How to change font color of the Marquee Text
To change the color of the text, modify the color property in the .marquee-text class. Use a hex color code, or type color name to specify your preferred color.Example:.marquee-text { color: #493b31; /* CHANGE FONT COLOR */ }Example:
.marquee-text { color: RED; /* CHANGE FONT COLOR */ }
How to control the speed
The speed is determined by the animation property in the .marquee-text class. The duration is set in seconds (280s). Adjust this value to speed up or slow down the animation. For instance:Example:.marquee-text { animation: float 280s linear infinite; /* CONTROL THE SPEED */ }Example: To make the text move faster, reduce the duration:
.marquee-text { animation: float 140s linear infinite; /* CONTROL THE SPEED */ }
How to change direction left-right
The direction is controlled by the @keyframes float section in the CSS. There are two main setups:- For LEFT TO RIGHT movement
@keyframes float {
ย ย ย ย ย ย 0% {
ย ย ย ย ย ย ย ย transform: translateX(0);ย
ย ย ย ย ย ย }
ย ย ย ย ย ย 100% {
ย ย ย ย ย ย ย ย transform: translateX(-550%); /* CHANGE FLOAT DIRECTION */
ย ย ย ย ย ย }
ย ย ย ย }
- For RIGHT TO LEFTmovement
@keyframes float {
ย ย ย ย ย ย 0% {
ย ย ย ย ย ย ย ย transform: translateX(-550%);ย
ย ย ย ย ย ย }
ย ย ย ย ย ย 100% {
ย ย ย ย ย ย ย ย transform: translateX(0); /* CHANGE FLOAT DIRECTION */
ย ย ย ย ย ย }
ย ย ย ย }
That's all you need to change! Just swap these values (-550%) (0) to change direction. Everything else in the code can stay the same.
Troubleshooting (FAQs)
How do I locate the MarqueeText Widget in my Google Sites template?
To locate the MarqueeText Widget, open your site in the Google Sites Editor. Navigate through your site's sections until you see the widget displaying Marquee Text.ยI found the MarqueeText Widget, but how do I access embedded code to change the text?
Double-click on the Marquee Text Widget. This action will open a pop-up window that displays the embedded code associated with the widget.After updating the text, the widget doesn't seem to work properly. What could be wrong?
If the widget doesn't work after you change the text, check the following:- Code integrity: Ensure you haven't accidentally removed or altered any code.
- Strange symbols in text
How do I preview my changes before publishing them on my live website?
In Google Sites, you can preview your changes by clicking the "Preview" button (represented by an laptop/mobile icon) in the top-right corner of the editor. This allows you to see how the widget and the text look with your changes before you publish them.What should I do if I accidentally delete part of the widget's code?
If you accidentally delete or alter part of the widget's code and it stops working, you can try the following steps:- Undo Changes: Use the undo feature in the Google Sites Editor. This option allows you to revert to a previous version of your work before the deletion or alteration occurred. You can find the undo button in the top menu bar, represented by an arrow pointing left, or as a shortcut Ctrl + Z (Windows) or Cmd + Z (Mac).
- Get Another Widget: If the undo feature doesnโt resolve the issue or you need to start fresh, go to the "RESOURCES > WIDGETS" folder in your purchased template 2.0 package. There is a copy of the Floating Marquee Bar.
How do I transfer the Marquee Text Widget from the Resources page to another page?
Transferring the Marquee Text Widget from your Resources page to another page on your website is straightforward. Hereโs how you can do it step-by-step:- Go to Your Resources Page: Navigate to the Resources>Widget page where the Marquee Text Widget is located.
- Select the Widget Section: Click on the section containing the widget until you see a blue border around it. This indicates that the section is selected and ready for copying.
- Copy the Section: Use the copy function to save the section to your clipboard.
- Windows: Press Ctrl + C
- Mac: Press Command + C
- Go to the page where you want to add the widget, such as your Home page.
- Use the paste function to insert the widget into the new page.
- Windows: Press Ctrl + V
- Mac: Press Command + V
See this tutorial: How to transfer Google Sites sections from one page to another?
Why isn't my new text showing up after I've updated and published the changes?
If your new text isn't showing up:- Check for Errors: Ensure there are no syntax errors in your HTML.
- Publishing: Confirm that you have published the latest version of your site after making changes.
- Embedding Issues: Double-check that the embedded code is correctly placed.
The Benefits of Using a Marquee on Your Website
A marquee is a dynamic element that scrolls text horizontally across a webpage.ย
Overall, incorporating a well-designed marquee into your website can be an effective way to grab visitors' attention, deliver important messages, and enhance the overall user experience.
- Attention-Grabbing: Marquees immediately capture visitors' attention with their movement, making them ideal for highlighting important announcements, promotions, or featured content.
- Visual Interest: The dynamic motion of a marquee adds visual interest to your website, breaking up static content and keeping visitors engaged as they explore your site.
- Information Delivery: Marquees can efficiently convey important information or messages, such as upcoming events, latest news updates, or product features, without taking up too much space on the page.
- Promotion and Branding: Use marquee elements to promote special offers, discounts, or new products/services, to increase conversions and reinforce your brand identity.
- Customization Options: Marquees offer flexibility in terms of customization, allowing you to adjust the text, font style, color, and speed of movement, to align with your website's design and branding.
- Enhanced User Experience: When used sparingly and strategically, marquees can enhance the overall user experience by providing visual cues and guiding visitors' attention to key areas of your website.
- Compatibility: Marquee elements are supported across most web browsers and devices, ensuring consistent display and functionality for all users, regardless of their platform or screen size.
- Versatility: Marquees can be utilized in various sections of your website, including the homepage, header, footer, sidebar, or within specific content sections, offering versatility in how you choose to showcase information.
Overall, incorporating a well-designed marquee into your website can be an effective way to grab visitors' attention, deliver important messages, and enhance the overall user experience.
