MODULE 3: MASTERING THE PAGE BUILDER
Welcome to Module 3! This is where your website truly comes to life. Your colors and fonts are set, the header is looking great, and now it’s time to drop in your own words.
Editing text in Squarespace’s Fluid Engine is as easy as using a Word document. Here is how to swap out the placeholder text for your own brilliant copy!
Step 1: Enter Edit Mode
As always, navigate to the page you want to work on and click the EDIT button in the top left corner of your screen.
Step 2: Swap the Placeholder Text
Click into any text box on the page.
Double-click to highlight the placeholder words (or hit Cmd/Ctrl + A to select all the text in that box).
Hit delete, and simply start typing your own words!
Step 3: Using the Text Toolbar
When you click inside a text block, a small horizontal toolbar will pop up right above it. This is your command center for styling that specific text. Here is what you can do:
Change the Size (Headings vs. Paragraphs): Click the drop-down menu on the far left of the toolbar (it usually says "Paragraph 2" or "Heading 1"). Here, you can change normal text into a massive title, or vice-versa. (Remember, these pull directly from the global fonts we set up in Lesson 6!)
Alignment: Use the alignment lines to justify your text to the left, right, or center of the text box.
Style: Make specific words Bold, Italic, or Underlined for emphasis.
Add a Link: Highlight a word, click the Chainlink Icon, and paste a URL to make that specific word a clickable link!
Step 4: Resizing the Text Box
Because Fluid Engine uses a flexible grid, the text box itself can be stretched or shrunk!
Click once on a text block so a blue outline appears around it.
Click and drag the small blue squares on the left or right edges to make the text box wider or narrower.
The text will automatically wrap to fit the new size of the box!
💡 DESIGNER SECRETS FOR TEXT:
The "Paste as Plain Text" Trick: This is a lifesaver! If you are copying your copy from a Google Doc or Microsoft Word, it often brings over hidden, messy formatting that breaks your site's fonts. When pasting into Squarespace, always use Cmd + Shift + V (Mac) or Ctrl + Shift + V (PC) to paste the text "clean" without any weird formatting.
The H1 SEO Rule: Search engines like Google look at your "Heading 1" (H1) to understand what your page is about. For good SEO, try to use the Heading 1 size only once per page (usually at the very top), and use Heading 2 or Heading 3 for the rest of your section titles!
Don't Forget Mobile! If you resize a text box to make it super wide on your desktop, it might look squished on a phone. Always click the Mobile icon to double-check that your paragraphs are easy to read on small screens.
Copy looking sharp? Be sure to hit SAVE in the top left corner. Now that your words are in, let's make it visual! Head to Lesson 13: Replacing Images & Videos.
Editing text in Squarespace’s Fluid Engine is as easy as using a Word document. Here is how to swap out the placeholder text for your own brilliant copy!
Step 1: Enter Edit Mode
As always, navigate to the page you want to work on and click the EDIT button in the top left corner of your screen.
Step 2: Swap the Placeholder Text
Click into any text box on the page.
Double-click to highlight the placeholder words (or hit Cmd/Ctrl + A to select all the text in that box).
Hit delete, and simply start typing your own words!
Step 3: Using the Text Toolbar
When you click inside a text block, a small horizontal toolbar will pop up right above it. This is your command center for styling that specific text. Here is what you can do:
Change the Size (Headings vs. Paragraphs): Click the drop-down menu on the far left of the toolbar (it usually says "Paragraph 2" or "Heading 1"). Here, you can change normal text into a massive title, or vice-versa. (Remember, these pull directly from the global fonts we set up in Lesson 6!)
Alignment: Use the alignment lines to justify your text to the left, right, or center of the text box.
Style: Make specific words Bold, Italic, or Underlined for emphasis.
Add a Link: Highlight a word, click the Chainlink Icon, and paste a URL to make that specific word a clickable link!
Step 4: Resizing the Text Box
Because Fluid Engine uses a flexible grid, the text box itself can be stretched or shrunk!
Click once on a text block so a blue outline appears around it.
Click and drag the small blue squares on the left or right edges to make the text box wider or narrower.
The text will automatically wrap to fit the new size of the box!
💡 DESIGNER SECRETS FOR TEXT:
The "Paste as Plain Text" Trick: This is a lifesaver! If you are copying your copy from a Google Doc or Microsoft Word, it often brings over hidden, messy formatting that breaks your site's fonts. When pasting into Squarespace, always use Cmd + Shift + V (Mac) or Ctrl + Shift + V (PC) to paste the text "clean" without any weird formatting.
The H1 SEO Rule: Search engines like Google look at your "Heading 1" (H1) to understand what your page is about. For good SEO, try to use the Heading 1 size only once per page (usually at the very top), and use Heading 2 or Heading 3 for the rest of your section titles!
Don't Forget Mobile! If you resize a text box to make it super wide on your desktop, it might look squished on a phone. Always click the Mobile icon to double-check that your paragraphs are easy to read on small screens.
Copy looking sharp? Be sure to hit SAVE in the top left corner. Now that your words are in, let's make it visual! Head to Lesson 13: Replacing Images & Videos.
12. Editing Text & Headlines
Text is great, but visuals are what actually sell! The template is filled with beautiful placeholder images, but now it’s time to replace them with your own brand photography to make the site truly yours.
Here is how to quickly swap out images and add videos using the Fluid Engine builder.
Step 1: Swapping an Image
Make sure you are in Edit mode.
Click once on any placeholder image on the page.
A small toolbar will appear above or below the image. Click the Pencil Icon (Edit).
An Image menu will pop up on the right side of your screen. Click Replace.
You can now choose to upload a new file directly from your computer, or click Select from Library to reuse a photo you’ve already uploaded.
Step 2: The "Design" Tab (Fit vs. Fill)
Once your photo is uploaded, you might notice that it is getting slightly cropped, or maybe it doesn't fill the entire box.
In that same right-hand Image menu, click the Design tab at the top. Here you have two crucial options:
Fill: This is the default. The image will stretch to fill the entire blue box you’ve created, which means the edges might get cropped off.
Fit: This forces the entire image to show, exactly as you shot it, leaving empty space around it if the box isn't the exact same proportions.
Step 3: Changing Image Shapes
Squarespace has an amazing built-in feature that lets you cut images into cool shapes without needing Photoshop!
Still inside the Design tab of the Image menu, click on Shape.
Choose from dozens of shapes—arches, circles, stars, or jagged edges. Your photo will instantly update!
Step 4: Adding a Video
Want to add a welcome video or a course preview?
Click the "+" icon anywhere on the grid to add a new block.
Choose Video.
Click the Pencil icon on the new video block.
You can upload a short video directly to Squarespace, or simply paste a URL from YouTube or Vimeo. Squarespace will embed it perfectly!
💡 DESIGNER SECRETS FOR IMAGES:
The Magic Focal Point: If you choose the "Fill" option (which most templates use), your image might crop someone's head off on smaller screens. To fix this, look at the image preview in the menu and drag the small Focal Point Circle right over the most important part of the photo (like a face or a product). Squarespace will now make sure that specific spot is never cropped out on any device!
Compress Your Images! This is the #1 reason websites load slowly. Before uploading photos to Squarespace, make sure they are under 500KB in size. You can use free tools like TinyPNG.com to compress them without losing quality.
Name Your Files for SEO: Before uploading, rename your file on your computer from IMG_9483.jpg to something descriptive like Aesthetic-Website-Template-Squarespace.jpg. Google's robots read image file names, so this helps your site show up in search results!
Photos looking gorgeous? Hit SAVE! Now that you know how to edit blocks, let's learn how to manage the larger sections of the page in Lesson 14: Working with Sections.
Here is how to quickly swap out images and add videos using the Fluid Engine builder.
Step 1: Swapping an Image
Make sure you are in Edit mode.
Click once on any placeholder image on the page.
A small toolbar will appear above or below the image. Click the Pencil Icon (Edit).
An Image menu will pop up on the right side of your screen. Click Replace.
You can now choose to upload a new file directly from your computer, or click Select from Library to reuse a photo you’ve already uploaded.
Step 2: The "Design" Tab (Fit vs. Fill)
Once your photo is uploaded, you might notice that it is getting slightly cropped, or maybe it doesn't fill the entire box.
In that same right-hand Image menu, click the Design tab at the top. Here you have two crucial options:
Fill: This is the default. The image will stretch to fill the entire blue box you’ve created, which means the edges might get cropped off.
Fit: This forces the entire image to show, exactly as you shot it, leaving empty space around it if the box isn't the exact same proportions.
Step 3: Changing Image Shapes
Squarespace has an amazing built-in feature that lets you cut images into cool shapes without needing Photoshop!
Still inside the Design tab of the Image menu, click on Shape.
Choose from dozens of shapes—arches, circles, stars, or jagged edges. Your photo will instantly update!
Step 4: Adding a Video
Want to add a welcome video or a course preview?
Click the "+" icon anywhere on the grid to add a new block.
Choose Video.
Click the Pencil icon on the new video block.
You can upload a short video directly to Squarespace, or simply paste a URL from YouTube or Vimeo. Squarespace will embed it perfectly!
💡 DESIGNER SECRETS FOR IMAGES:
The Magic Focal Point: If you choose the "Fill" option (which most templates use), your image might crop someone's head off on smaller screens. To fix this, look at the image preview in the menu and drag the small Focal Point Circle right over the most important part of the photo (like a face or a product). Squarespace will now make sure that specific spot is never cropped out on any device!
Compress Your Images! This is the #1 reason websites load slowly. Before uploading photos to Squarespace, make sure they are under 500KB in size. You can use free tools like TinyPNG.com to compress them without losing quality.
Name Your Files for SEO: Before uploading, rename your file on your computer from IMG_9483.jpg to something descriptive like Aesthetic-Website-Template-Squarespace.jpg. Google's robots read image file names, so this helps your site show up in search results!
Photos looking gorgeous? Hit SAVE! Now that you know how to edit blocks, let's learn how to manage the larger sections of the page in Lesson 14: Working with Sections.
13. Replacing Images & Videos
You know how to change text and swap photos, which means you’ve mastered the "blocks" of your website! Now, let’s zoom out a little bit.
In Squarespace, pages are built by stacking horizontal rows on top of each other. These rows are called Sections. You might have a "Header" section, followed by an "About Me" section, followed by a "Services" section.
Here is how to manage these larger building blocks to create the perfect page flow.
Step 1: Adding a New Section
Need more space to tell your story?
Make sure you are in Edit mode.
Hover your mouse directly between any two existing sections on your page.
A blue button will appear that says ADD SECTION. Click it!
A menu will slide out. You can choose to add a completely Blank Section (to build from scratch using the "+" button), or you can choose from Squarespace’s library of pre-designed layouts.
Step 2: Moving Sections Up and Down
Decided you want your Testimonials to appear before your Services? You don't need to drag everything individually!
Hover your mouse over the section you want to move.
Look at the small pop-up menu that appears on the right side of the screen.
Click the Up Arrow or Down Arrow to instantly shift the entire section higher or lower on the page.
Step 3: Duplicating and Deleting
To Duplicate: If you love the layout of a specific section (like a beautiful grid of photos) and want to use it again right below, hover over the section and click the Duplicate Icon (it looks like two little squares overlapping) in the right-hand menu.
To Delete: If you don't need a section, hover over it and click the Trash Can Icon. (But wait! Read the "Pro-Tip" below before you delete anything!)
Step 4: The Magic "Save Section" Button
Remember the Golden Rules from Lesson 4? If your template includes a gorgeous "Pricing" section, but you aren't ready to launch your prices just yet, do not delete it!
Hover over the section and click the Heart Icon (Save Section).
A little notification will say the section was saved. You can now safely delete it from the page.
How to get it back: Whenever you are ready for it, click Add Section (Step 1), and look at the very bottom of the menu for your Saved Sections folder. One click, and your perfect layout is back!
💡 DESIGNER SECRETS FOR SECTIONS:
The "Zebra" Effect: To make a long page incredibly easy to read, try alternating the background colors of your sections. For example, use a white background for the "Intro", a soft beige background for "Services", and back to white for "Testimonials." This creates visual "breaks" for the reader's eyes! (You can change section colors by clicking the Pencil Icon > Colors).
Give It Room to Breathe: If your page feels cramped, you might need more padding. Click the Pencil Icon (Edit Section) and stay on the Format tab. Look for the "Section Height" option (S, M, L). Setting this to Medium (M) or Large (L) gives your text and photos elegant, high-end breathing room!
Saved Sections work Site-Wide: The best part about the Heart Icon? It works across your entire website! If you save a beautiful "Contact Me" banner on your Homepage, you can go to your "About" page, click Add Section > Saved Sections, and drop it in there too. It saves so much time!
Sections stacked perfectly? Make sure to hit SAVE! Now that your layout is set, let’s talk about adding some depth to those sections in Lesson 15: Backgrounds & Overlays.
In Squarespace, pages are built by stacking horizontal rows on top of each other. These rows are called Sections. You might have a "Header" section, followed by an "About Me" section, followed by a "Services" section.
Here is how to manage these larger building blocks to create the perfect page flow.
Step 1: Adding a New Section
Need more space to tell your story?
Make sure you are in Edit mode.
Hover your mouse directly between any two existing sections on your page.
A blue button will appear that says ADD SECTION. Click it!
A menu will slide out. You can choose to add a completely Blank Section (to build from scratch using the "+" button), or you can choose from Squarespace’s library of pre-designed layouts.
Step 2: Moving Sections Up and Down
Decided you want your Testimonials to appear before your Services? You don't need to drag everything individually!
Hover your mouse over the section you want to move.
Look at the small pop-up menu that appears on the right side of the screen.
Click the Up Arrow or Down Arrow to instantly shift the entire section higher or lower on the page.
Step 3: Duplicating and Deleting
To Duplicate: If you love the layout of a specific section (like a beautiful grid of photos) and want to use it again right below, hover over the section and click the Duplicate Icon (it looks like two little squares overlapping) in the right-hand menu.
To Delete: If you don't need a section, hover over it and click the Trash Can Icon. (But wait! Read the "Pro-Tip" below before you delete anything!)
Step 4: The Magic "Save Section" Button
Remember the Golden Rules from Lesson 4? If your template includes a gorgeous "Pricing" section, but you aren't ready to launch your prices just yet, do not delete it!
Hover over the section and click the Heart Icon (Save Section).
A little notification will say the section was saved. You can now safely delete it from the page.
How to get it back: Whenever you are ready for it, click Add Section (Step 1), and look at the very bottom of the menu for your Saved Sections folder. One click, and your perfect layout is back!
💡 DESIGNER SECRETS FOR SECTIONS:
The "Zebra" Effect: To make a long page incredibly easy to read, try alternating the background colors of your sections. For example, use a white background for the "Intro", a soft beige background for "Services", and back to white for "Testimonials." This creates visual "breaks" for the reader's eyes! (You can change section colors by clicking the Pencil Icon > Colors).
Give It Room to Breathe: If your page feels cramped, you might need more padding. Click the Pencil Icon (Edit Section) and stay on the Format tab. Look for the "Section Height" option (S, M, L). Setting this to Medium (M) or Large (L) gives your text and photos elegant, high-end breathing room!
Saved Sections work Site-Wide: The best part about the Heart Icon? It works across your entire website! If you save a beautiful "Contact Me" banner on your Homepage, you can go to your "About" page, click Add Section > Saved Sections, and drop it in there too. It saves so much time!
Sections stacked perfectly? Make sure to hit SAVE! Now that your layout is set, let’s talk about adding some depth to those sections in Lesson 15: Backgrounds & Overlays.
14. Working with Sections
We’ve talked about how to change the colors of your sections, but what if you want a beautiful photograph or a highly engaging video playing directly behind your text?
Adding a background is a fantastic way to add depth to your website and create a premium, high-end feel. However, it comes with one major challenge: keeping your text readable!
Here is exactly how to add backgrounds and use "overlays" to make sure your words still pop.
Step 1: Adding a Background Image
Hover your mouse over the section where you want to add a background.
Click the Pencil Icon (Edit Section) on the right side of the screen.
In the menu that pops up, click the Background tab in the middle.
Click on Image, and upload your photo (or select one from your library).
The image will instantly stretch to fill the entire background of that section!
Step 2: Adding a Background Video
Video backgrounds (often called "B-roll") are incredibly popular right now for creating a dynamic, engaging first impression.
In that same Background menu, click on Video instead of Image.
You can upload a short video directly to Squarespace, or paste a link from YouTube or Vimeo.
Note: Background videos automatically loop and play silently. There is no play button or sound!
Step 3: Setting Up the Overlay (Crucial for Readability)
If you put white text on top of a bright, busy photograph, no one will be able to read it. This is where the "Overlay" comes in. An overlay is like a digital pair of sunglasses you put over the background to make the text stand out.
Once your Image or Video is uploaded, scroll down slightly in the Background menu.
Look for the Overlay Opacity slider.
Drag the slider to the right. You will see a tint (either dark or light, depending on your Color Theme) begin to wash over the image.
Adjust this slider until the background looks moody and beautiful, but your text is 100% crisp and easy to read.
💡 DESIGNER SECRETS FOR BACKGROUNDS:
The "Mobile Fallback" Image: Mobile browsers (like Safari on an iPhone) sometimes block background videos from auto-playing to save users' battery and data. If you use a background video, always scroll down in that menu and upload a Mobile Fallback Image. This is a still photo that will show up perfectly if the video refuses to play!
Contrast is King: If you want a light, airy vibe, use a light Color Theme for the section and set your overlay to wash the image in white. If your text is white, use a dark Color Theme so the overlay acts like a shadow behind the words.
Keep It Simple: The best background images have a lot of "negative space" (empty areas like a clear sky or a blank wall). Avoid using photos with lots of faces or complex details as backgrounds, because it makes the section look chaotic.
Backgrounds looking gorgeous? Perfect. Hit SAVE in the top left corner!
Now, take a deep breath. We are about to tackle the single most important lesson in this entire course. Grab a coffee, and let's master Lesson 16: The Mobile Layout (Crucial!).
Adding a background is a fantastic way to add depth to your website and create a premium, high-end feel. However, it comes with one major challenge: keeping your text readable!
Here is exactly how to add backgrounds and use "overlays" to make sure your words still pop.
Step 1: Adding a Background Image
Hover your mouse over the section where you want to add a background.
Click the Pencil Icon (Edit Section) on the right side of the screen.
In the menu that pops up, click the Background tab in the middle.
Click on Image, and upload your photo (or select one from your library).
The image will instantly stretch to fill the entire background of that section!
Step 2: Adding a Background Video
Video backgrounds (often called "B-roll") are incredibly popular right now for creating a dynamic, engaging first impression.
In that same Background menu, click on Video instead of Image.
You can upload a short video directly to Squarespace, or paste a link from YouTube or Vimeo.
Note: Background videos automatically loop and play silently. There is no play button or sound!
Step 3: Setting Up the Overlay (Crucial for Readability)
If you put white text on top of a bright, busy photograph, no one will be able to read it. This is where the "Overlay" comes in. An overlay is like a digital pair of sunglasses you put over the background to make the text stand out.
Once your Image or Video is uploaded, scroll down slightly in the Background menu.
Look for the Overlay Opacity slider.
Drag the slider to the right. You will see a tint (either dark or light, depending on your Color Theme) begin to wash over the image.
Adjust this slider until the background looks moody and beautiful, but your text is 100% crisp and easy to read.
💡 DESIGNER SECRETS FOR BACKGROUNDS:
The "Mobile Fallback" Image: Mobile browsers (like Safari on an iPhone) sometimes block background videos from auto-playing to save users' battery and data. If you use a background video, always scroll down in that menu and upload a Mobile Fallback Image. This is a still photo that will show up perfectly if the video refuses to play!
Contrast is King: If you want a light, airy vibe, use a light Color Theme for the section and set your overlay to wash the image in white. If your text is white, use a dark Color Theme so the overlay acts like a shadow behind the words.
Keep It Simple: The best background images have a lot of "negative space" (empty areas like a clear sky or a blank wall). Avoid using photos with lots of faces or complex details as backgrounds, because it makes the section look chaotic.
Backgrounds looking gorgeous? Perfect. Hit SAVE in the top left corner!
Now, take a deep breath. We are about to tackle the single most important lesson in this entire course. Grab a coffee, and let's master Lesson 16: The Mobile Layout (Crucial!).
15. Backgrounds & Overlays
If you only remember one lesson from this entire course, please let it be this one!
Over 60% of your website visitors will be looking at your site on their phones. Because of this, making sure your mobile layout looks flawless is the most important step before you launch.
Thanks to Fluid Engine, you have 100% control over exactly how your site looks on a phone. Here is how to master the mobile view without pulling your hair out!
Step 1: Switch to Mobile View
While in Edit mode, look at the very top right corner of your screen.
Click the Mobile Phone Icon.
Your screen will instantly narrow to show you exactly how the website looks on a smartphone.
Step 2: Don't Panic! (Embrace the Chaos)
When you first switch to the mobile view after adding new text or photos on your desktop, it might look like a total disaster. Photos might be under the wrong text, or there might be huge blank spaces.
Why this happens: When you add a new block on the desktop view, Squarespace doesn't know exactly where you want it on mobile, so it just drops it at the very bottom of the section.
The Fix: Simply drag it into place!
Step 3: Drag, Drop, and Resize (Safely!)
This is where the magic of Fluid Engine shines. You can move and resize blocks on the mobile view, and it will NOT mess up your desktop design.
Click and drag your titles, paragraphs, and photos into the correct logical order (usually: Title first, then Photo, then Paragraph, then Button).
Use the blue squares on the edges of your blocks to resize them. Make sure your text boxes stretch almost all the way across the screen so they are easy to read!
You can even overlap photos and text on mobile just like you did on desktop.
Step 4: Fix the Empty Space (The Blue Arrow)
When you move things around on mobile, you might end up with a massive, ugly empty space at the bottom of the section.
Scroll to the very bottom of the section you are working on.
Look for the small Blue Arrow icon pointing up and down (it sits right on the bottom line of the grid).
Click and drag that arrow up to close the gap and tighten up the section!
💡 DESIGNER SECRETS FOR MOBILE:
The "Order of Operations" Rule: NEVER try to design the desktop and mobile versions at the exact same time. It will drive you crazy. Always finish an entire section on Desktop first. Get the text and photos perfect. Then, click the mobile icon and arrange that section for phones.
The Up/Down Arrows: Want to move a photo above a text block quickly? Click the photo once, and look at the little toolbar. You will see Up and Down Arrows. Clicking these will instantly snap the block above or below the surrounding elements!
Remember the "Global Content" Warning: While moving and resizing blocks is completely safe, DELETING a block or changing the typed words is global. If you delete a photo because "it doesn't look good on mobile," it will disappear from your desktop site too!
Mobile view looking flawless? Take a huge sigh of relief and hit SAVE!
You have officially conquered the hardest part of Squarespace and completed Module 3: Mastering the Page Builder. You are now a Fluid Engine pro!
Whenever you are ready, let’s move to Module 4: Dynamic Blocks & Advanced Features, where we will add the "wow" factor with accordions, marquees, and animations!
Over 60% of your website visitors will be looking at your site on their phones. Because of this, making sure your mobile layout looks flawless is the most important step before you launch.
Thanks to Fluid Engine, you have 100% control over exactly how your site looks on a phone. Here is how to master the mobile view without pulling your hair out!
Step 1: Switch to Mobile View
While in Edit mode, look at the very top right corner of your screen.
Click the Mobile Phone Icon.
Your screen will instantly narrow to show you exactly how the website looks on a smartphone.
Step 2: Don't Panic! (Embrace the Chaos)
When you first switch to the mobile view after adding new text or photos on your desktop, it might look like a total disaster. Photos might be under the wrong text, or there might be huge blank spaces.
Why this happens: When you add a new block on the desktop view, Squarespace doesn't know exactly where you want it on mobile, so it just drops it at the very bottom of the section.
The Fix: Simply drag it into place!
Step 3: Drag, Drop, and Resize (Safely!)
This is where the magic of Fluid Engine shines. You can move and resize blocks on the mobile view, and it will NOT mess up your desktop design.
Click and drag your titles, paragraphs, and photos into the correct logical order (usually: Title first, then Photo, then Paragraph, then Button).
Use the blue squares on the edges of your blocks to resize them. Make sure your text boxes stretch almost all the way across the screen so they are easy to read!
You can even overlap photos and text on mobile just like you did on desktop.
Step 4: Fix the Empty Space (The Blue Arrow)
When you move things around on mobile, you might end up with a massive, ugly empty space at the bottom of the section.
Scroll to the very bottom of the section you are working on.
Look for the small Blue Arrow icon pointing up and down (it sits right on the bottom line of the grid).
Click and drag that arrow up to close the gap and tighten up the section!
💡 DESIGNER SECRETS FOR MOBILE:
The "Order of Operations" Rule: NEVER try to design the desktop and mobile versions at the exact same time. It will drive you crazy. Always finish an entire section on Desktop first. Get the text and photos perfect. Then, click the mobile icon and arrange that section for phones.
The Up/Down Arrows: Want to move a photo above a text block quickly? Click the photo once, and look at the little toolbar. You will see Up and Down Arrows. Clicking these will instantly snap the block above or below the surrounding elements!
Remember the "Global Content" Warning: While moving and resizing blocks is completely safe, DELETING a block or changing the typed words is global. If you delete a photo because "it doesn't look good on mobile," it will disappear from your desktop site too!
Mobile view looking flawless? Take a huge sigh of relief and hit SAVE!
You have officially conquered the hardest part of Squarespace and completed Module 3: Mastering the Page Builder. You are now a Fluid Engine pro!
Whenever you are ready, let’s move to Module 4: Dynamic Blocks & Advanced Features, where we will add the "wow" factor with accordions, marquees, and animations!
16. The Mobile Layout (Crucial!)
