How to Use Blog Post Card Module on Hubspot DND Templates & Theme

Elevate your website's functionality with our versatile 'Blog Post Cards' module. This robust module empowers you to seamlessly showcase your blog posts in a captivating manner. Benefit from a wide array of customizable layouts, including the distinguished Full Width Featured Post Card, positioned at the top, complemented by two equally sized cards below. Alternatively, opt for the visually appealing Three Equal Width Post Cards layout, with the first card standing out as the featured post. For a sleek and minimalist presentation, choose the Three Simple Equal Width Post Cards layout, featuring effortlessly customizable spacing and background colors for both sections and cards. The possibilities are limitless with our module, allowing you to create a visually striking and engaging showcase of your blog content tailored to your brand's unique identity.

Blog Post Cards Module Documentation

The Custom Blog Post Cards Module in HubSpot allows you to showcase your blog posts in various styles and formats, giving you complete control over the appearance and functionality of the blog post cards. With this module, you can create visually stunning and engaging displays of your blog content on your HubSpot-powered website pages.

Features:

    • ➡️  Layout Options:
    • ✔️ Layout 1: Featured Card with Two Supporting Cards Below
    • ✔️ Layout 2: Featured Card with Two Supporting Cards in a Row
    • ✔️ Layout 3: Simple Three Cards in a Row
    • ➡️ Button Customization:
    • ✔️ Customize Button Text
    • ✔️ Button Styling (Colors, Borders, etc.)
    • ✔️ Button Spacing
    • ➡️ Author Name and Published Date:
    • ✔️ Enable/Disable Display of Author Name
    • ✔️ Enable/Disable Display of Published Date
    • ➡️ Card Customization:
    • ✔️ Card Background (Color or Image)
    • ✔️ Card Inner Spacing (Padding)
    • ✔️ Card Corner Radius (Rounded Corners)
    • ➡️ Headline Content Customization:
    • ✔️ Headline Content Width
    • ✔️ Headline Content Alignment
    • ✔️ Enable/Disable Headline Content
    • ✔️ Enable/Disable Headline CTA Button
    • ➡️ Main Section Customization:
    • ✔️ Main Section Background (Color or Image)
    • ✔️ Main Section Spacing (Margins)
    • ✔️ Main Section Inner Width

How to Use

  1. This versatile module is divided into two tabs, "Content" and "Style," allowing you to effortlessly customize and showcase your blog posts in a visually appealing manner. Each tab offers specific options for content-based customizations and style-related properties, providing you with the flexibility to curate a captivating blog post display that perfectly aligns with your brand identity.

    A.) Content Tab:

    Screenshot 2023-07-26 000948

  2.  

    In the "Content" tab, you can control the specific content elements of your blog post showcase using the following options:

    1. 1. Select the desired blog from which you want to retrieve posts.
    2. 2. Use the "Show blog posts by" dropdown to choose the sorting options, such as popularity, recency, or posts by tag.
    3. 3. Filter posts by selecting a tag from the "Select Tag" dropdown.
    4. 4. Adjust the number of posts to be fetched, with the default value set to 3.

    B.) Style Tab:

    Screenshot 2023-07-26 000708

    The "Style" tab offers a range of customization options to elevate the visual appeal of your blog post showcase with the following settings:

    1. 1. Personalize the section's background with colors or images to create a captivating backdrop for your content.
    2. 2. Define border properties, such as color, thickness, and style, to add visual distinction to the blog post cards.
    3. 3. Fine-tune the spacing between elements to achieve an optimal layout that enhances readability and visual aesthetics.
    4. 4. Customize the color properties, including text and button colors, to match your brand's identity and maintain consistency throughout the showcase.

    By leveraging the capabilities of both tabs, you can effortlessly create a captivating and engaging blog post showcase that leaves a lasting impression on your website visitors. Tailor each element to perfection, showcasing your blog content with style and elegance.

  • Tips and Recommendations

  • Experiment with different layouts and customization options to find the best fit for your website's design and branding.
  • Ensure that the images used in the blog post cards are high-quality and properly optimized for faster page loading.
  • Test the module on different devices and screen sizes to ensure responsiveness.

Support and Feedback

If you encounter any issues or have suggestions for improvements, please reach out to our support team at info@aicoderz.com. We value your feedback and are here to assist you.