Categories
Squarespace

Reorder Sections on Mobile | Squarespace 7.1 [Video]

Spend wayyyy too much time trying to customize your client’s Squarespace website? 🧐 Save time and your sanity by avoiding these three COSTLY mistakes that EVERYONE makes when finding code for Squarespace 👉https://www.rebeccagracedesigns.com/mistakes-to-avoid—————–In this video I show you how to change the order of the blocks on the mobile version of your Squarespace site. ➡️➡️For the code used in the video go to https://www.rebeccagracedesigns.com/blog/reorder-blocks-on-mobile-squarespace-7-1—————-Subscribe for more Squarespace Tips & Tricks 👉 http://bit.ly/youtuberebeccagrace Connect with Me: Blog: https://www.rebeccagracedesigns.com/blogFacebook: https://www.facebook.com/rebeccagracewebdesignInstagram: https://www.instagram.com/rebeccagracewebdesign#squarespace #squarespaceCSS #squarespacehelp #customcode #codesnippets

Categories
Squarespace

How To Add a Background Image to a Blog Post in Squarespace 7.1 // Squarespace CSS Tutorial [Video]

Squarespace blog posts don’t have to be so basic! This tutorial will teach you how to upload your own image for blog post backgrounds. You can upload one for every post or even use a specific image for a specific blog.- – -Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 [https://insidethesquare.co/learn](https://insidethesquare.co/learn)- – -This tutorial is specific for Squarespace version 7.1 – if you are using an older version of Squarespace, your blog post pages use different code names and this wont work. There are four basic steps you can take to easily add a background image to individual blog posts in Squarespace The codes used in the tutorial are listed below, and here is what you need to do to make it work on your own site: 1. Upload the image to your custom files2. Paste the code in the description below into your custom CSS3. Replace the text **image-url-here** with the URL for the image you just uploaded4. Save your work!This is the code that will make the image the background of a blog post:.blog-item-wrapper {background-image:url(image-url-here);background-size: cover}And this is the code that will create that slightly transparent background behind all the content so it’s easier to read. Totally option, but if you do use it, definitely play around with the RGBA color code to suit your own site’s style!.blog-item-inner-wrapper{background: rgba(255,255,255,.8);padding: 1rem;}- – -🤩  Want over 60+ pages of custom codes & pro tips specifically for customizing Squarespace? Download my CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css- – -🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️- – -🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.- – -The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥- – -#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Categories
Squarespace

6 Do’s and Don’ts of Coding in Squarespace [Video]

Spend wayyyy too much time trying to customize your client’s Squarespace website? 🧐 Save time and your sanity by avoiding these three COSTLY mistakes that EVERYONE makes when finding code for Squarespace 👉https://www.rebeccagracedesigns.com/mistakes-to-avoid—————–In this video I go over 6 do’s and don’ts of using CSS in Squarespace so that you can ensure your code is efficient and easier to edit.➡️➡️For the code used in the video go to https://www.rebeccagracedesigns.com/blog/6-dos-and-donts-of-coding-in-squarespace—————-Subscribe for more Squarespace Tips & Tricks 👉 http://bit.ly/youtuberebeccagrace Connect with Me: Blog: https://www.rebeccagracedesigns.com/blogFacebook: https://www.facebook.com/rebeccagracewebdesignInstagram: https://www.instagram.com/rebeccagracewebdesign#squarespace #squarespaceCSS #squarespacehelp #customcode #codesnippets

Categories
Squarespace

How to Change Read More Link Text in Squarespace // Squarespace Blog Tutorial [Video]

Read More isn’t always the best call to action for a Squarespace blog – so let’s change that text to anything you want it to be!—Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn—This tutorial is specific for blogs built in Squarespace version 7.1 – if you aren’t sure what version you are using, this article can help: https://insidethesquare.co/themesIn a Squarespace blog, you can turn on an option to have a “Read more” link under each post to encourage users to… read more! But let’s be honest, that’s a pretty boring call to action. In this tutorial I’ll teach you how to use some clever code to change that text to literally anything you want it to be.This first code will turn the read more text into the font size 0 so it won’t be visible: .blog-more-link {font-size:0rem!important}This code will remove the read more text underline that shows up in Squarespace automatically:.blog-more-link:after{display:none}And this final code is where you can change the text! Anything inside the quotes will be displayed on your Squarespace blog, replacing the words read more..blog-more-link:before{content:”check it out”; font-size: 1rem} Here is the exact code I used in this tutorial to create the get the recipe text and pink to red button style:.blog-more-link:after{display:none}.blog-more-link {font-size:0rem!important}.blog-more-link:before{content:”GET THE RECIPE →”; font-size: 1rem; border: 2px solid red; padding: .5rem; background-color:pink} .blog-more-link:hover::before {background-color:red; color:#FFF}Pro Tip: You can also change up the look of this new text, turning it into a clickable button! Check out this tutorial for more info: https://youtu.be/oa8q8Dogt_c—🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.—The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ —#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squarespacesite #squarespacedesign #learnsquarespace #squarespaceblog

Categories
Squarespace

How To Change the Background of an Accordion Block In Squarespace / Squarespace CSS Tutorial [Video]

This tutorial will show you how to customize the background of an accordion block using codes!—Just getting started with Squarespace? Awesome! 😍 I want to teach you the basics – check out my free training course here 👉 https://insidethesquare.co/training—Accordion blocks are a new type of content block available in Squarespace. Commonly used for FAQ sections, accordion blocks will show a title and when you click on it, additional text will be revealed underneath it. These accordion blocks have their own custom design menu with a lot of options… but none of them will change the background! In this tutorial we’ll give it a custom color, a gradient, and change up the border style a bit. Here are the codes from this tutorial. Be sure to change up the colors and numerical values to suit your own site style!.sqs-block-accordion .accordion-items-container {background: yellow; border-radius: 25px; border: 3px solid purple}Here is the gradient background code: .sqs-block-accordion .accordion-items-container {background: linear-gradient(to right, pink, #e5f5f6); border-radius: 25px; border: 3px solid purple}*/ Related Videos */Brand new Squarespace feature – accordion blocks! Learn all about this new type of content block in this video: https://youtu.be/hWcOQG5nlx4If you want to customize the divider line, creating a gradient or even using an image, check out this tutorial: https://youtu.be/ArAOhLH9KDU—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.—The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ —#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Categories
Squarespace

How to customize gallery captions in Squarespace 7.1 // Squarespace CSS Tutorial [Video]

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn—In this tutorial, you’ll learn how to customize the captions displayed for an image gallery in Squarespace 7.1What we are going to do is use custom code to give it a solid color background, create multiple lines of text, and then use a little more code to change the text styles and alignment. Before you watch the tutorial and use the code below, here are a few important things to know:This is specifically for version 7.1 and wont work for older sites built on version 7.You can isolate an individual gallery section using its block ID. This tutorial has more info on that: https://youtu.be/h8qfZdaATbUYou can apply this to a single page using page header code injection or an on page code block. Check out the tutorial on this page to learn how: https://insidethesquare.co/singlepageHere is the code from the tutorial. To install it site wide, navigate to Design and then select Custom CSS at the bottom. Paste this code inside the white box there on the right hand side. If you already have code there, just hit enter to add a new line and paste it there.This code will add a background color to the gallery caption:.gallery-caption {background:#fff}This code will create separate lines of text when you use a soft return (shift/enter):.gallery-caption p {white-space:pre}This code will center the text:.gallery-caption p {text-align:center}This code will change the font style of the first line of text in the description; I would recommend only using this code if you have multiple lines separated by the soft return (shift/enter) .Change up the color, font size, font weight, and any other typography code change you want to make!.gallery-caption p:first-line {color: blue; font-size: 1rem; font-weight:bold}You can combine all the codes above into three lines to create the look from the tutorial:.gallery-caption {background:#fff}.gallery-caption p {white-space:pre; text-align:center}.gallery-caption p:first-line {color: blue; font-size: 1rem; font-weight:bold}—🤩 Want over 60+ pages of custom codes & pro tips specifically for customizing Squarespace? Download my CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.—The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ —#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Categories
Squarespace

Adding a Site Border to Squarespace 7.1 (The BEST Way) [Video]

Adding a Site Border to Squarespace 7.1 (The BEST Way) – In this video I break down why the accepted solution out there is flawed, and the more complete way to add a border to your 7.1 site.Get the CSS Here:https://schwartz-edmisten.com/blog/adding-a-site-border-to-squarespace-7-1Save 10% off your first subscription of a Squarespace website or domain by using code PARTNER10. (This is an affiliate link, so if you end up setting your website live I will receive a small commission!)squarespace.syuh.net/sewebdesignSign up for my free Squarespace CSS for beginners eCourse:https://schwartz-edmisten.com/learn-css-4-day-ecourseLearn to create custom layouts in Squarespace!https://schwartz-edmisten.com/custom-layouts-with-flexboxMy goal is to help you create more custom Squarespace websites so that you can charge more for your services.If you need help designing, updating, or implementing custom code on your Squarespace website, you can hire me to do so through my contact page:https://schwartz-edmisten.com/contactIf my content has helped you out I would really appreciate a small donation to allow me to keep making tutorials:https://schwartz-edmisten.com/donateTimestamp:0:00 Analysis on why current method is wrong4:28 Re-writing it the correct wayMusic: https://soundcloud.com/justin-kolas

Categories
Squarespace

How to hide the background art pause button in Squarespace // Squarespace 7.1 Tutorial [Video]

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 http://bit.ly/guide-to-css—New to Squarespace 7.1, the background art feature generates interesting background designs for page sections. To learn more about all your options, be sure to check out the free training at https://insidethesquare.co/backgroundartIf you have background art enabled for a page section on your site, you might have noticed the pause/play button on the bottom right hand side of the page section. This button is pretty simple and totally customizable thanks to CSS!This tutorial will show you how to hide it completely, change the shape, or change the color… or both if you want to combine them!—Here are the codes from this tutorial:Want to hide the button? Try this:.background-pause-button.visible {display: none!important}Make it a square? This code will work!.background-pause-button.visible {border-radius: 0px!important}How about changing the color? Change the word purple in the code below to a web-safe color name, HEX color code, or an RGBA/HSL color you want to see:.background-pause-button.visible {background-color: purple!important}—🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 50 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.—The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ —#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Categories
Squarespace

How to Customize Category Links in Squarespace // Squarespace Code Tutorial [Video]

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 http://bit.ly/guide-to-css—In a Squarespace blog post, you can have links to blog categories shown on the individual post page. Those category links are designed to match the look of your paragraph text, but you can use CSS to make them look like clickable buttons, complete with hover effects! This tutorial will show you an example style; codes below. Please note – If you are using an older version of Squarespace, you’ll need different codes! Check the bottom of this description for the selectors used in Brine as well as Bedford.—Here are the codes from this tutorial:This will give a background color, border, and padding to a category link. Change anything in bold so that it matches the style of your site!.blog-meta-item–categories a {background: yellow; border: 1px solid #000;padding: 0 .5rem;border-radius: 1rem;} This code will add the hover effect. Any color, typography, or font settings can be used here to make that link stand out on a hover..blog-meta-item–categories a:hover {background: #000!important;color: #FFF!important;} Using a Brine Squarespace theme? Replace “.blog-meta-item–categories a” with “.BlogItem-pagination-link-meta-item–categories”Using a Bedford Squarespace theme? Replace “.blog-meta-item–categories a” with “.entry-category”—🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 50 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.—The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ —#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Categories
Squarespace

How to customize cookie alert colors in Squarespace // Squarespace Cookie Alert Tutorial [Video]

In this tutorial, you’ll learn how to customize the colors of your cookie alert using CSS in Squarespace. A few things to note before we get started:⚠️ This was recorded in my Squarespace 7.1 demo site but the codes are the exact same for any version and theme.✨ There is more than one way to do this! This is just one approach of many because code is super customizable. 📄 You can learn more about borders at (https://insidethesquare.co/border) and more about color options at (https://insidethesquare.co/colors)🙋 If you need any help along the way, head on over to insidethesquare.co/code-help to see my current support options. Ready to rock? Here are the steps to turn on the cookie alert:1 – Navigate to settings2 – Select Cookies & Visitor Data3 – Choose light or dark / bar or pop-up / opt-in or opt-in & out4 – Optional: select customize to change the text and accept/deny option style5 – Navigate back to your main menu6 – Select Design7 – Select CSS8 – Customize your alert using the codes below!SELECTORS FOR COOKIE ALERT OPTIONSCookie Alert.sqs-cookie-banner-v2Cookie Alert Disclaimer Text.sqs-cookie-banner-v2 pCookie Alert Accept Option.sqs-cookie-banner-v2-acceptCookie Alert Decline Option.sqs-cookie-banner-v2-denyPREMADE CODE IDEASDecline red / Accept green.sqs-cookie-banner-v2-accept {background:green!important}.sqs-cookie-banner-v2-deny {background:red!important}Decline red / Accept green on hover.sqs-cookie-banner-v2-accept:hover {background:green!important}.sqs-cookie-banner-v2-deny:hover {background:red!important}Rounded Buttons.sqs-cookie-banner-v2-accept, .sqs-cookie-banner-v2-deny {border-radius:20px}Box shadow for it all.sqs-cookie-banner-v2 {box-shadow: -15px 0px 15px }Inset Shadow.sqs-cookie-banner-v2 {box-shadow: inset 2px 2px 10px #ccc; background:#FFF!important;}.sqs-cookie-banner-v2 *{color:#000!important}Raised buttons on hover.sqs-cookie-banner-v2-accept, .sqs-cookie-banner-v2-deny {box-shadow: 2px 2px 10px #ccc; }.sqs-cookie-banner-v2 {box-shadow: inset 2px 2px 10px #ccc; background:#FFF!important;}.sqs-cookie-banner-v2 *{color:#000!important}.sqs-cookie-banner-v2-accept:hover, .sqs-cookie-banner-v2-deny:hover {box-shadow: 2px 2px 5px #ccc; }—🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 50 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.——The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ —#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Categories
Squarespace

Edit Your Squarespace Site for Mobile [Video]

Spend wayyyy too much time trying to customize your client’s Squarespace website? 🧐 Save time and your sanity by avoiding these three TIME SAPPING mistakes that EVERYONE makes when finding code for Squarespace 👉https://www.rebeccagracedesigns.com/mistakes-to-avoid—————–In this video, I show you how to use media queries in Squarespace so that you can customize your website for different screen sizes. ➡️➡️For the code used in the video go to https://www.rebeccagracedesigns.com/blog/edit-your-squarespace-site-for-mobile—————-Subscribe for more Squarespace Tips & Tricks 👉 http://bit.ly/youtuberebeccagrace Connect with Me: Blog: https://www.rebeccagracedesigns.com/blogFacebook: https://www.facebook.com/rebeccagracewebdesignInstagram: https://www.instagram.com/rebeccagracewebdesign#squarespace #squarespaceCSS #squarespacehelp #customcode #codesnippets

Categories
Squarespace

How to add custom effects on squarespace website with full source code [Video]

add hover effect on Button on Squarespace 7.0 and 7.1 by jishaansinghal. This code uses a CSS editor and works with Squarespace 7.1 and 7.0 templates.In this video, I’m showing you how to add a hover effect on the Button on the Squarespace website with custom Code!You can change the movement value which you wanted.This code uses CSS editor Copy and pastes the code below into the editor box.code link: https://jishaansinghal.blogspot.com/2021/09/add-button-hover-animation-button-go-to.htmlConnect/Contact with me hereFiverr : https://www.fiverr.com/jishaansinghalYoutube : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQFacebook : https://www.facebook.com/jishaan.singhalTwitter : twitter.com/jishaan_singhalInstagram : https://www.instagram.com/jishaansinghalLinkedin : https://www.linkedin.com/in/jishaan-singhal-1b77b2203Blogger : https://jishaansinghal.blogspot.comEmail : jishaanwm21@gmail.com squarespace bilsquarespace b&bsquarespace customer servicesquarespace costsquarespace customer service numbersquarespace careerssquarespace commercesquarespace c’est quoisquarespace domainsquarespace domain searchsquarespace discountsquarespace domain transfersquarespace duplicate pagesquarespace domain costsquarespace discount code 2021squarespace designerd&ad squarespacesquarespace emailsquarespace ecommercesquarespace email campaignsquarespace email pricingsquarespace email listsquarespace editorsquarespace email hostingsquarespace ecommerce pricingsquarespace e learningsquarespace ecommerce templatessquarespace ecommerce subscription basedsquarespace ecommerce categoriessquarespace ecommerce vs shopifye-signature squarespacesquarespace freesquarespace forumsquarespace fontssquarespace free trialsquarespace file size limitsquarespace faviconsquarespace faqsquarespace formssquarespace gift cardsquarespace gmailsquarespace google analyticssquarespace gallerysquarespace glassdoorsquarespace gallery pluginssquarespace godaddysquarespace gifsquarespace g suitesquarespace g suite pricingsquarespace g suite setupsquarespace g suite email not workingsquarespace g suite loginsquarespace g suite mx recordssquarespace g suite verificationsquarespace g suite transfersquarespace how tosquarespace hostingsquarespace help numbersquarespace hover image changesquarespace header image sizesquarespace how to change text colorsquarespace how to change templatesquarespace incsquarespace iposquarespace image sizessquarespace invoicesquarespace integrationssquarespace image gallerysquarespace id findersquarespace investor relationssquarespace i already have a domainsquarespace i am not a robotsquarespace ispoti hate squarespacei hate squarespace 7.1i hate squarespace adsi thought squarespace was freei love squarespacesquarespace jobssquarespace javascriptsquarespace jump to sectionsquarespace j colesquarespace job application formsquarespace justify textsquarespace job boardsquarespace javascript not workingsquarespace keywordssquarespace knowledge basesquarespace klaviyosquarespace klarnasquarespace keeps crashingsquarespace knickssquarespace keanu reevessquarespace keeps freezingsquarespace login pagesquarespace logo makersquarespace link to sectionsquarespace landing pagesquarespace live chatsquarespace lsquarespace member areasquarespace monthly costsquarespace markdownsquarespace market capsquarespace marketplacesquarespace mailchimpsquarespace mailing listsquarespace mobile view editm squarespace.comsquarespace newslettersquarespace navigation bar csssquarespace nonprofit pricingsquarespace newsletter blocksquarespace nameserverssquarespace numbersquarespace newssquarespace new yorksquarespace or wixsquarespace outagesquarespace or shopifysquarespace or wordpresssquarespace online storesquarespace officesquarespace ownersquarespace or godaddysquarespace o wordpresssquarespace o wixsquarespace o que ésquarespace o shopifymeglio wix o squarespacesquarespace pricingsquarespace planssquarespace promo code 2021squarespace pluginssquarespace portfoliosquarespace phone numbersquarespace promosquarespace psquarespace p/esquarespace qr codesquarespace qr code generatorsquarespace quickbookssquarespace quizsquarespace questionssquarespace quotesquarespace questionnairesquarespace quarterly reportsquarespace q&asquarespace revenuesquarespace reviewsquarespace redirectsquarespace reduce space between sectionssquarespace refundsquarespace remove underline from linkssquarespace referral codesquarespace real estate idxr/squarespacesquarespace schedulingsquarespace supportsquarespace student discountsquarespace sign insquarespace sslsquarespace seosquarespace stock pricesquarespace trialsquarespace tutorialsquarespace template idsquarespace transfer domainsquarespace templates for salesquarespace tables