The Portfolio block: Style and Tools
The Style panel controls how each project card looks; Tools holds Custom CSS and the shortcode.
Media
The Media group styles the project thumbnail and the overlay behind text placed on the image.
Open Style. Under Media you see the Thumbnail card and, when Text Position is Overlay, Boxed or Fade In, the Overlay card. The group is hidden in the List layout, which has no thumbnails.
Thumbnail
The switch on the card shows or hides thumbnails. Click the card for the options.
| Setting | Options | Default |
|---|---|---|
| Thumbnail Aspect Ratio | Default (4:3), Square (1:1), Landscape (16:9), Portrait (3:4), Auto (Natural Size), Custom | Default (4:3) |
| Width / Height | Appear for Custom: the two numbers of your own ratio, for example 5 and 4 | 5 : 4 |
| Thumbnail Fit | Cover, Contain, Fill, None, Scale Down | Cover |
| Border Type | Default (None), Solid, Dashed, Dotted, Double | Default (None) |
| Border Color | Appears when a border type is chosen | theme colour |
| Border Width | Appears when a border type is chosen, in pixels | 1 |
| Radius | Corner rounding; set all four corners at once or each one separately | 8 px |
How Thumbnail Fit treats an image that does not match the ratio:
| Fit | Result |
|---|---|
| Cover | Fills the frame, cropping the edges. Best for most grids |
| Contain | Shows the whole image, leaving empty bands |
| Fill | Stretches the image to the frame |
| None | Shows the image at its own size, cropped by the frame |
| Scale Down | Like Contain, but never enlarges a small image |
In Masonry the thumbnails keep their natural height, so the ratio setting has no effect there.
Overlay
The Overlay card appears for the Overlay, Boxed and Fade In text positions. Its switch turns the tint on or off.
| Setting | What it does |
|---|---|
| Overlay Color (Overlay, Fade In) | Tint behind the text. Pick a translucent color rather than a solid one, so the image stays visible |
| Overlay Color (Boxed) | Background of the boxed text chip |
Without your own colour, Overlay and Fade In use a 40% black wash and Boxed uses a near-white card.
Text
The Text group styles the three text elements of a card: title, category and date. Each has a card with a switch that shows or hides it and a window with its options.
Options shared by Title, Category and Date
| Setting | What it does | Default |
|---|---|---|
| Color | Text colour | inherits from your theme |
| Font Size | A number with a unit: px, %, em, rem, vw, or a custom value | title 1.1em, category and date 0.85em |
| Font Family | Theme Default or one of the built-in Google Fonts | Theme Default |
| Font Weight | Theme Default, Light (300), Regular (400), Medium (500), Semi Bold (600), Bold (700), Extra Bold (800) | Theme Default |
Leave a field empty to use your theme’s own value. That is usually the best starting point: the block then looks like the rest of the site.
Title
In the List layout the Title window also has Show Divider: a line under each row. It is on by default.
Date
| Setting | What it does | Default |
|---|---|---|
| Date Format | Site Default (from Settings → General), F j, Y, Y-m-d, m/d/Y, d/m/Y or Custom | Site Default |
| Custom Format | Appears for Custom. Uses PHP date format characters, for example M Y gives “May 2026” | empty |
| Show Divider | A short separator printed right before the date | Off |
| Divider Character | The separator itself | • |
| Spacing | Gap between Category and the date (and the divider, if it is on), in pixels | 8 |
Fonts
The Font Family list offers popular Google Fonts such as Inter, Roboto, Poppins, Montserrat, Work Sans, DM Sans, Playfair Display and others.
- Only the weights you choose are loaded. With Theme Default weight, regular and bold are loaded.
- Fonts load without blocking the page.
- The font of a hidden element is not loaded.
To serve the fonts from your own site instead of Google, turn on Portfolio → Settings → Performance → Load Google Fonts locally.
Colours for dark mode
When the site colour scheme in Portfolio → Settings → Color Scheme is anything other than Light, the Color field of Title, Category and Date gets two tabs: Light and Dark.
- Light is the colour for the light version of the site.
- Dark is used in dark mode. Leave it empty to use your theme’s own text colour.
Text placed on the image (Overlay, Boxed, Fade In) keeps the same colour in both modes, because its background is the image, not the page.
Interaction
The Interaction group adds movement to the cards: hover effects, scroll effects and video on thumbnails.
Hover effect
Choose what happens to the thumbnail when a visitor points at a card. Available in Grid, Masonry and Carousel when thumbnails are on.
| Effect | Result |
|---|---|
| None (default) | No change |
| Zoom In | The image slowly scales up inside its frame |
| Zoom Out | The image starts slightly enlarged and scales down |
| Grayscale → Color | Thumbnails are black and white and turn to colour on hover |
| Color → Grayscale | Thumbnails are in colour and turn black and white on hover |
| Darken Overlay | The image darkens on hover |
PRO add-ons add more effects to this list, for example Sheen.
Scroll effect
A scroll effect animates cards as they enter the screen. The list appears only when a scroll-effect add-on is installed (PRO, for example Reveal) and the layout is Grid, Masonry or List.
Featured video
Shows the project’s video on its thumbnail. Available when thumbnails are on, in every layout except List.
| Option | Result |
|---|---|
| Disable (default) | Only the image is shown |
| Play on Hover | The video plays while the visitor points at the card |
| Autoplay | The video plays as soon as the card is on screen |
Set the video itself on each project, in the Featured Video panel of the project editor. Projects without a video keep their image. Videos are muted and loop.
Keep the files short and small, a few seconds and a few megabytes at most: with Autoplay every visible card starts loading its video.
Tools
The Tools section under the four panels holds Custom CSS and the shortcode for this block.
Custom CSS
Write CSS that applies only to this one block, without touching other blocks on the page.
- Open Custom CSS.
- Write your rules using the word
selectorin place of the block’s own class. - For a larger editor, click Open in Modal.
1selector .sprw-portfolio__title {2 text-transform: uppercase;3 letter-spacing: 0.04em;4}56selector .sprw-portfolio__thumb {7 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);8}On the site, selector is replaced with a class unique to this block, so two blocks on one page can have different CSS.
Useful classes:
| Class | Element |
|---|---|
.sprw-portfolio__item | One project card |
.sprw-portfolio__thumb | Thumbnail frame |
.sprw-portfolio__title | Project title |
.sprw-portfolio__cat | Category |
.sprw-portfolio__date | Date |
.sprw-portfolio__toolbar | Row with filter, sorting and search |
.sprw-portfolio__filter | Category filter |
.sprw-portfolio__badge--locked | Lock badge on protected projects |
Shortcode
The shortcode shows the same block, with the same settings, anywhere shortcodes work: Elementor, the classic editor, widgets, theme templates.
- Set up the block the way you want it.
- Open Shortcode and click Copy Shortcode.
- Paste it where you need it. It looks like
[sparrow_portfolio_grid id="123"].
The shortcode stays in sync automatically as you keep editing the block: change the block and every place that uses the shortcode changes with it.
In a theme template, print it with <?php echo do_shortcode( '[sparrow_portfolio_grid id="123"]' ); ?>.
Still stuck? Write to support.
Contact