W I D G E T   T U T O R I A L S

How to Customize Rotating Text Widget in Google Sites Template 2.0

How to add your text


STEP 1: Open Your Website in Google Sites Editor https://sites.google.com/new

STEP 2: Locate the Rotating Text Widget in your website and double-click on the widget.

 This will open a pop-up window displaying the embedded code:

STEP 3: Find the Text:  Near the bottom of the code
locate the line that reads <!-- CHANGE DEFAULT TEXT  -->:

Example Code:<textPath xlink:href="#textPath">
<tspan x="10">YOUR TEXT HERE! <!-- CHANGE DEFAULT TEXT --></tspan>
</textPath>
STEP 4:  Replace the Text: Simply replace the text within brackets with your desired message. 
Example Code:<tspan x="10">SUBSCRIBE TO MY NEWSLETTER!<!-- CHANGE DEFAULT TEXT --></tspan>
STEP 5: 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 on a live website.
I hope these steps have helped you personalize your website, making it more engaging and visually appealing.
Happy customizing!
P.S: Stay tuned! We are constantly working on more cool features and exciting updates to enhance your Google Sites experience. Keep an eye on our store and your inbox for new releases and special offers.

Advanced Design Options with CSS 

How to make the Rotating Text Widget bigger or smaller?

The Rotating Text Widget automatically adapts to the size of its container frame. To adjust the size of the widget, you can change the dimensions of the frame it’s contained in. Example: If you want to make the Rotating Text Widget bigger, increase the size of the frame.
Example: To make the widget smaller, reduce the dimensions of the frame.

How to change the background color of the Rotating Text Widget?

To change the background color of the Rotating Text Widget, find the .circle class in your CSS code. You can use color names, hexadecimal codes, or RGB values.Example:
.circle { background: blue; /* CHANGE BACKGROUND COLOR */ }

How to modify the border of the Rotating Text Widget?

The border of the Rotating Text Widget can be changed by editing the border property within the .circle class in your CSS. You can adjust the border width, style, and color to your preference.

Example:
.circle { border: 2px dashed red; /* CHANGE BORDER */ }


How to change the size of the rotating text?

To change the font size of the rotating text, locate the .circle text class in your CSS. You can increase or decrease this value to resize the text as desired.

Example:
.circle text { font-size: 18px; /* CHANGE FONT SIZE */ }


How to change the color of the text in the Rotating Text Widget?

To change the text color, update the fill property within the .circle text class. You can replace it with any color you prefer, using color names, hexadecimal codes, or RGB values.

Example:
.circle text { fill: yellow; /* CHANGE FONT COLOR */ }


How to adjust the speed at which the text rotates?

The rotation speed of the text is controlled by the .circle text class. In the example rotate-btn 30s linear infinite, where 30s indicates the duration for a full rotation. To speed up the rotation, reduce this value. To slow it down, increase it.

Example:
.circle text { animation: rotate-btn 30s linear infinite; /* CHANGE ROTATION SPEED */ }


How to adjust the spacing between the letters in the rotating text?

The letter-spacing property in the .circle text class controls the spacing between letters. Increase or decrease this value to adjust the spacing as needed.

Example:
.circle text { letter-spacing: 2px; /* ADJUST LETTER SPACING */ }


How to change the direction of the text rotation?

In example, rotation is set to -360deg in the transform: rotate(-360deg); property. The negative value (-360deg) causes the text to rotate to the left (counter-clockwise). To make the text rotate to the right (clockwise), change the value to 360deg.

Notice: The minus sign in front of 360 determines the rotation direction. Removing the minus sign changes the rotation direction.

Example: Rotate left
@keyframes rotate-btn { to { transform: rotate(360deg); } } 

Example: Rotate right
@keyframes rotate-btn { to { transform: rotate(-360deg); } } 


How to move the widget to the left or right?

You can easily position the widget to the left, center, or right by modifying the justify-content property in the CSS. 

Center the Widget
justify-content: center; /* SET POSITION: LEFT, CENTER, RIGHT */

Align the Widget to the Left:
justify-content: left; /* SET POSITION: LEFT, CENTER, RIGHT */

Align the Widget to the Right:
justify-content: right; /* SET POSITION: LEFT, CENTER, RIGHT */


Troubleshooting (FAQs)

How do I locate the Rotating Text Widget in my Google Sites template?

To locate the Rotating Text Widget, open your site in the Google Sites Editor. Navigate through your site's sections until you see the widget displaying rotating text. This widget often appears as a circle with text rotating around its edge. 

I found the Rotating Text Widget, but how do I access the embedded code to change the text?

Double-click on the Rotating Text Widget within the Google Sites Editor. This action will open a pop-up window that displays the embedded code associated with the widget. 

What does the comment <!-- CHANGE DEFAULT TEXT --> mean, and why is it important?

The comment <!-- CHANGE DEFAULT TEXT --> is a marker within the code that indicates where you can replace the default text with your own message. This helps you quickly find and update the text without altering other parts of the code that might affect the widget's functionality.

Can I use any text in the <tspan> element, or are there restrictions?

You can replace the default text within the <tspan> element with any message you like. However, keep the text concise to ensure it fits well within the rotating path and maintains readability. Avoid using special characters that might not render correctly or interfere with the HTML syntax.

After updating the text, the widget doesn't seem to rotate properly. What could be wrong?

If the widget doesn't rotate after you change the text, check the following:
  • Code Integrity: Ensure you haven't accidentally removed or altered any code outside the <tspan> element.
  • Font Size and Length: Long text or large font sizes might cause layout issues. Try reducing the text length or font size to see if that resolves the problem.

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" page in your purchased template 2.0 package. Find the code for the Rotating Text Widget and copy it into your site editor to replace the damaged or missing code.

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 is straightforward.
  1. Go to Your Resources Page: Navigate to the Resources page where the Marquee Text Widget is located.
  2. 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.
  3. Copy the Section: Use the copy function to save the section to your clipboard.
    • Windows: Press Ctrl + C
    • Mac: Press Command + C
  4. Navigate to the Destination Page: Go to the page where you want to add the widget, such as your Home page.
  5. Paste the Widget: Use the paste function to insert the widget into the new page.
    • Windows: Press Ctrl + V
    • Mac: Press Command + V

Why can't I see the Rotating Text Widget in my Resources page?

If you’re not seeing the Rotating Text Widget on your Resources page, it might be because you’re using the free version of the template. The Rotating Text feature is available only in our Templates 2.0 version. To access this feature, ensure that you have purchased and are using the 2.0 version of the template.If you have the free version, you’ll need to purchase our Templates 2.0 to get the code and licence for advanced features like the Rotating Text Widget.

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 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.