# Cards

### Introduction

The **Cards Widget** in **ModernPress** allows you to showcase information in a stylish and visually appealing way. Whether you need to display services, portfolio items, or blog highlights, this widget provides flexible layouts with extensive customization options.

***

**Key Features:**

\
✅ 5 Unique Layouts

✅ Fully Responsive Design

✅ Customizable Colors, Typography, and Spacing&#x20;

✅ Image, Title, Description, and Button Options&#x20;

✅ Hover Effects and Animations

***

### Adding the Cards Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.

{% endstep %}

{% step %}
Edit a page with **Elementor**.

{% endstep %}

{% step %}
Search for **"Cards"** in the **ModernPress Widgets** panel.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FTmTh3PnyPOpU3LDA1Osm%2FScreenshot%202025-02-14%20151518.png?alt=media&#x26;token=db6a2ef4-ee8a-463a-aa57-97ceda227043" alt=""><figcaption></figcaption></figure>

{% endstep %}

{% step %}
Drag and drop the widget into your section.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FMw3Fq78dPxVk7PNNRH9f%2FScreenshot%202025-02-14%20151543.png?alt=media&#x26;token=bbd9c5ca-3073-4cfe-adbe-2ba5b75aa93c" alt=""><figcaption></figcaption></figure>

{% endstep %}
{% endstepper %}

***

### Layouts Overview

The **Cards Widget** comes with 5 different layouts, each designed for various use cases.

#### Layout 1 - Classic Card

📌 Image at the top, followed by title, description, and button.\
🎨 Best for **services, portfolio items, and blog previews**.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FQJbK5WzgUOB7VcT7JKnB%2FScreenshot%202025-02-14%20144102.png?alt=media&#x26;token=4e5cb62b-d5ec-4d94-bf51-501b62ee2f42" alt=""><figcaption></figcaption></figure>

#### Layout 2 - Side by Side

📌 Image on one side, content on the other.\
🎨 Perfect for **team members, testimonials, or featured content**.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FTq8UsM5324pCTaLb9rQd%2FScreenshot%202025-02-14%20144113.png?alt=media&#x26;token=c53ebcf7-55f9-4129-892e-2a38609f1c8d" alt=""><figcaption></figcaption></figure>

#### Layout 3 - Image Overlay

📌 Background image with text overlay.\
🎨 Ideal for **highlighting key content with a modern touch**.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FxxB7THDvv3oN3X5RVnJ6%2FScreenshot%202025-02-14%20144131.png?alt=media&#x26;token=262b16ae-4067-4b49-8531-2e6cbd6e7367" alt=""><figcaption></figcaption></figure>

#### Layout 4 - Minimalist Card

📌 Simple design with focus on text and CTA button.\
🎨 Works well for **pricing tables, features, and announcements**.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FM3266yXZ4hCps8hRrBkC%2FScreenshot%202025-02-14%20144147.png?alt=media&#x26;token=421646ec-258c-4ac2-bcf6-ed03bbba3e52" alt=""><figcaption></figcaption></figure>

***

### Customization Options

#### Content Settings

📝 **Title & Description** – Add and format the main text.\
📸 **Image** – Upload an image for the card.\
🔗 **Button** – Set the button text, link, and styling.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2F6fSUBVuQKmTk9wK38R3A%2FScreenshot%202025-02-14%20150241.png?alt=media&#x26;token=b3672bb5-496a-49ca-bd7a-e08f8360839d" alt=""><figcaption></figcaption></figure>

#### Style Settings

🎨 **Colors** – Customize text, background, and hover colors.\
🔠 **Typography** – Adjust font size, weight, and spacing.\
📏 **Spacing** – Control margins and paddings for perfect alignment.

<figure><img src="https://2550328814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIteypVaQpFPmP1Z8bTuN%2Fuploads%2FqE4JeDX0ws1qTOcuABCR%2FScreenshot%202025-02-14%20150309.png?alt=media&#x26;token=5a67c6e3-cd7a-4efb-8aaf-1905ab8b70a5" alt=""><figcaption></figcaption></figure>

#### Advanced Features

✨ **Hover Effects** – Choose from multiple hover animations.\
📱 **Responsive Controls** – Adjust styles for mobile, tablet, and desktop.

***

### FAQs

<details>

<summary>Can I use different layouts on the same page?</summary>

Yes! You can add multiple instances of the **Cards Widget**, each with a different layout.

</details>

<details>

<summary>How do I change the hover effect?</summary>

In the **Style** tab, look for **Hover Effects** and select your preferred effect.

</details>

***

### Need Help?

If you have any questions or need support, feel free to reach out at <support@modernpress.com>.
