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

โœ… Image, Title, Description, and Button Options

โœ… Hover Effects and Animations


Adding the Cards Widget

1

Open your WordPress Dashboard.

2

Edit a page with Elementor.

3

Search for "Cards" in the ModernPress Widgets panel.

4

Drag and drop the widget into your section.


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.

Layout 2 - Side by Side

๐Ÿ“Œ Image on one side, content on the other. ๐ŸŽจ Perfect for team members, testimonials, or featured content.

Layout 3 - Image Overlay

๐Ÿ“Œ Background image with text overlay. ๐ŸŽจ Ideal for highlighting key content with a modern touch.

Layout 4 - Minimalist Card

๐Ÿ“Œ Simple design with focus on text and CTA button. ๐ŸŽจ Works well for pricing tables, features, and announcements.


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.

Style Settings

๐ŸŽจ Colors โ€“ Customize text, background, and hover colors. ๐Ÿ”  Typography โ€“ Adjust font size, weight, and spacing. ๐Ÿ“ Spacing โ€“ Control margins and paddings for perfect alignment.

Advanced Features

โœจ Hover Effects โ€“ Choose from multiple hover animations. ๐Ÿ“ฑ Responsive Controls โ€“ Adjust styles for mobile, tablet, and desktop.


FAQs

Can I use different layouts on the same page?

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

How do I change the hover effect?

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


Need Help?

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

Last updated