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

Make an Instagram Link in Bio Page in Squarespace [2021] [Video]

Make a clear and consise page in Squarespace to link from your Instagram in a few quick and easy steps. I share a few tips and tricks in order to keep your traffic engaged and keep your message simple. Like what you see? Join our COMMUNITY for $9.99 a month and get access to even more trainings on Squarespace 101, Marketing, SEO, and more tips and tricks to make your editing experience easier. bloomcreativecompany.com/communityThanks for being here!Elizabeth bloomcreativecompany.com

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

Categories
Squarespace

Add internal navigation on a page in Squarespace (Table of contents, anchor links) [Video]

Create Anchor Links with Squarespace. This will work in both 7.0 & 7.1!This lets you create a link within the SAME PAGE. Works great for a table of contents or for mini navigation within a page.Let me know if you have any questions!

Categories
Squarespace

Squarespace Content Blocks – Build Your Site Part 2 [Video]

With Squarespace, you no longer need to hire a web designer to have a great-looking website! We offer tutorials with ZERO CODE, and no experience necessary site creation.This tutorial picks up where Part One left off: Videos Mentioned: Stock images: youtu.be/Bhni94731icLead Magnet: youtu.be/_P_LNlzSvSENew Content Blocks Series Part One: https://youtu.be/cXIEuQRUnbIContent Blocks 101 Old Series: youtu.be/XztLaCuWuuAPart One: youtu.be/1YyvTViW9IAPart Two: youtu.be/yOiXoDGX6lMPart Three: youtu.be/XztLaCuWuuAPage Layouts & Getting Started: youtu.be/3jRWVBPRwmkSUBSCRIBE FOR NEW VIDEOS: https://www.youtube.com/c/BloomCreativeCompanySquarespaceDesign?sub_confirmation=1Connect with us:bloomcreativecompany.comFREE DOWNLOAD: How to turn your website into a client generator: bloomcreativecompany.com/how-to-turn-your-website-into-a-client-generator-squarespace-website-designJoin our COMMUNITYbloomcreativecompany.com/communityThanks for being here!Elizabeth

Categories
Squarespace

How To Customize Squarespace Contact Form Fields // Free 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 👉 https://insidethesquare.co/learn—In this tutorial you’ll learn what custom codes you can use to customize the look of contact forms on your Squarespace website. There are a LOT of form fields available in Squarespace so this tutorial will cover the input fields, background colors, and the oh so cool active and focus states. A few pro tips before you dig in:✨ There is more than one way to do this! This is just one approach of many because code is super customizable. 🔗 Here is a link to the tutorial on how to install this code on a single page in your Squarespace site: https://www.youtube.com/watch?v=kX6kRjCbzu8🙋 If you need any help along the way, head on over to https://insidethesquare.co/code-help to see my current support options. You can use these same codes to customize a form that has lightbox mode enabled! Add the text .sqs-modal-lightbox to the start of any code below to isolate that specific type of form.Here are the codes from this tutorial://–Background and Border.form-wrapper .field-list .field .field-element//–Input Text Font Styles.form-wrapper .field-list .field .field-element//– Active/Focus Background & Outline.form-wrapper .field-list .field .field-element:active, .form-wrapper .field-list .field .field-element:focus//–Special code name for lightbox mode!.sqs-modal-lightbox—🤩 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 30 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 content is not affiliated with Squarespace, Inc. I just really love their platform ♥—#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

Categories
Squarespace

How To Create An Accordion in Squarespace // Click to Reveal Text for Squarespace [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, we’ll create click-to-reveal text in your Squarespace website. Great for FAQ sections, this expanding section / accordion magic is made up of HTML and CSS so it will work on any subscription level; no Javascript required! The codes in this tutorial are listed below – one set on this description and the other in the first comment – but make sure you watch the entire video so you will know exactly what to change on your own site. You can also grab the codes + the step-by-step instructions at https://insidethsquare.co/squarespace-tutorials/click-to-reveal Oh! And if you need any help along the way, head on over to https://insidethesquare.co/code-help to see my current support options. Here is the CSS part of the code that creates the click to expand action and any custom styles you want to try. The actual content on your site needs a different code that can be found in the first comment below. #click-reveal div { position: relative;} #click-reveal input[type=”checkbox”] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;} #click-reveal h2 { font-size: 30px; font-weight: 400; margin: 20px 0 0;} #click-reveal label { position: relative; display: block; padding-left: 30px; } #click-reveal label::before { content: “”; position: absolute; width: 0; height: 0; top: 50%; left: 10px; border-left: 8px solid black; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-top: -8px;}#click-reveal input[type=”checkbox”]:checked ~ h2 label::before { border-left: 8px solid transparent; border-top: 8px solid black; border-right: 8px solid transparent; margin-left: -4px; margin-top: -4px;} #click-reveal p { max-height: 0; overflow: hidden; padding-left: 30px; transition: max-height 0.4s ease;} #click-reveal input[type=”checkbox”]:checked ~ h2 ~ p { max-height: 80px;} —🤩 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 30 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 content is not affiliated with Squarespace, Inc. I just really love their platform ♥—#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

Categories
Squarespace

How To Customize the Newsletter Disclaimer Text Style in Squarespace // Free Squarespace Codes [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, we’ll customize the newsletter disclaimer text on your Squarespace site with a little custom code. If you do want to change the font style or customize those hyperlinks, or change up the look of the Google ReCaptcha text, the codes covered in this tutorial will help you do just that. If you need any help along the way, head on over to https://insidethesquare.co/code-help to see my current support options. Here are the codes from this tutorial://– Change the color of the text.newsletter-block .newsletter-form-footnote:last-of-type {color:red}//– Make the text all capital letters and change the font size too.newsletter-block .newsletter-form-footnote:last-of-type {text-transform:uppercase; font-size: .8rem}//–Remove the underline from the active links and add a background color.newsletter-block .newsletter-form-footnote:last-of-type a{text-decoration:none; background-color:yellow}—🤩 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 30 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 content is not affiliated with Squarespace, Inc. I just really love their platform ♥—#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

Categories
Squarespace

Announcement Bar Squarespace | How To Build & Design [Video]

Have you ever wanted to annouce something to all of your website traffic? Using the inbuilt Squarespace Announcement Bar is the best way to do so. In this video, I demonstrate and explain how to enable the announcement bar + modify it, to suit your website. An announcement bar is a super powerful marketing tool, that is very underated. It is best used in extremely targeted campaigns. For example, you’re promoting a special coupon code, or a flash sale.0:00 Demonstrating Squarespace Announcement BarSquarespace has an inbuilt announcement bar option, which is extremely handy. This means it will be optimised across mobile & desktop devices, which I demonstrate. 0:35 Enabling Announcement BarNavigate to the marketing section of the Squarespace editor, this is where we can enable the announcement bar. Simply enable the bar, and we’re good to go & start editing it. 0:57 Changing Text in Announcement BarWhilst in this section, we can quickly and easily adjust what the text says, plus adjust the direction of the link. 1:31 Designing Announcement BarNavigate to the site styles editor and select the announcement bar. In here, we can adjust the colour, font and other design features of the announcement bar.2:07 Desktop & Mobile Announcement Bar We quickly preview the announcement bar on mobile & desktop devices, to check it working properly.I hope you learnt a thing or two from this tutorial. Keep safe,Cheers,Luke Mead.

Categories
MondoPlayer

Free Call with Video Marketing Expert

Now is the time to be thinking about your business’s future. Take this opportunity to build a following, get people into your sales funnel and nurture the relationships so they’ll buy from you when they’re ready. If you’d like to see how an Automated Video Curation strategy can work for you, book a free call […]