Level 1 – Transforming Brine into Pedro
The best way to to understand the template families (and learn Squarespace 7.0) is to take one template and turn it into another template!
Pedro is a part of the Brine template family in Squarespace Version 7.0.
Variants of 7.0 template families don’t have different features. They just have different fonts, photos, and layout styles.
By turning one template (Brine) into another (Pedro), you’ll be more comfortable with the Squarespace platform and using the Developer Tool!
Password: brineintopedro
Preparing for Level 1: Brine into Pedro
Track your time! ⏰
Get your level 1 FAQ’s answered in The Onboarding Guide & Pedro Discord channel.
When you finish, get a good night’s sleep first… 💤 Then look over your site one more time with “fresh eyes” 👀.
Before submitting, take a look at our grading criteria, do a side-by-side comparison with your finished Pedro and the ilovecreatives Pedro (pw: brineintopedro) and check out the list below for common feedback.
Puno's Recommended Extensions
Common Feedback For Brine Into Pedro
Tip: Make sure to check out this list before you submit your site for the TAs to grade!
Don’t forget to update the Header: Primary Navigation > Folder Color (Overlay) and Folder Text Color (Overlay) colors. On the Home and Shop pages, you have an image that sits behind the navigation, which switches all of the navigation colors to Overlay. The default Overlay colors will always be black and white, so you need to update the Overlay colors to match the Pedro template. https://share.getcloudapp.com/ApuYXe0x
Don’t forget to update the Header: Cart > Quantity Color (Overlay). Just like the Header: Primary Navigation colors on the Home and Shop pages, the Cart will also use Overlay colors. If you open Site Styles and click on the cart, you'll see an option to adjust the Cart Quantity Color (Overlay). This should be set to white, and the transparency slider should be set to 20%. https://share.getcloudapp.com/RBu4B6rk
Your Cart Quantity Color on pages that aren’t using Overlay colors (so every page other than Home and Shop) should be white with 20% opacity. https://share.getcloudapp.com/llu6GqbK
The header branding should have -0.04em letter spacing. It can be a bit tricky with negative letter spacing, but all you need to do is type the 0 before the decimal. So if you type out -0.04 exactly, it will work.
The Icons should be Hairline.
In the Hero Pedro index page of the homepage, the Image Block: Collage should have the Image and Content width set to 55%, with Content Offset set to 5%. https://share.getcloudapp.com/BluDvgbP
The Featured Pedro index page of the homepage has a dark gray banner image, which means the Small Button will be using Alternate colors. (Squarespace sometimes uses the term Alternate instead of Overlay, but they both happen when you add a banner image to an index page or page header.) If you forget to update the Button Block (Small) > Alternate Button Color and Alternate Text Color, the button colors will default to black and white. Make sure to update the Alternate colors so the button is green with white text. https://share.getcloudapp.com/xQun41bK
The Content Pedro index page on the homepage should have a banner image, which gives it the slightly lighter gray color than the Featured Pedro index page. Whenever you add a banner image, you need to update the Overlay (or sometimes called Alternate) color settings of any text, lines and buttons. https://share.getcloudapp.com/6quQWRBy
The Subscribe Pedro index page can be tricky. If you are having trouble updating the Subscribe Heading, or updating the newsletter block background color after you’ve added the banner image, make sure you have set the Newsletter Block > Style to Custom instead of White. Here’s a screenshot of what it looks like: https://share.getcloudapp.com/12u02wJx Here’s a longer video explaining what’s happening and how to update the newsletter block: https://share.getcloudapp.com/Blu4jkd0
In your Footer, the Social Links block and the Powered by Squarespace text block should be in one row so that both blocks are side by side to one another. Make sure both blocks are equal width and the Powered by Squarespace text is right aligned. https://share.getcloudapp.com/lluNmd6e
On your Product Description Pages (when you click a product from the Shop page), the Product Price should be 20px.
On your Product Description Page (when you click on a Product from the Shop page) you should have turned off the Product Item Navigation Breadcrumb at the top of the page. (It's a tiny > at the top of the page.) https://share.getcloudapp.com/KouJqOQj
On your Product Description Pages (when you click a product from the Shop page), there should be padding above the Product Description. In the Site Styles panel, under Products: Layout, make sure the Top Padding is 100px. https://share.getcloudapp.com/Apuz1bJz
On your Blog page, make in your Site Styles menu that Blog: List > Image Aspect Ratio is set to Auto.
On the Blog Item page, the Show Pagination Label checkmark should be checked off. https://share.getcloudapp.com/Wnuqpo0b
On your Info>Our Story page your quote block has double quotes. When you use the quote block, quote marks are automatically added to the text you enter into the quote text field so you don't need to type out quotes. If you remove the quote marks around the text you entered, the double quote marks will be fixed.
On your Info>Contact page the form is missing under Plant Help. You need to connect an email account to a form block for it to appear to site visitors.