Wolfsilon

Hello there, To add an animated arrow down element, we'll need to use a Code Block and Custom CSS. 1) Create a Code Block and place the block directly underneath the "Get A Quote" button. 2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: <div class="arrow"> <span></span> </div> 3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS. 4) To animate and place the element onto your website you can paste the following into the Custom CSS box: .arrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .arrow span{ display: block; width: 30px; height: 30px; border-bottom: 3px solid #000; border-right: 3px solid #000; transform: rotate(45deg); margin: -10px; animation: animate 1.8s ease infinite; } @keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } } 5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties. You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right. You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. Let me know if you need any additional help. Hope this provided a solution for you! Cheers, Dan

Hello, I'd be more than happy to help you and take a look, but your website has a password. Could you please disable the page or share a new one with the footer overlay and include the password to the disabled page. - Dan

Hello there, Without knowing the code you're using to create the border styles shown in the screenshot, it is a bit tricky to identify where the issue is. However, it could be that you are not targeting the correct elements or your CSS isn't specific enough. For example: #block-yui_3_17_2_1_1620362436514_9368 { outline: 5px solid; border: 5px solid; outline-offset: 5px; } Creates an offset outline and border effect similar to the image you've attached without the flourish. If you could please share the CSS you're using to create the effect we could determine the changes you may need to make. Hope this helps! -Dan

.social-icons-size-small.social-icons-style-regular.social-icon-alignment-center .sqs-svg-icon--wrapper, .social-icons-size-extra-large.social-icon-alignment-center .sqs-svg-icon--wrapper { margin: 0 5em !important; } Adjust the "5em" accordingly. Hope this helps!

Hello! Could you please share a the URL to your website? Their are several methods that social icons are inserted into the footer and I cannot provide a working code without knowing how your icons are inserted. Thanks, Dan

Hello, Changing the color from a solid to gradient is easier than you might think and you've already done the hard part in the code you shared above! You'll want to find a gradient style and color scheme that fits your needs but your code would look something like this: #block-e594bfd6c486b80b7d2b .sqs-block-button-element { background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); } You can find preset web gradients here or create your own here. Hope this helps.

Some templates on Squarespace version 7.0 offer an option in the settings menu to disable the mobile view entirely. If you do not have that option, then it becomes a bit tricky. It will then require some time consuming Custom CSS to prevent resizing of the blocks and sections on mobile devices.

Hello! To achieve this type of carousel with swipe controls and multiple slides-per-view, your best bet is to use "Swiper.JS". It is a javascript library that is highly customizable and packed with features. https://swiperjs.com/ Hope this helps.

Hello, What happens if you copy and paste the current sentence multiple times? Enough times to fill the width of the announcement bar?

Hello, From looking at your page, it looks like all of the images are inserted using the inline image block. Here is a simple hover animation for your images that can be applied in the Custom CSS tab. .design-layout-inline img { transition: all .5s; } .design-layout-inline img:hover { transform: scale(1.05); filter: grayscale(100%); border: 5px solid hotpink; } This is a simple and effective animation. Transition timing and easing functions can be anything you'd like. You can look up different easing timing functions using cubic-bezier(dot)com. Copy and paste the timing function just after the ".5s" but before the ";". Although it is not required to add Cubic Easing and just use the default settings. I used a transform "scale" animation that acts like a magnifier when the image is hovered but there are plenty of other transform properties that you can use -- try them out by swapping out "scale(1.05)" with other values or properties. The filter and border options are some of the other pieces of the hover animation that can be used to help the item stand out a bit more. You can also look up all of the different filters you can use as well. Hope this helps!

Hello there! I tried testing the code on my own site, which is a 7.0 website. The CSS selectors vary only slightly (".header-branding-logo...") but I was still able to replicate the problem. Try these different possible solutions. 1) Use the full url for the background image SVG. 2) Upload a transparent .png file for the logo and use your code to overlay the .svg. For me, the code you shared effectively removes the logo "block/container" entirely. If you were to add the visibility option back, you might see your SVG. 3) Try adding the full code with selectors instead of "...no-repeat left center". .header-title-logo a { background-image: url(https://example/svg/file/blah/blah.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; } You mentioned you've used this code before and that it works. Sometimes Squarespace is picky about which selectors you can use for different sections, pages, or elements. If none of these work, could you please share a url and visitor password so I can take a closer look. Thank you Jen! Hope these help.

If you're looking for fast and simple "scroll reveal" and block animations. You can use ScrollReveal.

Scrollify is clean and simple to setup on your website. Setting -> Advanced -> Code Injection. Be sure to include tags for JQuery. Add it to the Footer. Sometimes the Head injection won't work.