Portfolio Cobbles

Estimated reading: 3 minutes 163 views

The Portfolio Cobbles widget displays portfolio projects in a dynamic cobble-style grid layout using Elementor. Unlike traditional grids, this layout allows portfolio items to appear in varying sizes, creating a visually engaging and modern masonry-style arrangement.

This widget is ideal for showcasing creative projects, photography portfolios, and design work where visual hierarchy and layout variation enhance the presentation. The cobble layout can optionally randomize item sizes to create a unique and dynamic appearance.

General Overview


The Portfolio Cobbles widget allows you to display portfolio items with control over:
  • Portfolio post queries and filtering
  • Cobble-style layout variations
  • Randomized large and small portfolio items
  • Displayed portfolio elements such as image, title, excerpt, and metadata
  • Overlay content and hover interactions
  • Read more button customization
  • Image, video, and media display inside portfolio items

Widget Controls


The widget settings are divided into several sections inside the Content tab in Elementor.

1. General Section

null
  • Extra Class: Add a custom CSS class for additional styling or advanced customization.

2. Query Section

null
  • Excerpt Length: Controls how many words are displayed in the portfolio excerpt.
  • Author: Filter portfolio items by selecting specific authors.
  • Categories: Select categories to include in the portfolio grid.
  • Exclude Categories: Select categories that should not appear in the portfolio grid.
  • Include Posts: Manually select specific portfolio posts to display.
  • Exclude Posts: Remove selected posts from the grid.
  • Order By: Sort portfolio items by ID, title, date, or other available options.
  • Order: Choose ascending or descending order.

3. Layout Section

null
  • Post Items: Drag-and-drop layout builder to enable or disable portfolio elements such as feature image, title, excerpt, read more button, categories, tags, and author.
  • Post Overlay Items Options: Enable or disable elements that appear in the overlay when hovering over an accordion item.
  • Post Overlay Items: Configure which elements appear inside the overlay.
  • Top Meta: Configure metadata displayed above the portfolio content such as categories, author, or date.
  • Bottom Meta: Configure metadata displayed below the portfolio content.
  • Post Heading Tag: Choose the HTML heading tag used for portfolio titles (H1–H6).

4. Read More Section

null
  • Read More Text: Customize the label for the read more button.
  • Icon: Add an icon to the read more button.
  • Icon Position: Choose whether the icon appears before or after the text.
  • Icon Spacing: Adjust the spacing between the icon and the button text.

Styling Options


All visual elements of the Portfolio Cobbles widget can be customized using Elementor’s Style tab.
  • Portfolio item background colors and hover styles
  • Typography for titles, excerpts, and metadata
  • Image borders, padding, and radius
  • Overlay backgrounds and blur effects
  • Overlay icon styling and hover states
  • Read more button styling and typography
  • Spacing, margins, and alignment controls

Summary


The Portfolio Cobbles widget provides a visually dynamic way to display portfolio projects using an irregular cobble-style layout. It supports:
  • Dynamic portfolio queries
  • Randomized cobble item sizes
  • Flexible drag-and-drop layout configuration
  • Media-rich portfolio items including images and videos
  • Overlay elements and hover interactions
  • Full styling customization through Elementor
This widget is ideal for creative portfolios, design showcases, and photography galleries where an organic, visually engaging layout enhances the presentation of projects.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Portfolio Cobbles

Or copy link

CONTENTS

Powered By EazyDocs