The Search Results Block displays WordPress search results in a customizable, responsive layout. This Pro block is perfect for custom search result templates that you can create with our DigiFusion theme and its Pro version, allowing you to design beautiful search pages that match your site’s aesthetic.
Adding the Search Results Block
Navigate to the search results page template or any page where you want to display search results. Click the block inserter (+) and search for “Search Results” in the DigiBlocks Theme category. The block displays example content in the editor to show how search results will appear on the frontend.
Search Configuration
Search Settings
Control the basic search functionality through the Search Settings panel:
Posts Per Page – Set how many search results to display per page (1-20)
No Results Text – Customize the message shown when no search results are found
Display Heading – Toggle to show or hide the search results heading
Heading Text – Customize the text for the search results heading when enabled
Show Pagination – Enable pagination to navigate through multiple pages of results
Pagination Alignment – Choose left, center, or right alignment for pagination controls
Layout Options
Post Style
Select between two layout formats:
Grid Layout – Displays results in a responsive grid with customizable columns
List Layout – Shows results in a vertical list format with images beside content
Grid Configuration
When using grid layout, control the column structure:
Columns – Set different column counts for desktop (1-6), tablet (1-4), and mobile (1-2)
Item Spacing – Adjust the gap between search result items (0-80px)
Card Style
Enable card styling to display results with background colors, borders, and shadows:
Card Style Toggle – Activates card-based design with enhanced visual separation
Content Display
Featured Image Settings
Display Featured Image – Show or hide post featured images in search results
Image Size – Choose from thumbnail, medium, large, or full size images
Title and Meta Options
Display Title – Control whether post titles appear in search results
Display Meta – Enable meta information display with sub-options:
- Show Author – Display the post author name
- Show Date – Include the publication date
- Show Post Type – Show whether the result is a post, page, or custom post type
Content Configuration
Display Excerpt – Show post excerpts in search results
Excerpt Length – Set the number of words to display in excerpts (5-100 words)
Display Read More Button – Add action buttons to search results
Read More Text – Customize the text for the read more button
Color Customization
Normal State Colors
Set default colors for all search result elements:
Heading Color – Color for the search results heading
Title Color – Color for individual result titles
Excerpt Color – Color for excerpt text
Meta Color – Color for author, date, and post type information
No Results Color – Color for the no results message
Button Background – Background color for read more buttons
Button Text – Text color for read more buttons
Pagination Background – Background color for pagination buttons
Pagination Color – Text color for pagination
Pagination Active Background – Background color for current page indicator
Pagination Active Color – Text color for current page indicator
Hover Effects
Configure color changes for interactive elements:
Title Hover Color – Title color when hovering over links
Meta Hover Color – Meta information color on hover
Button Background Hover – Button background color on hover
Button Text Hover – Button text color on hover
Card Styling Colors
When card style is enabled, additional color options become available:
Card Background – Background color for result cards
Card Border – Border color for result cards
Typography Controls
Heading Typography
Style the search results heading:
Font Family – Select from Google Fonts library
Font Size – Responsive sizing for desktop, tablet, and mobile
Font Weight – Choose from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with responsive controls
Letter Spacing – Adjust character spacing
Title Typography
Configure individual result titles:
Independent font controls separate from heading styling
Responsive font sizing across devices
Custom font weight and style options
Meta Typography
Style author, date, and post type information:
Smaller default sizing for subtle appearance
Responsive controls for optimal readability
Content Typography
Control excerpt and general content styling:
Balanced sizing for readability
Responsive adjustments for different screen sizes
Button Typography
Style read more buttons independently:
Custom font sizing and weight
Consistent spacing and alignment
Spacing Configuration
Element Spacing
Padding – Internal spacing around the entire search results container
Margin – External spacing around the search results block
Image Margin – Gap between featured images and content (1-100px)
Content Margin – Spacing between content elements like title, meta, and excerpt (1-100px)
Button Padding – Internal spacing within read more buttons
All spacing controls include responsive settings for desktop, tablet, and mobile devices.
Border and Radius Settings
Image Styling
Image Border Radius – Round the corners of featured images with pixel or percentage values
Button Styling
Button Border Radius – Customize read more button corner rounding
Card Enhancement
When card style is enabled, additional border options appear:
Card Border Style – Choose from none, solid, dashed, dotted, or double borders
Card Border Width – Set thickness for each border side independently
Card Border Radius – Round card corners with responsive controls
Card Shadow – Add drop shadows with normal and hover states including:
- Horizontal and vertical offset
- Blur and spread radius
- Shadow color with transparency
- Separate hover shadow effects
Animation Effects
Add entrance animations to search results:
Choose from fade, slide, zoom, and bounce animations
Preview animations directly in the editor
Animations trigger when users scroll to the search results
Advanced Settings
Visibility Controls
Hide search results on specific devices:
Hide on Desktop – Remove from desktop view
Hide on Tablet – Hide on tablet devices
Hide on Mobile – Exclude from mobile display
Additional Configuration
HTML Anchor – Create direct links to the search results section
Additional CSS Classes – Add custom classes for advanced styling
Responsive Design
All styling options include responsive controls for optimal display across devices. Adjust typography sizes, spacing, columns, and layout elements independently for desktop, tablet, and mobile screens to ensure search results look perfect on every device.
The block automatically adapts to WordPress search functionality, displaying actual search results on the frontend while showing example content in the editor for design purposes.