justinjamesclack

Maybe it's in a code block on the page or each page. Otherwise you can target font colour using css in the custom css panel.

Hey @Emm Add the image block, and then the text block below the image, then add the following code to the image block, which should then add transparency to the image and show the text beneath. @media only screen and (min-width: 640px) { #block-12345 { opacity: 0 !important; transition: opacity 1s !important; } #block-12345:hover { opacity: 1 !important; transition: opacity 1s !important; } }

Has this worked?

Try adding !important in the padding line of code

Try this code, but mess around with the padding line of code. And just so you are away the padding figures go from top > right > bottom > left. Top (1vw) - Right (4vw) - Bottom (1vw) - Left (1vw) .gallery-grid[data-width="inset"] { max-width: 1920px; padding: 1vw 4vw 1vw 4vw; margin-left: auto; margin-right: auto; }

What is the url for your website? You can just change the gap between sections by editing the sections and customising the height of the section. You can completely remove the margin, by turning off the fill screen (see image below) and then adjusting all the content of each section to suit.

What are the aspect ratios?

The only things I can think of then is, try removing your css in the custom css panel, save it in a wordpad or something and then click save on the custom css panel. Reload the page and see if you can add a block to the footer then. If you still can't add a block, then you may as well add your css back in the custom css panel. And then the only option is to add a new section above the footer and recreate the footer in a normal section. The only issue with this option, is that you'd have to save the section and add them on each page (this option is worst case scenario and sucks).

So you can't add any block at all?

Try adding the custom button using the code above. Put the code in a code block and change the colours, text and url to whatever you choose. If you want a native button, and we can't figure it out, you may need someone to come in as a contributor to the site and check things over and potentially add the button.

That's very strange! Can you add me as a contributor so I can have a look. This is very abnormal

Okay, so if the button isn't working it might be that the colours are the same as the background colour, or the button might be hidden

And also you can change the colours too

Otherwise you can create a button using html and css. For example this is the button I use and have created using html and css; <style> .container-button { display: grid; place-items: center; } .animated-button { position: relative; display: flex; align-items: center; gap: 4px; padding: 10px 36px; border: 4px solid; border-color: transparent; font-size: 18px; background-color: transparent; border-radius: 10px; font-weight: 500; color: #151515; box-shadow: 0 0 0 1px #151515; cursor: pointer; overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button svg { position: absolute; width: 24px; fill: #151515; z-index: 9; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button .arr-1 { right: 16px; } .animated-button .arr-2 { left: -25%; } .animated-button .text { position: relative; z-index: 1; transform: translateX(-12px); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button:hover { box-shadow: 0 0 0 12px transparent; color: #F1F3F6; border-radius: 10px; background-color: #151515; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button:hover .arr-1 { right: -25%; } .animated-button:hover .arr-2 { left: 16px; } .animated-button:hover .text { transform: translateX(12px); transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button:hover svg { fill: #F1F3F6; } .animated-button:active { scale: 0.95; box-shadow: 0 0 0 4px #EE7F01; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } </style> <a href="https://calendly.com/justinjamescreative/discovery-call" target="_blank"> <container class="container-button"> <button class="animated-button"> <svg viewBox="-3 -3 26 26" class="arr-2" xmlns="http://www.w3.org/2000/svg"> <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" ></path> </svg> <span class="text">Free Quote</span> <svg viewBox="-3 -3 26 26" class="arr-1" xmlns="http://www.w3.org/2000/svg"> <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" ></path> </svg> </button> </container> </a> Obviously change the text in the span class and the url in the a href= line

If you edit the footer, you can add a button in the add block panel

What kind of button are you trying to add?

To save your illustrator artwork as SVG, choose File > Export > SVG (svg). Check Use Artboards if you'd like to export the contents of your artboards as individual SVG files. Then watch this video on how to import and how to use SVGator; once you're happy with the animation, export it as CSS and then take that CSS and add it to a code block in squarespace

If you can't find an alternative way to get a lottie animation to work, it may benefit you to learn how to animate things yourself. I personally use SVGator to animate svg's. SVGator also allows me to export the svg as CSS which means I can add those animations to my website without the need to use JS scripts.

So I watched @inside_the_square demo of Squarespace's Blueprint last night, and I have to say, I really thought, it was going to be different to what I saw. At first I thought, here we go, another web builder that takes a prompt and creates an entire website for you, how lazy can people get? But I was wrong. The main takeaways I got from watching Becca's demo, was that the whole setting up of a new site, is pretty much the same, until it gets to what your website/company is about. This is where the prompt writing comes in. Here you can write about your business, what you offer and where you are based, and it creates copy for you. Watch the demo for yourself to see the prompt Becca uses, and at the end Becca offers a lot of prompts in a free prompt pack, that you can find on her website. As someone who has tried all the AI Web Builders, and who has used Claude, ChatGPT and other AI chat services, to see what they can actually do, and what would need tweaking if I decided to use what was created, I can say, that AI has a long way to go before it can potentially replace web designers and copywriters. But for now, a lot of the designs and copy I have personally seen, needs a lot of tweaking to make whatever it is, the best it can be. I say this with utter surety, because I know what AI and those who develop AI doesn't know, we are creatives, who have had to learn how to do what we do, and we know how copy should sound, and what websites should look like. So in my opinion, AI is a good tool for making certain tasks faster, and it can even spark great idea for us creatives. I just wouldn't solely use whatever it is AI has created without tweaking it, and making it human, putting my stamp on it and making it the best I can make it, from my experience, and knowledge I have acquired over the years. Let me know your thoughts on the matter, I would love to hear if anyone has a different opinion, and would love to get a sense of what the community feels towards moving toward a more Artificial future.

Watch this tutorial to use the widget steps for lottie animations.

Hi @Nomis did the code I share with you work?

Not sure if this code still works, but I used this in 2023. This code if it works will put the image behind every section on the page and across the website. If you want it to be just on one page, head to page settings > advanced > header injection > and then in the header injection box, place the code below. .section-border{opacity:0!important} /* Add the image as a background*/ #page{ background-image:url(url-here); background-size: cover } /* Make the page section backgrounds transparent */ #page .page-section { background: transparent!important; } #page .page-section .section-background { background: transparent !important; } You will need to add the image to the custom files in the custom css panel, and then grab the url by clicking on the image, once it is uploaded. Then past the url where it says (url-here).

At first glance this code seems fine. I've even run it on my own website and it works. Try removing the code > saving > refresh page > add the code again > save > refresh page

What's the url to your website?

Do you mean to remove the nav links and logo? Or do you mean remove the logo and replace with the site title in yellow?