Одну секунду
Что-то сучилось. Попробуйте еще раз.
Change squarespace menu смотреть последние обновления за сегодня на .
How To Edit Navigation Bar On Squarespace 2023! (Full Guide) Today I show squarespace navigation bar,squarespace tutorial,squarespace navigation,customize squarespace,vertical navigation in squarespace,how to squarespace,squarespace web design,how to create second navigation on squarespace 7.1,squarespace navigation drop down
Just getting started with Squarespace? Awesome! 😍 I want to teach you the basics - check out my free course here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off your first yearly subscription fee (affiliate code): 🤍 - What you’ll need: An existing Squarespace 7.1 site (it doesn’t have to be published yet) How to change the text link on your main navigation: 1. Click pages on the top of your menu 2. Hover over the page you want to change until you see the gear icon 3. Click on that gear icon to open your page settings menu 4. On the general menu, scroll down to your second option navigation title 5. Enter the text you want to use for this page link on your main menu 6. Select save on the top left hand side of your page settings menu when you are done Important info: This is specific for individual pages, and the setup is slightly different for blog posts, products, and projects. You can reorder your main menu by manually dragging and dropping pages in the main navigation section of your pages menu. - If you are having any issues with your site, you can reach the official Squarespace support team by visiting 🤍 The term "Squarespace" is a trademark of Squarespace, Inc. This video was not created, published or endorsed by Squarespace, Inc. - #squarespace #howto #squarespacetricks #squarespacetutorial #howtousesquarespace #squarespacetraining #squarespacebasics
Just getting started with Squarespace? Awesome! 😍 I want to teach you the basics - check out my free course here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off your first yearly subscription fee (affiliate code): 🤍 - If all you want to do is change your main menu text, check out this tiny tutorial instead: 🤍 In Squarespace 7.1, you can chose different header layouts that will place the site title/logo, links, and header elements like the social icons and button in different places inside your header. You can also adjust mobile separately. To reach both of these options, hop into edit mode from any page on your site and hover over the header until you see the button that says [edit site header] Click on that to open your header menu. Click on the desktop monitor icon and select "header layout" to see your options there. To change up the mobile layout, click on the mobile phone icon and select "header layout" to change the layout for the mobile version of your site. When you are all done select save and you will be good to go! - If you are having any issues with your site, you can reach the official Squarespace support team by visiting 🤍 The term "Squarespace" is a trademark of Squarespace, Inc. This video was not created, published or endorsed by Squarespace, Inc. - #squarespace #howto #squarespacetricks #squarespacetutorial #howtousesquarespace #squarespacetraining #squarespacebasics #learnsquarespace #squarespacetutorials #learnsquarespacetricks #newsquarespacesite #howtousesquarespace
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel 🤍 - This tutorial is for Squarespace 7.1 sites, not 7.0 sites like Brine or Bedford. If you have no idea what that means, read up on what version you are using in this article, because it makes a big difference in which codes will work for you! 🤍 - In this tutorial I am going to show you some creative codes you can use to change the look of your drop down folder menu in your Squarespace 7.1 website. The codes from this tutorial are below but a few important things to note: This is for 7.1 sites, not verison 7! If you are on a brine site, try this tutorial instead: There is more than one way to code a site, this is just my version :) CSS changes the look of a site but not the way it works. This code won’t “break” your site, and if you don’t like the look of it, just delete it and everything will go back to normal. This is a super customizable code. To learn more about color options, check out this article: If you are brand new to CSS, start with my free intro course at 🤍 ▸▸▸Here is the code to change the background color; be sure to change the background color #00FF00 to the color you want to show up behind your menu links: .header-nav-folder-content{background-color:#00FF00!important} ▸▸▸ Give the drop down a gradient background: .header-nav-folder-content{background:linear-gradient(to bottom, #fee7ef,#c4e9fa) } ▸▸▸ Round the edges of the dropdown: .header-nav-folder-content{border-radius:15px} ▸▸▸ Change the link alignment to the left: .header-nav-folder-content{text-align:left!important;} ▸▸▸ Change the link alignment to the right: .header-nav-folder-content{text-align:right!important;} ▸▸▸ Change the link alignment to the center: .header-nav-folder-content{text-align:center!important;} ▸▸▸ Give your menu a border: .header-nav-folder-content{border: 1px solid purple} ▸▸▸ Add a border between links: .header-nav-folder-content a {border-bottom:1px solid #333} ▸▸▸ Increase the space between links: .header-nav-folder-content a {padding-bottom:.5rem!important; } ▸▸▸ aaaaaand last but not least, give that fancy little drop down a shadow with this code: .header-nav-folder-content{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)} ▸▸▸ Ready for more copy+paste 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 at 🤍 - 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 #anchorlinks #squarespacetips
Looking for help to understand how to edit your Squarespace website? Start here 👇👇👇 _ This is a beginners SquareSpace Tutorial that will show you the steps to edit your Site Header, also called site navigation bar, for your Squarespace 7.1 website. This works for every 7.1 template (they're technically all the same 😉 ) Your header navigation bar is really important for your website! Visitors expect to find a navigation at the top of your website, and keeping a good position and clear sections will makes your site easier to use, which will eventually increase the page views per visit, and conversion! _ A little bit about me 🙋♀️ 👩💻 🙃 I'm Aurelie from Imagiweb Design+Marketing. I'm a Squarespace web designer, marketer, and also teach entrepreneurs how to make the best of their SquareSpace website. I can't thank you enough for watching my content 🙏🙏🙏 and I really hope it helps YOU! Interested in seeing more content? Visit my page 🤍imagiwebdesign.com/squarespace-tips-tricks _ Interested in this Squarespace Template designed by me? Learn more here: 🤍imagiwebdesign.com/shop _ The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc.
If you logged in lately and your website menu looked different than it has before, it’s not you; it’s Squarespace. 😵💫 Squarespace made some major changes to the way we navigate the program, so I recorded a video all about it! In this video, you’ll learn how your new navigation works and where you can find important things like your cookie alert bar and - drumroll please 🥁🥁🥁 - your custom CSS panel. 🤯 With this new change, you might be wondering, “But wait Becca, will you have to redo ALL of your tutorials?!” And honestly, I might, but I haven't made up my mind yet. 😬 I have better equipment than I did in the beginning, so some oldies will get a makeover for sure. But as far as updating all 483 of them…? Uh, we’ll see. 😅 Brand new to Squarespace? Start here → 🤍 - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ 🤍 - - - 📑 Get access to my collection of CSS codes for Squarespace at 🤍 - - - ⭐ NEW: List of my top 7 FREE Squarespace tutorials: 🤍 - - - 🙋 Need some help? Visit 🤍 to see my current support options. - - - 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → 🤍 - - - 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 ♥
In this Squarespace tutorial, you’ll learn how to create unique hover effects for the links in main menu of your website. There are four types of links you can have in your main navigation, and the codes for each one of them are listed below. Want to change the button in your main menu? Check out this tutorial; it's a little old but the codes will still work for the latest version of Squarespace: 🤍 - - - This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: 🤍 - - - Before you dig in, there are a few things you need to know: → This is specific to Squarespace version 7.1 and won’t work for older versions of Squarespace. → There is more than one way to do this! Code is super customizable, and this is my technique. → These are just a few ideas! You can apply a lot of different property and value combinations to these selectors. Here are the codes from this tutorial. Main Links: .header-nav a:hover Active Page Link: .header-nav-itemactive a:hover Folder Title: .header-nav-folder-title:hover Link Inside Folder Dropdown: .header-nav-folder-item a:hover Change the font color: color: red!important Make the text bold: font-weight: bold Change the background: background: yellow Related Videos: How to customize your dropdown menu: 🤍 How to change your header layout in Squarespace 7.1: 🤍 - - - 📑 Download my collection of CSS codes for Squarespace at 🤍 - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ 🤍 - - - 🙋 Need some help? Visit 🤍 to see my current support options. - - - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 💸 DISCOUNT → Save 10% on your first year of Squarespace with code INSIDE10 🤍 - - - 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 ♥
As you build your website with Squarespace, use folders to create drop-down navigation menus (also known as nested pages or sub-menus) on your site. Get started on your Squarespace website at: 🤍 For more Squarespace tutorials, visit: 🤍 ABOUT SQUARESPACE Squarespace empowers millions of dreamers, makers, and doers by providing them with the tools they need to bring their creative ideas to life. On Squarespace’s dynamic all-in-one platforms, customers can claim a domain, build a website, sell online, and market a brand. Our suite of products combines cutting-edge design and world-class engineering, making it easier than ever to establish and own your online presence. FOLLOW US ON SOCIAL IG: 🤍 TW: 🤍 FB: 🤍 LI: 🤍
You have a ton of options for customizing the look of your mobile menu built right into Squarespace. This video will show you how to access these settings and how to customize your menu so it suits your site style. - 📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign - In this tutorial, you’ll learn how to change the layout, colors, alignment, and icons in the mobile menu of your Squarespace website. You'll also learn about some custom code you can use to change the color of the social media icons and the size of the button. Change the font size 16px in the code below to update the button on your mobile menu: .headermenu-open .header-menu-cta a { font-size: 16px!important} Change the font family of the links in your mobile menu: .headermenu-open a {font-family: serif!important} Change the word "red" in the code below to what color you want those icons to be! .header-menu-actions .icon svg {fill: red} To learn more about the types of colors you can use in code, check out this article: 🤍 - Related Videos Custom mobile menu icon image: 🤍 Mobile menu background image: 🤍 - 🥳 Ready to build a site with Squarespace ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 to see my current support options. - 🤩 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 👉 🤍 - 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 ♥
In this video, I'll show you how to edit your navigation bar on Squarespace.
In this video, you’ll learn five easy ways to customize your mobile menu and give your Squarespace site a unique touch. First, I’ll show you how to change the mobile menu icon, giving you the ability to swap out the standard three-line icon for something more eye-catching. Then, you’ll learn how to adjust link space and alignment using the editor and custom CSS. After that, I’ll teach you how to use an image for the background of your mobile menu. And last but not least, you’ll learn how to change the size of the menu so it wont take up the whole screen. We are covering a LOT in this tutorial, so use the time stamps below if you want to jump ahead: 00:52 - Change the menu icon To use the built-in options, start in Edit mode, click on Edit Site Header, then the mobile icon, then select the icon you want and change the thickness. 01:48 - Use your own image to replace the menu icon Use this code below and repalce your-url-here with your image url. Click on Design → Custom CSS and paste the code here. Click on Manage Custom Files under the CSS panel and upload your image. Replace the text your-url-here with the image url. For a more detailed step-by-step, check out this video: 🤍 .burger { background-image: url('your-url-here'); background-size: contain; background-repeat: no-repeat; background-position: right; background-color: transparent !important; } .burger-inner { display: none; } 02:58 - Change link spacing To use the built-in options, start in Edit mode, click on Edit Site Header, then the mobile icon, then select overlay menu and pick your spacing and alignment options. 03:46 - Change alignment & spacing with code Click on Design → Custom CSS and paste the code here. Use flex-start to keep your links at the top, or flex-end to keep them at the bottom. You can also use space-around, space-between or space-evenly. .header-menu-nav-folder-content{ justify-content:flex-start!important } 04:59 - Add a custom background To add a custom background, you can use a background image. Click on Design → Custom CSS and paste the code here. Click on Manage Custom Files under the CSS panel and upload your image. Replace the text your-url-here with the image url. For a more detailed step-by-step, check out this video: 🤍 .header-menu .header-menu-bg{ background-image: url(your-url-here); background-size: cover; } 06:06 - Change menu size To change the size of your menu, add this code to your site and adjust the top, left, right, and bottom values. You can also add a border radius, box shadow, and make the page slightly transparent. .headermenu-open .header-menu { bottom:10vh!important; left:5vw; right:5vw; top:5vh } .headermenu-open .header{ top:5vh; left:5vw } /* this curves the corners and adds a shadow */ .headermenu-open .header-menu-bg{ border-radius:15px!important; box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.5) } /* this makes a page slightly transparent */ .headermenu-open #page {opacity:.3!important} - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ 🤍 ⭐ NEW: List of my top 7 FREE Squarespace tutorials: 🤍 📑 Download my collection of CSS codes for Squarespace at 🤍 🙋 Need some help? Visit 🤍 to see my current support options. - - - 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 PARTNER10 → 🤍 - - - 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 7.1, header menu In this short video I walk through how to edit the height of the menu section on your Squarespace 7.1 site. The settings are not readily available unless you know to click the desktop icon. Edit Page - Edit Header - Desktop icon in top right of window, will get you there. *Tutorials... argh, if you watched until the end I said "testimonials" when yes, I meant "tutorials" 😬 For the corresponding blog post and written steps ➡️ 🤍 As always, I'm available to help troubleshoot or implement the tech pieces of your business Send an email ➡️ hello🤍kcocreative.com Request a quote ➡️ 🤍 Book a free exploratory call ➡️ 🤍 All the FREEBIES ➡️ 🤍 For FREE online courses via Skillshare with a free 2-wk trial ➡️ 🤍
If you want to display your mobile menu on the desktop version of your Squarespace site, then you found the right tutorial! With a little bit of custom code, you’ll learn exactly how to display your mobile menu on every device, and how to add a little style to it too. - 📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign - In this tutorial we’ll make the mobile menu of your Squarespace site visible on desktop, and use a little code to customize it even further. For some websites, a full screen mobile menu might be too much, so in the second part of this video, we’ll create code that will show the menu on half of the screen, adding some unique style to it so it really stands out against the rest of your content. Here is the main code from the tutorial that will create a full screen menu when someone clicks on the mobile menu icon on any device: .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .headermenu-open .header-menu { opacity: 1; visibility: visible; } This is the second code from the tutorial that will show your mobile menu on part of the screen, not the whole thing, and gives it a bit of a box shadow to stand out. Be sure to adjust the values in this code like the margin and shadow until it looks perfect for your own site! .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .headermenu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-left: 50%; box-shadow: -5px 5px 15px #000 } - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 PARTNER10 → 🤍 - - - 🤩 Download over 200+ custom codes and pro tips for customizing Squarespace! Order the Squarespace CSS Cheat Sheet, available now at 👉 🤍 - 🙋 Need some help? Visit 🤍 to see my current support options. - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - 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 ♥
In this video, we will customize the header navigation bar, so that it looks better. We'll also see how to create a drop down menu that will save space on the navigation bar. Okay, let's start this video. Hope it helps! If you have any questions, leave them below #HowToChangeSiteHeaderOfSquarespace #HowToAddDropDownMenuInSquarespace
In this video we'll walk through all available elements to customize your main navigation. Plus a few tips and tricks for ecomm, portfolio and consultant pages. 📢🙋 FREE Squarespace Resources: 🤍 📢🙋 FREE Squarespace Resources: 🤍 📢🙋 FREE Squarespace Resources: 🤍 Timestamps: 00:00 - Intro 00:38 - Opening Editor/adjust logo 03:07 - Mobile logo 04:06 - Part 1 - Elements 05:04 - Add a button, social links, links 06:34 - Add a cart 07:04 - Adjust colors, fixed positions, header style 10:27 - Part 2 - Adjust desktop experience, layouts 12:22 - Verticle Padding, link spacing, element spacing 15:10 - Part 3 - Mobile experience 18:04 - Final Edits 18:53 - Adjusting actual navigation I'm David, a search specialist and beginner YouTuber from Orange County, CA. I help people grow using automation, optimization, and first-principles thinking. 🫢Found this content valuable and want to buy me a coffee (or a book)?: 🤍 ❤️ Subscribe to the channel: 🤍 😃 Subscribe to the channel: 🤍 📇 FREE Resources!!!!!: 🤍 ☎️ Phone Consultations (15min-2hour options): [🤍 Learn more about us (I get commissions for purchases made through some of these links, but I only promote things I like and believe in that I think you'd like, too.): 💻 Get Live Squarespace Help: 🤍 💥 Headquarters | Spacebar Agency: 🤍 📖 The Blog | SEO Guides: 🤍 📱 Start Your Website Today on Squarespace: 🤍 ——— 📕 Need a Payroll service? Get up to $300 today 🤍 📑 Need A Bookkeeper? Checkout Bench: Sign up for a Free Month: 🤍 ⏺️ Need a live chat feature? Check out Tidio: 🤍 💸 Looking to Robo-Invest? Try Betterment: 🤍 👨🏫 Teaching Platform I Love - Podia: 🤍 💳 Chase Business Credit Cards: 🤍 ——— 🧬 Sponsorships & Contact: hello 🤍 davidalex.com
Just getting started with Squarespace? Awesome! 😍 I want to teach you the basics - check out my free course here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off your first yearly subscription fee (affiliate code): 🤍 - What you’ll need: An existing Squarespace 7.1 site (it doesn’t have to be published yet) How to add a button to your main menu: 1. From any page on your site, enter edit mode by clicking edit on the top left hand side of the site preview 2. Hover over your site header and click on the edit site header button that appears 3. Select the elements option 4. Toggle on the button option 5. Enter the text you want to show on the button itself 6. Click the gear icon to open the link settings menu 7. Link to an existing page, external page, file, or have the site prompt an email or phone call 8. When you are all done, hover over the word done on the top left hand side and select save Important info: The color of this button will be set by the first page section color theme unless you overwrite it with custom CSS. The font can be changed in the font menu in your site styles when you select assign styles and then select the header button option. - If you are having any issues with your site, you can reach the official Squarespace support team by visiting 🤍 The term "Squarespace" is a trademark of Squarespace, Inc. This video was not created, published or endorsed by Squarespace, Inc. - #squarespace #howto #squarespacetricks #squarespacetutorial #howtousesquarespace #squarespacetraining #squarespacebasics
✅ FREE Squarespace Trial: 🤍 ⭐️ Complete Squarespace Tutorial: 🤍 - ⚒️ Best Online Marketing Tools: 🤍 - The description of this video contains affiliate links, which means that if you buy one of the products that I recommend, I’ll receive a small commission without any additional cost for you. This helps support the channel and allows me to continue making videos like this. Thank you for your support!
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 - 💕 Love this free Squarespace tutorial? You can donate via Paypal to help support my YouTube Channel here 👉 🤍 - 📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign - This tutorial is specific for Squarespace version 7.1 - if you are using an older version of Squarespace built on the brine theme, check out this tutorial instead: 🤍 - In this tutorial I am going to show you how to use custom CSS in Squarespace to change the color of the folder arrows on your mobile menu, and how to change it to something completely different! A few important things to note before you copy and paste the code below into your own site: ✨ 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: 🤍 🙋 Need some help? Visit 🤍 to see my current support options. Use this code to change the color and the width of both the right arrow for opening the folder and the left arrow for navigating back .chevron{border-color:purple; border-width: 5px} To change just the left arrow, use the code name .chevronleft and to change the right arrow, you guessed it! Use the code name .chevronright Want to change it to something completely different? Follow the steps below to hide the current arrows, and add a unicode character in its place.(check out my list of Squarespace compatible unicode characters here: 🤍 ) Also, you replace the colors purple and green in the code below with the colors you want to see, or remove that part of the code to keep the new characters in the same color as the links in your mobile menu. .chevron { border-color:transparent; transform:rotate(0deg)!important; margin-top:-1.25rem!important} .chevronright:after {content:"→"; color: purple} .chevronleft:before {content:"←"; color: green} .chevronleft {margin-right: 1rem} - 🤩 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 👉 🤍 - 🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): 🤍 ❤️ - 🙋 Need some help? Visit 🤍 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
Code: 🤍 Prevent your logo from clashing with the background color of your mobile menu. Use this quick CSS snippet to replace your logo when the mobile menu is open. Steps: 1. Upload the logo you want to replace your current logo into the Design » Manage Custom Files area. 2. Paste this code into your Design » Custom CSS area. 3. Replace the value in the url() function with the url of your new logo. Newsletter: 🤍 Buy Me A Coffee: 🤍 Plugin Store: 🤍
How to change the navigation font size in Squarespace. It's a little hard to find! SUBSCRIBE FOR MORE: 🤍 → GET STARTED with your own Squarespace website with this affiliate link: 🤍 ✨Thank you for watching! ✨ ✅ Free Squarespace Prelaunch Checklist: 🤍 → Website: 🤍 → Instagram: 🤍 → Subscribe: 🤍 “Squarespace” is a Brand Asset of Squarespace, Inc.
If you are brand new to version 7.1, you might be wondering what on earth all of those color themes are about and how to customize them! Well I have good news - that is exactly what you'll learn in this video 🥳 - Check out the other free Squarespace tutorial videos at 🤍 - We cover a lot in this 10 minute video, so here are a few spots you might want to jump ahead to: 00:40 How to get to your font menu 00:54 how to reach your site styles menu in edit mode 01:11 Where to find out the color theme a page section is using 01:30 What happens when you change your color palette 03:38 How to edit a color theme in Squaresapce 03:59 How to use a color that isn't in your color palette 05:30 How to adjust the opacity of a color 09:28 Where to learn more about Squarespace - for free! - - - 🔗 RELATED VIDEOS 🔗 Build a Squarespace Site in 10 minutes: 🤍 How to change fonts in Squarespace: 🤍 Setting Up A Blog in Squarespace: 🤍 - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 PARTNER10 → 🤍 - 🙋 Need some help? Visit 🤍 to see my current support options. - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - 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 ♥
As we’ve discussed before, it can be frustrating when you spend so long picking out the perfect fonts for your branding (or paying someone else to do it…) and then find that they aren’t built into Squarespace. But, don’t panic… you can add them into Squarespace as I’ve already shown you. If you haven’t seen my previous tutorial or don’t know how to upload a font file to Squarespace go and check that out first then come back here. Today though, I’m going to show you how to add those custom fonts to your site’s navigation. This tutorial works for ALL templates Squarespace 7.1. In one of my previous tutorials, I showed you how to upload and use a custom font on Squarespace and how to use that font in the Brine family navigation on Squarespace 7.0 ... here's an updated tutorial for Squarespace 7.1! Add a custom font to the navigation in Squarespace 7.1: Get the code here: 🤍 More Squarespace tutorials: 🤍 Need Squarespace support for a day or hour? Get in touch via my website: 🤍
A simple piece of code to help your navigation menu stand out! Squarespace 7.1 does a decent job of offering us most of the features we need, but I often find myself needing to draw attention to a specific link in the navigation other than the one being used for the button. Some clients want their phone number to stand out. Sometimes the login button needs some attention. So, to accomplish this, I figured out how to target a specific link in the navigation for CSS. I use this most commonly to simply change the color of that particular link, but like any CSS, you can take it as far as you’d like. HERE’S THE CODE: I’ve just shown a color change here, but again, feel free to add as needed! Tip! Simply change the number after nth-child to whatever number the link you’re trying to target is from the left. .header-nav-item:nth-child(2) a { color: #7cccbd !important; } Want to make a specific link look like a button? .header-nav-item:nth-child(2) a { font-size: 12px; padding: 5px 16px !important; color: #ffffff; background: #7cccbd; border-radius: 15px; } Change the color of the login link .user-accounts-text-link { color: #7cccbd !important; } Original post: 🤍 For more CSS code to enhance your website designs, check out the rest of the learn series: 🤍 —————— AJM EXPERIENCE A marketplace for graphic designers, Squarespace lovers, & CSS nerds. 🤍 💻 Download our CSS cheat sheet 🤍 🖥 Shop our Squarespace templates 🤍 🖋 Download pre-designed logos 🤍 🧢 Shop swag for designers 🤍 Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
Learn about Squarespace 7.1 Dropdown Menu | How to Create Dropdown menu on Squarespace In this video I show you how you can create a dropdown menu on your squarespace website. Squarespace is a website builder. With that being said you might expect it to be easy to make a dropdown menu. It's not hard but you just need to know where to find the right tools, that's why in this squarespace tutorial I'll show you how you can create a dropdown menu. Subscribe to How to Digital for more solutions to your problems: 🤍 If this video helped you out please consider leaving a like & commenting down below if this works! Thank you so much :) #HowToDigital
In this video I will show: How to add pages to navigation menu Change the font and size Change the layout and spacing In squarespace..
❤️ Want to Try Squarespace for FREE Click here now ↣ 🤍 (this is an affiliate link) Website: 🤍 Instagram: 🤍
Discover how to change the mobile menu colour on your Squarespace website. Prefer to read your tutorials? Check out the blog post version here: 🤍 Timestamps 00:00 Intro 00:38 Step-by-step 02:13 Outro 💸 Speedrun your first $100k as a Squarespace designer: 🤍 📱 Hire me to build your Squarespace website: 🤍 Disclaimer The term "Squarespace" is a trademark of Squarespace, Inc. This channel is not affiliated with Squarespace, Inc.
In this video, we look at how you can add a drop-down menu in Squarespace 7.1. Unfortunately, Squarespace don't have an option to create a two-tier dropdown. This requires the addition of CSS code. If that's a tutorial you would like, let me know in the comments. :) #squarespace #squarespacetutorial #dropdownmenu REFERRAL LINKS: Sign Up for Squarespace 🤍 Sign Up for Canva 🤍 NEXT STEPS: Support This Channel Hit Subscribe and Click the Bell (Thank you!) Join My Newsletter 🤍 Free Squarespace Training 🤍 Shop Squarespace Website Templates 🤍 CONNECT: Website - 🤍 Twitter - 🤍 LinkedIn - 🤍 #Squarespace #SquarespaceTutorial #howtousesquarespace - DISCLAIMER: I do not work for Squarespace. The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I do not own the rights to any of the music in this video. - Hi, I’m Chloë. I show you how to build a beautiful and profitable website, the easy way, with Squarespace. I believe you can make things simple and significant. If that's something that you're into, be sure to hit subscribe and leave a comment below. I'd love to say hello! :) Date: 23rd Aug 2022 Sub Count: 1961
In this Squarespace quick tip, I'll show you how to show mobile menu on desktop in Squarespace 7.1. Link to the code: 🤍 Subscribe for more: 🤍
How to Make and Customize Drop Down Menu in Squarespace. In this video, we'll show you how to make and customize a drop down menu in Squarespace. If you're looking to create a cool and functional drop down menu in your Squarespace website, then this video on How to Make and Customize Drop Down Menu in Squarespace, is for you! We'll walk you through the simple steps needed to create and customize this menu in squarespace to fit your needs. With this easy tutorial, you'll be able to create a professional and custom drop down menu in squarespace in no time! How to Make and Customize Drop Down Menu in Squarespace
This video is applicable to Squarespace 7.0 only. To organize your site's navigation menus, drag and drop pages around the Pages panel. This video shows you how to reorder pages, move pages between navigation sections, and add pages to Index Pages and folders. For more information on moving pages around your navigation, visit: 🤍 Get started on your Squarespace website at: 🤍 For more Squarespace tutorials, visit: 🤍 ABOUT SQUARESPACE Squarespace empowers millions of dreamers, makers, and doers by providing them with the tools they need to bring their creative ideas to life. On Squarespace’s dynamic all-in-one platforms, customers can claim a domain, build a website, sell online, and market a brand. Our suite of products combines cutting-edge design and world-class engineering, making it easier than ever to establish and own your online presence. FOLLOW US ON SOCIAL IG: 🤍 TW: 🤍 FB: 🤍 LI: 🤍
Learn How to Create Second Navigation on Squarespace 7.1 In this video I show you how you can make a second navigation menu on squarespace websites. This is a simple step by step squarespace tutorial that shows you exactly how you can create a second navigation menu. Find code here - 🤍 More squarespace tutorials: Add anchor links - 🤍 Add product slider - 🤍 Add search bar - 🤍 Subscribe to How to Digital for more solutions to your problems: 🤍 If this video helped you out please consider leaving a like & commenting down below if this works! Thank you so much :) #HowToDigital
✅ FREE Squarespace Trial: 🤍 ⭐️ Complete Squarespace Tutorial: 🤍 - ⚒️ Best Online Marketing Tools: 🤍 - The description of this video contains affiliate links, which means that if you buy one of the products that I recommend, I’ll receive a small commission without any additional cost for you. This helps support the channel and allows me to continue making videos like this. Thank you for your support!
How to locate, browse and select more fonts inside Squarespace 7.1. SEPTEMBER 2023 UPDATE: To access the font settings, you’ll just click on the small paintbrush icon at the top right of any page, then click “Fonts”. I'm Emily, and I help creatives utilize Squarespace to elevate their brand and make more money, so you can work less and live more! FREE WEBSITE BUILD TO LAUNCH CHECKLIST: 🤍 FREE SALES CONVERSION COPY GUIDE: 🤍 IG: 🤍 Subscribe to master Squarespace with me! Use my affiliate code BEJ10 for 10% off any Squarespace product
Learn how to increase or decrease aka change the menu font size in a Squarespace navigation menu. Let me know if it works for you and enjoy! START HERE: 🤍 #squarespace #squarespacecss
✅ Add Widgets To Your Website✅: 🤍 Build your website with Elementor here: 🤍 GET AMAZING FREE Tools For Your Youtube Channel To Get More Views: Tubebuddy (For GROWTH on Youtube): 🤍 Copy.ai (Amazing tool for descriptions and Youtube titles): 🤍?via=marek Snappa Graphic Program For Thumbnails: 🤍?afmc=397 Canva For Graphics: 🤍 Placeit For Thumbnails Templates: 🤍
This video will walk you through how to hide the header or navigation from a Squarespace page. This is especially helpful if you’re building out a sales page, where you want to prevent the user from distractions or from leaving that page, but still keep them on your site. The method you use is dependent on which version of Squarespace you're using—either 7.0 or 7.1. See the pinned comment below. UPDATED CODE: Please see the pinned comment below! × FREE PDF: 100 EVERGREEN CONTENT IDEAS → 🤍 #philpallen #squarespace #squarespacetutorial Phil deconstructs digital marketing and social media to empower leaders, corporations, employees, and entrepreneurs. His insights have been featured in media outlets around the world, including CNN, Access Hollywood, Entertainment Tonight, and The Daily Mail, to name a few. Phil has worked with hundreds of brands across all industries, including a Shark on Shark Tank, a Nobel Peace Prize winner, politicians, and some of the most important names in entertainment. He frequently speaks at conferences in cities all over the globe, including London, Tokyo, Dubai, Cairo, São Paulo, Medellín, Auckland, Helsinki, and Los Angeles. × LIKE, COMMENT, AND SUBSCRIBE × - FOLLOW ME ON: × INSTAGRAM → 🤍 - ADD ME: × FACEBOOK → 🤍 × PINTEREST → 🤍 × TWITTER → 🤍 × LINKEDIN → 🤍 × SQUARESPACE ID FINDER GOOGLE CHROME EXTENSION: 🤍 - × WEBSITE → 🤍 × NEWSLETTER → 🤍 - GET $100 OFF ANY COURSE WITH CODE "TUBE100" × CONTENT MASTERY → 🤍 × INSTAGRAM MASTERY → 🤍 × EMAIL MASTERY → 🤍
Following recent feature updates for the Squarespace 7.1 header it has become confusing as to where to change colors for the header button or the announcement bar. In this video I explain the various settings and where exactly to make those color changes. = I'm Kerstin Martin, Squarespace Educator, late bloomer entrepreneur and creator of the Eule Planner®. My courses help entrepreneurs build successful, well organized businesses with Squarespace. Find out more at 🤍 Visit my blog for more Squarespace and business tips & tricks, as well as awesome interviews with Squarespace designers and seasoned online entrepreneurs. - 🤍 Try Squarespace! Save 20% on your first year with code KERSTIN: 🤍 Subscribe to Studio Notes, my newsletter for candid conversations about growing a calm business with heart + integrity in a hustle-driven world. - 🤍 Let’s connect on Instagram - 🤍
If you are brand new to Squarespace, you might be wondering how the heck to navigate that font menu. In this free Squarespace 7.1 training, I will walk you through your Squarespace font menu step by super simple step so you know exactly how to change what you want to so your site looks amazing! - Check out the other free Squarespace tutorial videos at 🤍 - Font packs, headings, paragraphs...what the heck does miscellaneous apply to?! It turns out with a few extra clicks you can assign any Google or Adobe font to different things in your site, customizing blog titles, buttons and more. - - - 🔗 RELATED VIDEOS 🔗 Build a Squarespace Site in 10 minutes: 🤍 Squarespace Color Menu: 🤍 Setting Up A Blog in Squarespace: 🤍 - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 PARTNER10 → 🤍 - 🙋 Need some help? Visit 🤍 to see my current support options. - 🥰 SUPPORT MY CHANNEL → 🤍 💻 WEBSITE → 🤍 📧 NEWSLETTER → 🤍 🤳 INSTAGRAM → 🤍 👍 FACEBOOK → 🤍 📌 PINTEREST → 🤍 - 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 ♥
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 👉🤍 - In this video I show you how to create a secondary navigation in Squarespace 7.1 by placing your site title or logo in the center with navigation items on each side. ➡️➡️For the code used in the video go to 🤍 Subscribe for more Squarespace Tips & Tricks 👉 🤍 Connect with Me: Blog: 🤍 Facebook: 🤍 Instagram: 🤍 #squarespace #squarespaceCSS #squarespacehelp #customcode #codesnippets
.svg){kind=small}
