Jump to content

[Share] Show a random quote in large text on Page Refresh

Featured Replies

Posted

#1. You can edit page where you want to add random quote text > Add a Code Block

546-1-min.thumb.jpg.1c325a2cad3609efbb671a8591d28ab2.jpg

#2. Paste this code into Code Block

<h2 id="random-text"></div>

546-2-min.jpg.322497c2fa9e8fd1626f3038bc4ac529.jpg

#3. Use this code to Code Injection > Footer

<script>
const quotes = [
  "Design is intelligence made visible",
  "Simplicity is the ultimate sophistication", 
  "Good design is good business",
  "Make it simple but significant",
  "Less is more"
];
window.addEventListener('load', function() {
  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  const textElem = document.getElementById('random-text');
  if (textElem) {
    textElem.textContent = randomQuote;
  }
});
</script>

546-3-min.jpg.c54ce68b4aeb8da1650e33f690e92d1b.jpg

#4. Use this code to Custom CSS

#random-text {
  font-size: 3rem;
  line-height: 1.4;
  text-align: center;
  padding: 2rem;
  font-weight: 300;
  color: #333;
  transition: opacity 0.3s ease;
}

546-4-min.jpg.bae46849cb018f4b577a58b8b4af5cda.jpg

#5. Result

546-5-min.jpg.e770f2f0e7df86849571a18de5796a5b.jpg

#6. To change text, you can adjust these lines.

546-6-min.jpg.6822eb5c5576a68786fddf33336b981e.jpg

To change text style, you can change these.

546-7-min.jpg.236096839581845eff915f0e8f173efc.jpg

Email Me if you have need any help (free). Answer within 24 hours. 
Or send a forum message

Buy me a coffee (thank you!)

  • Views 155
  • Created
  • Last Reply

Posted Images

Create an account or sign in to comment

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Welcome to the Circle Forum!

The Circle forum will be your homepage for all Circle updates.

Start by introducing yourself to the community!

Introduce yourself