This Blocks training webinar shows users how to edit and design their websites with ease—covering login steps, page navigation, and how to add or update text, images, and sliders using simple drag-and-drop tools.
Watch this recording for in-depth training on how to adjust/upload/manage all the images and layouts on your site. Learn how to use different Blocks layouts and templates, design tips and tricks to make your site stand out, and how to create a great-looking website that your brand is proud of.
Welcome & Housekeeping
Welcome, everyone, to another edition of your Blocks training webinars. My name is Mitch Briggs, and I’m the chief marketing officer here. I’m going to start with a brief introduction and a few housekeeping items. We have the chat working this time, so if you have questions, please send them in at any time and we’ll answer them. Before I hand things over to Damon, our marketing and training specialist, here’s a quick overview of the Blocks platform.
What Blocks Is (and Why It’s Different)
Welcome to your modern website platform. It’s not what you’re probably used to when dealing with other web vendors or with your own website. You won’t need to submit tickets to make changes. We’ve developed software that you can log into and make updates yourself. That’s why you’re here—to understand what you can do inside the platform, how to self-serve without having to go through support, and how to avoid extra costs.
Subscription Model & Core Benefits
We operate on a flat monthly subscription. You get premium support built on top of your SSM Cloud integration, which enables you to add new locations and information quickly, make easy edits, and offer a quick checkout through the embedded rental flow—plus a bunch of other features we continue to add as part of your subscription. As new features come out, keep attending these training webinars to learn about them. Today, we’re focusing on images, web design, and the elements you can control on your website—image sizes and best practices included.
Hand-Off to Training
I’m going to turn things over to Damon, who will walk you through the platform and what you need to know about images.
Session Focus: Design First, Images Second
Thank you, Mitch. I’m excited to jump in. We’ll be talking about images and design—actually, I’ll spend a bit more time on design than on images. First, a quick reminder on how to access your Blocks account: whatever your website is, type your domain followed by /account/login (for example, aplusmini.com/account/login). That will take you straight to your login page.
Getting In: Login & Dashboard
Once you’ve logged in, you’ll land on the Dashboard view. We mention this every week, but as a reminder, all of this information updates in real time. Your numbers will be much larger than what you see on this demo site, but you can check last week versus this week, and see your top locations on the bottom information card. It updates in real time, so it’s helpful to check throughout the day.
Navigating Pages (Corporate vs. Location vs. Blog)
On the left-hand side, click Pages to see all pages on the website. I’ve spent more time on this in previous webinars, so you can revisit those recordings, but all your pages can be accessed here through either Corporate or Location pages (except for Blogs, which you access from the left menu). We’ll jump straight into the Home page and go right into the editing view for this Closet Storage demo site. At the top, you’ll see placeholders for the header and the dynamic block (I’ll show the live version in a second), followed by various other blocks as you scroll—text and image blocks, a slider image block, and more. One of these looks a little different but uses the same block type as the top image/text block; the difference is that the parallax effect is turned off, giving it a different look.
Live vs. Editor (What Changes Where)
Here’s the live version of the same site. In the live view, the header placeholder is replaced with a video, and the dynamic placeholder is replaced with the four closest locations to you based on IP address. As we scroll down, you’ll see how the other blocks render.
Pro Tip: Use DevTools for Device Previews
Before going further, here’s a tip that will make design work easier: use your browser’s Developer Tools to preview responsive layouts. On Windows, press Ctrl+Shift+I; on Mac, press Command+Option+I (on Firefox, Command+Option+J also works). This changes your page view so you can preview on specific devices—e.g., iPhone 14, iPad Air, or Surface Pro—while you’re still on your computer. As you scroll, you’ll see how the dynamic block, slider block, and image/text blocks appear on those devices. This is really helpful during design so you don’t have to keep checking your phone. On full desktop view, you’ll also notice one block is narrower than the others; I’ll show how to do that shortly. Using the same block type in different ways can completely change the look of a page.
Quick Design Philosophy (Color & Page Types)
I don’t want to burden you with design theory, but here’s a peek into our thinking. In this A+ Storage example, the primary colors are red and white. On the homepage, we mix red and white backgrounds. On a top-level page like “Features,” most backgrounds are red; on a subpage like “Storage Tips,” most are white. You don’t have to follow this, but Jason Stickler and I use it to visually break up sections and give primary vs. subpages slightly different feels while keeping a consistent overall look. It’s a subtle, almost subconscious way to categorize pages visually.
Block Types Overview (Skeleton View)
Let’s jump back into Blocks. I created a page called Examples for this webinar to show different block types. To see the options, click Add Block, then Add Block Row, and then Edit Block. This brings up the Skeleton view—the list of all block types you can add: text and image blocks (text left/image right, image left/text right), full image with text overlay (parallax), full-screen text (text over a colored background), three-column blocks, a slider block (used on homepages for reviews, locations, offers, features, etc.), a fixed/special image block (full image, no text), and a blog block (shows the three most recent blog posts). You can add any of these anywhere.
Three-Column Blocks (Narrow vs. Full Width)
Let’s start with the three-column blocks. You can use these for many purposes. If you have a text-heavy page and want to add FAQs or storage tips and break up the layout, these work well. In this example, we’re using a three-column block to show the simple 1-2-3 rental process for Closet Storage: choose your unit, pay for your unit, sign your lease. I’ve stacked two three-column blocks to show the difference between wide and narrow widths. To toggle this, open the block editor and use the Full Width toggle at the top. This one change can dramatically affect the look. You might make most blocks full width, then occasionally use a narrow block to create a dynamic rhythm down the page. These blocks can contain icons (SVGs), PNGs, or photos—use what fits your content.
Image/Text Blocks (Sizing, Parallax, Aspect Ratios)
Below that, I’ve stacked a few image/text blocks. The first, on the left, uses a thumbnail image—but it appears large because I uploaded a 1600×900 image. In Blocks, larger images render larger by design. On the right, the same block uses a parallax image, but the source image was only 300 pixels wide, so it displays smaller. While you can’t directly set image width inside the editor, you control it by the dimensions of the image you upload.
In preview, you’ll see the first block with the larger image, then a full-width block with a smaller image, and then a narrow-width version of the same block. In that narrow version, the parallax window’s orientation appears closer to a 4:5 ratio, whereas the full-width version reads closer to a wider aspect. Below, I’ve set the image to static (no parallax) for a different feel. On the left, the text runs longer than the image height, so I increased the image size and changed its aspect ratio to 4:5 (800×1000). The result is a balanced block with the same base layout but a completely different look. On a phone, you won’t notice the difference between wide and narrow as much, but you will see the effect of static vs. parallax and different image ratios.
Slider Blocks (Reviews & Galleries)
Next, the slider blocks. Here I’m using one for reviews and one for images. Customers use sliders for many functions. For example, Avid Storage uses a slider on the Destin location to highlight property photos. To compare wide vs. narrow, preview the same slider in both widths and see which fits your page flow.
Fixed/Special Image Blocks (Edge Blending)
Another frequently used option is the fixed/special image block—an image-only block. Use it for promotions, events, or any pre-designed graphic you want to place anywhere (including at the top). In one example, the image fades into black on the sides; in another, it doesn’t. Since you can set the block background to any color, you can blend edges of the image to match the background for a seamless look. On the live page, the blended version looks like one continuous image; the non-blended one has a clear edge and reads more like an image laid over a background. You can create the blend in design tools like Adobe XD or Photoshop by placing gradient layers (black to transparent) over the image edges before exporting.
There are other ways customers use the special image block. Move In uses it as a graphic title/header where the text is baked into the image. A+ Storage uses a special image block mid-homepage to highlight premium car storage; there, we blended the edge into black for a smoother transition.
Full-Screen Text Blocks (Breaking Up Long Content)
We also use a full-screen text block often. For example, on the homepage we used it above the blog block as a title band. In the editor, you can set the background color, edit text, and place pictures above or below the text (icons or full images). On Move In’s Storage Checklist page—a very text-heavy page—they break content up with a headline/body text block, then image-left/text-right, then text-left/image-right, then a special image block that links to another page, more text, and finally a full-image block with text overlay. Yes, for SEO you could drop one massive wall of text into a single block, but customers won’t engage with that. Breaking the content into different block types makes the page more inviting and serves both SEO and user experience.
Image Guidelines & Consistency (Knowledge Base)
Now, about images. This can get into the weeds, so instead of diving too deep here, I’ll point you to the Get Help section on the left, which opens our Knowledge Base. Last week we added Image and Video Guidelines. That article covers best practices for adding images and header video: suggested ratios like 16:9 for landscape and 4:5 for portrait (not mandatory, but helpful for consistency). Consistency is key. For example, in the dynamic block that shows four side-by-side images, if three are 16:9 and one is 16:11, that one will be taller and throw off the layout. Keep ratios consistent—especially on location pages and in sliders. The article also covers how to save/optimize images. For the special image block, you can upload almost any size, but if you want the image to run nearly edge-to-edge on desktop, saving around 2000 pixels wide works well (that’s the one time we recommend such a large width). Do consider how it will look on mobile; a very wide, short image with ALT text will be scaled down a lot on phones. Use Developer Tools to preview different devices and adjust accordingly.
📎Blocks Image & Video Guidelines (Cheat Sheet)