Content block – WP
This page serves as a visual guide to the diverse image and media blocks available in WordPress Gutenberg, highlighting their unique features and styling capabilities. It includes examples of how they can be customized with filters, shapes, overlays, and layouts.
These blocks are great ways to combine text and media, design engaging sections, and create visually dynamic pages. Whether you’re building portfolios, blogs, or business sites, this page offers inspiration and practical examples to enhance your website’s aesthetic and functionality.
Image
The Image Block allows you to display single images and customize their appearance using filters and shapes for added style.
Gallery
This block is used to display a collection of images in a visually appealing grid or layout. It’s a great way to showcase photo albums, portfolios, or collections of images that complement your content.
You can upload or select images from your Media Library, customize columns, image size, spacing, and add a “click to expand” feature to view larger versions.
Image Options
Customize the shape and style of your images to fit your design needs.
Shape Style:
- Standard: Keep the original rectangular shape of your image for a clean and classic look.
- Rounded Corners: Add smooth, rounded edges to your images for a softer appearance.
- Circular Images: Transform your images into perfect circles, ideal for profile pictures, logos, or creating a unique visual style.
Grayscale:
Convert your images to grayscale to give them a timeless, elegant, or vintage feel. This is great for creating a unified color scheme or a professional, muted aesthetic.
Drop Shadow:
Add depth to your images with customizable drop shadows. See center images.
Video Embed
This block is used to display videos from external platforms (e.g., YouTube, Vimeo, or other supported sources) directly on your site without hosting the video files yourself. This block allows you to enhance your content with multimedia, making posts or pages more engaging and dynamic. Simply paste the video URL into the block, and the editor will automatically embed the video player.
This block is great for sharing tutorials, presentations, entertainment, or any video content that complements your site’s message. Additionally, it is built to support responsive design, ensuring the video looks great on any device or screen size.
Podcast Embed
The Podcast Embed Block allows you to easily integrate podcasts from popular platforms (like Spotify, Apple Podcasts, or others) directly into your posts or pages. With this block, you can display an audio player where visitors can listen to podcast episodes without leaving your site.
To use the block, simply paste the podcast’s URL or embed code into the block, and it will automatically render the player. This is a great way to share interviews, storytelling, or audio content, making your website more engaging and interactive for your audience.
This block is perfect for showcasing content side-by-side, such as an image with a description, a video with explanatory text, or any combination of visual and written content.
Media + Text
This block is designed for creating visually balanced sections that combine media (like an image, video, or GIF) with accompanying text.
You can easily adjust the alignment of the media and text (left or right), set custom widths, and even add a background color for emphasis. You can easily adjust the alignment of the media and text (left or right), set custom widths, and even add a background color for emphasis.
The Cover block
Cover
This block is a versatile design element used to create visually striking sections with a background image or video, overlaid with text or other content. It’s perfect for creating banners, headers, or call-to-action sections that grab your visitors’ attention.
You can customize the block by adjusting the background opacity, adding overlays, choosing alignment options, and even setting a fixed background for a parallax effect. The Cover Block is ideal for highlighting key messages or adding a bold, professional look to your pages or posts.