Smithworks Theme

Use SW Pillar Slides when visitors should switch among topics using tabs, pills, or buttons while the image and supporting content change with the selection. It works well for industry, service, or capability overviews that need more than one visual story in the same section. Use SW Pillar Section for one static image beside copy. Use SW Pillar Accordion when the content should open in accordion panels while the image changes.

Prefer a 3:2 ratio so peeks match. A good default is 900×600; use 1200×800 for sharper retina or a wider image column. Upload one primary image—the module serves smaller CDN sizes automatically. Set meaningful alt text on each slide image.

Review SW Pillar Slides for the matching settings and examples.

Use a side-by-side layout, then Style → Slide settings → Image → turn on Enable peek. Adjust gap, opacity, and fade there. Optional Peek first image on last slide shows slide 1 in the peek on the last slide; clicking still returns to the start (not a continuous loop). Stacked layout does not show peek.

Review SW Pillar Slides for the matching settings and examples.

Open Footer Content in the SW Cards module and add each call to action under Buttons. Enter the button text and link, confirm the button style, and publish the page. Buttons saved only in the older Add Button 1 or Add Button 2 fields do not move into the current Buttons list automatically, so you need to re-enter those values. If the page already uses the current Buttons list, check that every button has complete text and link settings.

Use the Space Above Buttons (px) field for the button group you are editing. The path and starting value differ by module:

• SW Hero: Content → Space Above Buttons (px). The default is 0.
• SW Cards: Content → Heading Button Repeater or Footer Content. Each group has its own Space Above Buttons (px) field, and the default is 15.
• SW Testimonials: Content → Space Above Buttons (px). The default is 0.

Change only the group that needs more separation, then preview the page at desktop and mobile sizes.

Review Module Settings and Background Standards for the matching settings and examples.

A newly placed SW Hero may include a light sample Outer color and Aurora motion so the section is visible and styled when you first add it. Those are starting settings, not a required design. Open the Outer Background and Aurora controls to replace them with choices that match your brand. Heroes already saved on a page keep their existing settings.

New SW Testimonials sample content uses distinct SW Defaults portraits for each author so demos are clearer and more accessible.

Existing pages keep the images already saved on each testimonial. Swap portraits anytime under each item’s author image field; File Manager also has the shared SW Defaults set for marketers to browse.

SW Cards asks HubSpot to deliver a responsive image close to the size the card needs instead of sending the full original file to every screen. That reduces download weight while keeping the image appropriate for its displayed size. Start with a sharp, compressed source image in a suitable web format and avoid uploading dimensions far beyond the card's likely use. If you are troubleshooting an older sample image, replace or reselect that image separately; it is not part of normal responsive resizing.

SW Pillar Slides displays each image in a column rather than across the full browser width, so it requests an image size suited to that space. This reduces the image file size while keeping it sharp on modern screens. A 3:2 source image, such as 900 × 600 or 1200 × 800 pixels, is a practical starting point. If the important part of the image is cut off, adjust the image position or choose a source image with more room around the subject.

Largest Contentful Paint, or LCP, measures how long it takes the largest visible content element to appear. You need page measurements to identify that element; the module name alone cannot tell you. SW Pillar Slides avoids giving its first slide image the same loading priority as a likely hero image, which helps keep the two images from competing as the page opens. Check real-user performance data in PageSpeed Insights or Search Console when available, then use a page-speed test to identify the LCP element. If the test points to another cause, review image delivery, theme styling, third-party tools, and consent tools with your website administrator rather than assuming the slide image is responsible.