![]() ![]() Related: What is the best Squarespace template? Brine. Templates within the Brine family include: Brine, Aria, Basil, Blend, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West. Related: Squarespace template comparison chart In order to make this happen on your Squarespace site, you're gonna want to be using a template within the Brine family. The image is obviously an image and the blue? It's an image too! White has been set in the Style Editor as the site-wide background color. See how the first section is a page of an index with an image as the background? Then the second section has a blue background and the third section has a white background? Related: A beginners guide to Squarespace index pagesįirst, let's look at an example of a page with different background color sections. No clue what an index page is? The post below will help explain it. In today's tutorial, I'll show you the magic of index pages and how to use a photo of a color to change the background color for a certain part of your page. What you do in the Style Editor affects the entie site, so when it comes to changing just one background, you actually want to avoid the Style Editor. Related: Squarespace Style Editor: A complete guide While normally you change a style within the Style Editor in Squarespace, trying to change just one section or page's color is the exception to that rule of changing the background color in the Style Editor. So, basically, it's super helpful for organization of your site. If you didn't already know, the strategy of changing the background color of just a section of your page helps to define areas on the page, contains a related group of content together, and visually delineates clear sections or ideas. You can sign up for a free trial of Squarespace here and I also got ya a little off the price, use code PAIGE10 for 10% off your first year. change the color of just a certain section or page of your Squarespace site?Īnd when you do it's changing the entire background color of the full site? Oh and you'd prefer to not code, you say? Not to worry, I have a solution for you in today's post! You can replace the part of the code with #page to isolate just the sections on the page, not footer only screen and (min-width: 768px)Ĭheck out this tutorial to learn about installing code on a single page in Squarespace.Let me guess, you're trying to. This single code line will have a minimal impact on site load time but you can also install this via page header code injection ( Page Settings > Advanced) if you want to reduce site wide load time. You can install this using site wide CSS ( Design > Custom CSS) because that data section ID is unique to one section on one page. ![]() Important Info for Split Layouts in Squarespace 7.1īe sure to use the data section ID to apply this to one section at a time. Check out this page to see a split layout in Squarespace 7.1 ![]() If you want it to stay half screen on mobile, remove the line that starts with last thing before you dive into the codes - I want to encourage you to play around with the percentages and other values! I recommend using vh (view height) vw (view width) and percentage to keep it responsive, but try any value type you want!Ĭustom code is all about customizing so use these codes to make your site uniquely yours ❤️īlog posts don’t have page sections so I made a new page on this site to show you what it looks like. The codes below only change the desktop version of your site, not the mobile version because I personally think that a split-screen on a small device can get a little too “squished” and make it hard for a site to be accessible. We’ll create a page section that is an image on one half and text on the other another version with a solid color and a third version that lets you scroll thru a big amount of text on one site, often called a split page layout. I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are. Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider. In this tutorial, we are going to create a a split layout in Squarespace - three different versions in fact! ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |