Post Grid with Background
—
### 1. **Enable Post Grid in WPBakery**
– Go to your **WordPress Admin** > **WPBakery Page Builder** > **Role Manager**.
– Ensure the **Post Grid** module is enabled for the post type you want.
—
### 2. **Create a Post Grid**
1. **Add Post Grid Element**:
– Open the **WPBakery Page Builder** editor on your page or post.
– Click on the `+` to add a new element.
– Search for and select **Post Grid**.
2. **Configure Post Grid**:
– **Data Source**: Choose the post type you want (e.g., **Posts** or a Custom Post Type).
– **Grid Elements**: Choose **Title**, **Excerpt**, or other details to display.
—
### 3. **Customize Post Grid Layout**
1. **Edit Post Grid Template**:
– Click on **Template** in the Post Grid settings and select a layout closest to your design.
– If none of the default templates matches, create a **Custom Template**:
– Go to **WPBakery Page Builder > Grid Builder**.
– Add a new template and design the grid with **Title**, **Excerpt**, and overlaying elements.
2. **Set Background Image**:
– In your custom template:
– Add a **Row** or **Column**.
– Go to **Design Options** > **Background** > Select **Featured Image** as the background.
3. **Text Overlay**:
– Inside the row/column, add a **Text Block** element for the title, excerpt, and button.
– Use **CSS** to style and position the text over the image (center-align or bottom position).
—
### 4. **Custom CSS for Styling**
Add the following CSS to your **WPBakery** Custom CSS section or in your theme:
.vc-post-grid .vc_grid-item {
position: relative;
background-size: cover;
background-position: center;
color: white; /* Text color */
}
.vc-post-grid .vc_grid-item .grid-content {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.5); /* Optional: dark overlay */
padding: 15px;
border-radius: 5px;
}
.vc-post-grid .vc_grid-item h4 {
font-size: 20px;
margin: 0;
}
.vc-post-grid .vc_grid-item p {
font-size: 16px;
}—
### 5. **Preview and Adjust**
– Save your changes and preview the grid.
– Tweak the layout, text position, and background overlay as needed.
This will give you a **Post Grid** with:
– **Featured Image** as the background.
– **Overlayed text** similar to the uploaded design.
—
### 1. **Enable Grid Builder and Templates**
Sometimes the **Grid Builder** option is disabled. To enable it:
– Go to **WPBakery Page Builder** > **Role Manager**.
– Ensure that the "Custom Grid Builder" is enabled for your desired post type (e.g., posts, pages, etc.).
—
### 2. **Manually Add a Background via Design Options**
If the template option is unavailable, you can style the grid items using a custom approach:
#### Steps:
1. **Create a Row/Column**:
– Add a **Row** element in WPBakery.
– Inside the row, use the **Post Grid** or add a **Single Image** with text overlays.
2. **Set the Background Manually**:
– Edit the **Row** or **Column**.
– Under the **Design Options**, go to **Background**.
– Choose **Featured Image** dynamically using plugins like **Advanced Custom Fields (ACF)** or **Elementor Addons**.
—
### 3. **Use Shortcodes for Custom Post Grids**
If WPBakery's built-in Post Grid templates are missing, you can use a **third-party plugin** like:
1. **Essential Grid**: A powerful plugin to create grids with more flexibility.
2. **Post Grid Plugin**: Free, simple plugin for grid layouts.
These plugins allow you to:
– Set the **featured image** as the background.
– Overlay text (like title and excerpt).
—
### 4. **Custom CSS for Post Grid Layout**
If the grid exists but lacks dynamic styling:
Add this custom CSS to style grid items directly:
.vc_grid-item {
position: relative;
background-size: cover;
background-position: center;
color: #fff; /* Text color */
padding: 20px;
}
.vc_grid-item .grid-content {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.6); /* Dark overlay */
padding: 10px;
text-align: left;
color: #fff;
}
.vc_grid-item h4 {
font-size: 20px;
margin: 0 0 10px;
}
.vc_grid-item p {
font-size: 16px;
line-height: 1.4;
}—
### 5. **Enable WPBakery Grid Builder (Alternative Solution)**
If you are using an older version of WPBakery:
– Update WPBakery Page Builder to the latest version.
– Verify if the **Grid Builder** feature has been included in your license plan.
—
### 6. **Rebuild Custom Post Grid Using Custom Code**
If nothing else works and you are comfortable with PHP, you can create a custom post grid in your theme:
**Example Code** to display featured image and title dynamically:
Add this in your theme's template file (e.g., `index.php`):
<?php
$args = array('post_type' => 'post', 'posts_per_page' => 6);
$query = new WP_Query($args);
if ($query->have_posts()) : ?>
<div class="custom-post-grid">
<?php while ($query->have_posts()) : $query->the_post(); ?>
<div class="grid-item" style="background-image: url('<?php echo get_the_post_thumbnail_url(); ?>');">
<div class="grid-content">
<h4><?php the_title(); ?></h4>
<p><?php echo wp_trim_words(get_the_excerpt(), 15); ?></p>
</div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php endif; ?>**CSS** to style it:
.custom-post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
position: relative;
background-size: cover;
background-position: center;
height: 300px;
color: white;
}
.grid-content {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}This code creates a dynamic post grid with featured images as backgrounds and overlaid text.
—
### Summary
If WPBakery's **Template option** is not showing, use:
1. **Design Options** for manual background images.
2. **Custom CSS** to overlay text.
3. Third-party plugins like **Essential Grid**.
4. Custom code with WordPress loops for full control.
Let me know if you need help implementing any of these! 🚀
—
## Steps to Create a Custom WPBakery Element
### 1. **Register the New Element**
Add the following code to your theme's `functions.php` file or a custom plugin file:
// Register Custom WPBakery Element
add_action('vc_before_init', 'custom_post_number_element');
function custom_post_number_element() {
vc_map(array(
'name' => __('Custom Post Grid', 'text-domain'),
'base' => 'custom_post_grid',
'description' => __('A custom element to show posts with a selected number', 'text-domain'),
'category' => __('Content', 'text-domain'),
'params' => array(
array(
'type' => 'textfield',
'heading' => __('Number of Posts', 'text-domain'),
'param_name' => 'number_of_posts',
'value' => '5',
'description' => __('Enter the number of posts to display.', 'text-domain'),
),
array(
'type' => 'dropdown',
'heading' => __('Order By', 'text-domain'),
'param_name' => 'order_by',
'value' => array(
__('Date', 'text-domain') => 'date',
__('Title', 'text-domain') => 'title',
__('Random', 'text-domain') => 'rand',
),
'description' => __('Select the order of posts.', 'text-domain'),
),
array(
'type' => 'dropdown',
'heading' => __('Order', 'text-domain'),
'param_name' => 'order',
'value' => array(
__('Descending', 'text-domain') => 'DESC',
__('Ascending', 'text-domain') => 'ASC',
),
'description' => __('Select ascending or descending order.', 'text-domain'),
),
),
));
}—
### 2. **Create the Shortcode Callback**
Add the following code in the same `functions.php` file to define the shortcode logic for the custom element:
// Shortcode Logic for Custom Post Grid
function custom_post_grid_shortcode($atts) {
// Extract attributes
$atts = shortcode_atts(array(
'number_of_posts' => '5',
'order_by' => 'date',
'order' => 'DESC',
), $atts);
// WP Query to fetch posts
$query_args = array(
'post_type' => 'post',
'posts_per_page' => intval($atts['number_of_posts']),
'orderby' => sanitize_text_field($atts['order_by']),
'order' => sanitize_text_field($atts['order']),
);
$query = new WP_Query($query_args);
// Start output buffering
ob_start();
// Output posts in grid format
if ($query->have_posts()) {
echo '<div class="custom-post-grid">';
while ($query->have_posts()) {
$query->the_post();
?>
<div class="grid-item" style="background-image: url('<?php echo get_the_post_thumbnail_url(); ?>');">
<div class="grid-content">
<h4><?php the_title(); ?></h4>
<p><?php echo wp_trim_words(get_the_excerpt(), 15); ?></p>
</div>
</div>
<?php
}
echo '</div>';
wp_reset_postdata();
} else {
echo '<p>No posts found.</p>';
}
return ob_get_clean();
}
add_shortcode('custom_post_grid', 'custom_post_grid_shortcode');—
### 3. **Add CSS for Grid Styling**
Add the following CSS to your theme's `style.css` file for styling the grid:
.custom-post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.custom-post-grid .grid-item {
position: relative;
background-size: cover;
background-position: center;
height: 300px;
color: white;
border-radius: 5px;
overflow: hidden;
}
.custom-post-grid .grid-content {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
text-align: left;
color: #fff;
}
.custom-post-grid h4 {
font-size: 20px;
margin: 0 0 10px;
}—
### 4. **Using the Custom Element**
1. Go to **WPBakery Page Builder**.
2. Add a new element.
3. Search for the newly created element **Custom Post Grid**.
4. Set the **Number of Posts** and **Order By** options.
5. Save and preview the page.
—
### How It Works:
– The user can input the number of posts to display.
– Select the order (ascending/descending) and the order field (date, title, random).
– Posts are displayed in a grid with the featured image as the background and overlaid text.
—
Let me know if you need further customization! 🚀
—
### Updated CSS for Flexbox 3-Column Layout
Add this to your theme's `style.css` file:
.custom-post-grid {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to the next line */
gap: 20px; /* Spacing between columns */
}
.custom-post-grid .grid-item {
flex: 1 1 calc(33.333% - 20px); /* 3 columns with gap adjustment */
max-width: calc(33.333% - 20px); /* Ensure consistent width */
position: relative;
background-size: cover;
background-position: center;
height: 300px; /* Fixed height for grid items */
color: white;
border-radius: 5px;
overflow: hidden;
}
.custom-post-grid .grid-content {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
padding: 10px;
text-align: left;
color: #fff;
border-radius: 5px;
}
.custom-post-grid h4 {
font-size: 20px;
margin: 0 0 5px;
}
.custom-post-grid p {
font-size: 14px;
line-height: 1.4;
margin: 0;
}—
### How This Works:
1. **`flex: 1 1 calc(33.333% – 20px)`**:
– Makes each grid item take up one-third of the container width minus the gap.
– The `flex: 1 1` ensures it remains responsive.
2. **`flex-wrap: wrap`**:
– Ensures the items move to the next row if the container width is exceeded.
3. **Responsive Layout**:
– Adjusts cleanly as the screen size reduces.
—
### Responsive Adjustments (Optional)
If you want a two-column layout for tablets and a single column for mobile devices, add these media queries:
@media (max-width: 768px) {
.custom-post-grid .grid-item {
flex: 1 1 calc(50% - 20px); /* Two columns on smaller screens */
max-width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.custom-post-grid .grid-item {
flex: 1 1 100%; /* Single column on very small screens */
max-width: 100%;
}
}—
### Summary
– The layout uses **flexbox** to create a 3-column responsive design.
– The responsive adjustments ensure that the grid adapts on smaller screens.
Let me know if you need further tweaks! 🚀