--- title: "Portfolio Showcase Theme – Complete Setup Guide - Devad SITE Guides — Devad" url: "https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41" --- [Skip to content](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#main-content) [![Devad.io](https://st1.devad.io/brand/logo-devad-white-mode-v3.png)](https://st1.devad.io) [Home](https://st1.devad.io) [POST](https://devad.io/post) [CHAT](https://devad.io/chat) [SITE](https://devad.io/site) [AI](https://devad.io/ai-agent) [Pricing](https://st1.devad.io/pricing) [](https://st1.devad.io/help#hc-search) [Agent view](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41.md) [Docs](https://st1.devad.io/help/en/docs/) [Guides](https://st1.devad.io/help/en/guides/) [Changelog](https://st1.devad.io/help/en/changelog/) Browse these Guides [11POST platform connections](https://st1.devad.io/help/en/guides/platform-connections/) - [Connect Discord Webhook to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/discord-webhook--243) - [Connect Slack Webhook to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/slack-webhook--244) - [Connect Bluesky Profile to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/bluesky-profile--245) - [Connect WordPress CMS to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/wordpress-cms--246) - [Connect Ghost CMS to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/ghost-cms--247) - [Connect OpenCart v3 Articles to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/opencart-v3-articles--248) - [Connect Dev.to Article to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/devto-article--249) - [Connect Mastodon Custom Instance to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/mastodon-custom--250) - [Connect Listmonk Campaign to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/listmonk-campaign--251) - [Connect Hashnode Post to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/hashnode-post--252) - [Connect Medium Post to Devad POST](https://st1.devad.io/help/en/guides/platform-connections/medium-post--253) [View all POST platform connections](https://st1.devad.io/help/en/guides/platform-connections/) [1Setup Basics](https://st1.devad.io/help/en/guides/setup-basics/) - [Installing CHAT Widget](https://st1.devad.io/help/en/guides/setup-basics/installing-chat-widget--192) [1WEB App](https://st1.devad.io/help/en/guides/web-devad-io-docs/) - [How to add analytics / pixel tools and customizing the design](https://st1.devad.io/help/en/guides/web-devad-io-docs/how-to-add-analytics-pixel-tools-and-customizing-the-design--24) [4Whatsapp](https://st1.devad.io/help/en/guides/whatsapp/) - [Connect WhatsApp Business With CHAT.devad.io](https://st1.devad.io/help/en/guides/whatsapp/connect-whatsapp-business-with-chat-devad-io--152) - [Setting Up Your 360dialog Account](https://st1.devad.io/help/en/guides/whatsapp/setting-up-your-360dialog-account--156) - [How to Connect WhatsApp Twilio to Chat.devad.io](https://st1.devad.io/help/en/guides/whatsapp/how-to-connect-whatsapp-twilio-to-chat-devad-io--158) - [WhatsApp voice & video calls](https://st1.devad.io/help/en/guides/whatsapp/whatsapp-voice-video-calls--231) [View all Whatsapp](https://st1.devad.io/help/en/guides/whatsapp/) [2More Integrations](https://st1.devad.io/help/en/guides/more-integrations/) - [More Integration: Slack, Opencart, Martfury, Zalo, Zendesk, Viber, Line, WeChat](https://st1.devad.io/help/en/guides/more-integrations/more-integration-slack-opencart-martfury-zalo-zendesk-viber-line-wechat--179) - [How To Export and Import Users in CHAT.devad.io Safely](https://st1.devad.io/help/en/guides/more-integrations/how-to-export-and-import-users-in-chat-devad-io-safely--242) [1Facebook Instagram Messenger](https://st1.devad.io/help/en/guides/facebook-instagram-messenger/) - [Messenger (Facebook & Instagram) Setup](https://st1.devad.io/help/en/guides/facebook-instagram-messenger/how-to-enable-messenger-facebook-instagram--162) [1Telegram](https://st1.devad.io/help/en/guides/telegram/) - [Telegram AI Agent & Chatbot Setup](https://st1.devad.io/help/en/guides/telegram/telegram-ai-agent-chatbot-setup--177) [1Twitter X](https://st1.devad.io/help/en/guides/twitter-x/) - [X (Twitter) AI Agent & Chatbot Setup](https://st1.devad.io/help/en/guides/twitter-x/x-twitter-ai-agent-chatbot-setup--175) [3Ecommerce Features](https://st1.devad.io/help/en/guides/ecommerce-features/) - [Shopify Integration](https://st1.devad.io/help/en/guides/ecommerce-features/shopify-integration--181) - [WordPress Integration](https://st1.devad.io/help/en/guides/ecommerce-features/full-wordpress-integration--183) - [OpenCart](https://st1.devad.io/help/en/guides/ecommerce-features/opencart--236) [1Lead Gen Features](https://st1.devad.io/help/en/guides/lead-gen-features/) - [AI Agent & Chatbot for Automated Appointment & Booking System](https://st1.devad.io/help/en/guides/lead-gen-features/ai-agent-chatbot-for-automated-appointment-booking-system--187) [2Setup & Basics](https://st1.devad.io/help/en/guides/setup-basics2/) - [How to connect to you domain with Landing page or Store](https://st1.devad.io/help/en/guides/setup-basics2/how-to-connect-to-you-domain-with-landing-page-or-whatsapp-store--16) - [Portfolio Showcase Theme – Complete Setup Guide](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41) [1Business Themes](https://st1.devad.io/help/en/guides/business-themes/) - [How to create Landing Page in less than one hour](https://st1.devad.io/help/en/guides/business-themes/how-to-create-landing-page-in-less-than-one-hour--8) [1Store Themes](https://st1.devad.io/help/en/guides/store-themes/) - [How to create Online Store in less than one hour](https://st1.devad.io/help/en/guides/store-themes/how-to-create-online-store-in-less-than-one-hour--30) ## Browse these Guides [Help Center](https://st1.devad.io/help/en/) › [Guides](https://st1.devad.io/help/en/guides/) › [Setup & Basics](https://st1.devad.io/help/en/guides/setup-basics2/) › Portfolio Showcase Theme – Complete Setup Guide Guides # Portfolio Showcase Theme – Complete Setup Guide Get your professional portfolio website up and running in minutes with our comprehensive setup guide. This document walks you through each essential step to create… devad Get your professional portfolio website up and running in minutes with our comprehensive setup guide. This document walks you through each essential step to create a stunning portfolio showcase that impresses clients and simplifies project management. ## Admin Role This section details the essential configuration steps required to activate and prepare Theme Twelve for portfolio management. It includes theme selection, category setup, and foundational content workflows tailored for the **Portfolio Owner** role. --- ## Step 1: Activating Theme Twelve ### Path 1: Selecting Theme Twelve from Available Templates ![](https://hub.devad.io/blogs/wp-content/uploads/sites/12/2026/01/image-94-1024x396.png) - Log in to your admin dashboard at [https://web.devad.io/user/](https://web.devad.io/user/) - Navigate to **Settings > Themes** via the sidebar menu - In the **Theme Settings** card, locate the **Theme Twelve** preview tile (labeled “Theme Twelve”) - Click the radio button associated with **home_twelve** - Scroll to the bottom of the form and click **Update** **Note:** Only one theme can be active at a time. Activating Theme Twelve will immediately apply its layout, styles, and portfolio-specific features across the frontend. --- ## Step 2: Managing Portfolio Categories Portfolio categories are used to group and filter projects on the public portfolio page. Proper categorization enhances visitor navigation and SEO structure. ### Path 1: Adding a New Portfolio Category ![](https://hub.devad.io/blogs/wp-content/uploads/sites/12/2026/01/image-95-1024x473.png) - From the dashboard sidebar, go to **Portfolio > Category** - Click the **Add Portfolio Category** button (top-right corner) - In the modal form, complete the following fields: - **Language**: Select the target language (e.g., English) - **Name**: Enter a descriptive category name (e.g., “Web Development”) - **Status**: Choose **Active** to display it publicly - **Serial Number**: Assign a numeric order (lower numbers appear first) - Click **Submit** **Note:** The serial number controls display order—**not alphabetical sorting**. Use consistent intervals (e.g., 10, 20, 30) to allow future insertions. ### Path 2: Editing an Existing Portfolio Category ![](https://hub.devad.io/blogs/wp-content/uploads/sites/12/2026/01/image-96-1024x460.png) - On the **Portfolio Categories** page, locate the target row in the table - Click the **Edit** button in the **Actions** column - The modal will auto-fill with current values - Modify any field as needed (name, status, serial number) - Click **Save Changes** **Note:** Changing a category’s status to **Deactive** hides all associated portfolios from public view but retains them in the database. --- ## Step 3: Creating a Portfolio Item ![](https://hub.devad.io/blogs/wp-content/uploads/sites/12/2026/01/image-97-1021x1024.png) Portfolio items represent individual case studies or projects. Each supports rich media, metadata, and client details. ### Path 1: Adding a New Portfolio Entry - Navigate to **Portfolio > Portfolios** in the sidebar - Click **Add Portfolio** (top-right) - Complete the multi-section form: #### Media Section - **Thumbnail**: Upload a featured image (JPG/PNG, recommended 800×600px) - **Slider Images**: Use the Dropzone area to upload multiple high-res images for the project gallery #### Basic Information - **Language**: Select the content language - **Title**: Enter a clear, SEO-friendly project title - **Category**: Choose from active portfolio categories - **Serial Number**: Set display priority (e.g., 100 for early display) #### Project Details - **Status**: Mark as **Completed** or **In Progress** - **Client Name**: Optional but recommended for credibility - **Start Date / Submission Date**: Use date pickers for accurate timelines - **Website Link**: Add live URL if applicable #### Content & SEO - **Content**: Use the WYSIWYG editor (Summernote) to describe the project - **Meta Keywords**: Enter comma-separated keywords (e.g., “UI design, React, Figma”) - **Meta Description**: Write a 120–160 character summary for search engines - Click **Submit** **Note:** All fields marked with ****** are required. Slider images must be JPG, JPEG, or PNG and under 2MB each. --- ## Step 4: Editing an Existing Portfolio Item ![](https://hub.devad.io/blogs/wp-content/uploads/sites/12/2026/01/image-98-725x1024.png) ### Path 1: Updating Portfolio Content and Metadata - Go to **Portfolio > Portfolios** - Find the desired entry and click the **Edit** icon (pencil) in the **Actions** column - The edit page loads with all fields pre-populated - You may: - Replace the thumbnail or add/remove slider images - Update title, category, dates, or client info - Revise content using the embedded editor - Adjust SEO metadata - Scroll to the bottom and click **Update** **Note:** At least **one slider image must remain**—the system prevents deletion below this threshold to ensure frontend integrity. ### Guest Experience – Viewing Portfolios #### 1 Portfolio Homepage (Listing Page) When guests visit your **Portfolios** page, they see a professional gallery of your best work. **Page Layout**: - **Breadcrumb**: “Home > Our Projects” navigation path - **Category Filters**: Buttons at top (“All”, “portfolio1”, etc.) for instant filtering - **Project Grid**: Cards showing portfolio items. - **Project Card Shows**: - Featured image (thumbnail) - Project title - Category tag - Smooth hover animation **How Guests Browse**: ![](https://hub.devad.io/blogs/wp-content/uploads/sites/12/2026/01/image-99-1024x644.png) - Click **“Portfolios”** in main menu - (Optional) Filter by category using top buttons: - **“All”**: Shows every project - **Category name**: Shows only matching projects - Click any project card to view full details --- #### 2 Portfolio Detail Page – What Guests See When a guest clicks a portfolio item, they see a rich, immersive project showcase: | Section | Content | Purpose | | --- | --- | --- | | Breadcrumb | “Home > Portfolio Details” | Easy navigation back | | Image Gallery | Multiple high-quality images with lightbox popup | View enlarged images in modal window | | Project Title | Large heading (e.g., “Jone Doe”) | Clear project identification | | Project Details Sidebar | Structured information:– Category– Client Name– Start/End Dates– Website Link (clickable) | Quick reference of key facts | | Full Description | Rich text content with headings, paragraphs, lists | Tells the project story professionally | | Social Sharing | Facebook, Twitter, LinkedIn buttons | Share project with others | **Key Features Guests Experience**: - ✅ **Lightbox Gallery**: Click any image to view full-screen with navigation arrows - ✅ **Mobile-Optimized**: Layout adapts perfectly to phones/tablets - ✅ **Easy Sharing**: One-click sharing to social media - ✅ **Professional Presentation**: Clean layout that builds trust --- #### 3 Step-by-Step Guest Journey **Step 1: Discover Portfolios** - Guest clicks “Portfolios” in main menu - Sees visually appealing grid of your best work - *What they gain*: Immediate visual proof of your hotel’s quality **Step 2: Filter Projects (Optional)** - Clicks category filter (e.g., “Wedding Events”) - Sees only relevant projects instantly - *What they gain*: Saves time finding what matters to them **Step 3: View Project Details** - Clicks a project that catches their eye - Sees beautiful image gallery with lightbox functionality - Reads professional description with project timeline - Checks client name and website for credibility - *What they gain*: Confidence in your capabilities through real examples **Step 4: Share or Take Action** - Shares project on social media - Clicks client’s website link (sees real results) - *What they gain*: Social validation and inspiration to book Use this page [Ask ChatGPT](https://chatgpt.com/?q=Read%20https%3A%2F%2Fst1.devad.io%2Fhelp%2Fen%2Fguides%2Fsetup-basics2%2Fportfolio-showcase-theme-complete-setup-guide--41%20and%20answer%20questions%20about%20the%20content.) [Ask Claude](https://claude.ai/new?q=Read%20https%3A%2F%2Fst1.devad.io%2Fhelp%2Fen%2Fguides%2Fsetup-basics2%2Fportfolio-showcase-theme-complete-setup-guide--41%20and%20answer%20questions%20about%20the%20content.) On this page [Admin Role](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#admin-role) [Step 1: Activating Theme Twelve](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#step-1-activating-theme-twelve) [Path 1: Selecting Theme Twelve from Available Templates](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#path-1-selecting-theme-twelve-from-available-templates) [Step 2: Managing Portfolio Categories](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#step-2-managing-portfolio-categories) [Path 1: Adding a New Portfolio Category](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#path-1-adding-a-new-portfolio-category) [Path 2: Editing an Existing Portfolio Category](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#path-2-editing-an-existing-portfolio-category) [Step 3: Creating a Portfolio Item](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#step-3-creating-a-portfolio-item) [Path 1: Adding a New Portfolio Entry](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#path-1-adding-a-new-portfolio-entry) [Step 4: Editing an Existing Portfolio Item](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#step-4-editing-an-existing-portfolio-item) [Path 1: Updating Portfolio Content and Metadata](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#path-1-updating-portfolio-content-and-metadata) [Guest Experience – Viewing Portfolios](https://st1.devad.io/help/en/guides/setup-basics2/portfolio-showcase-theme-complete-setup-guide--41#guest-experience-viewing-portfolios) ## Keep exploring [### How to connect to you domain with Landing page or Store Connecting a custom domain to your Business Page or Store ensures a professional brand presence and improved SEO performance. This guide covers every major domain…](https://st1.devad.io/help/en/guides/setup-basics2/how-to-connect-to-you-domain-with-landing-page-or-whatsapp-store--16) Help Center search ## Find an answer yourself Searching Guides only. Type at least 2 characters to search. [![Devad.io](https://st1.devad.io/brand/logo-devad-white-mode-v3.png) ![Devad.io](https://st1.devad.io/brand/logo-devad-dark-mode-v3.png)](https://st1.devad.io) Apps Suite Every Business Needs to Start and Grow [](https://x.com/devad_io) [](https://www.instagram.com/devad.io) [](https://www.facebook.com/www.devad.io) [](https://www.linkedin.com/company/devadio/) [](https://wa.me/905516455142?text=Hi%2C%20I%20have%20a%20question%20about%20Devad.io%20Apps) ## Apps - [SITE](https://devad.io/site) - [POST](https://devad.io/post) - [AI](https://devad.io/ai-agent) - [CHAT](https://devad.io/chat) ## Company - [Plans & pricing](https://st1.devad.io/pricing) - [Blog](https://st1.devad.io/blog) - [About](https://st1.devad.io/contact-us) - [Contact](https://st1.devad.io/contact-us) ## Resources - [Docs](https://st1.devad.io/help/doc) - [Changelog](https://st1.devad.io/help/changelog) - [Help Center](https://st1.devad.io/help) - [Guides](https://st1.devad.io/help/guides) © 2026 All Rights Reserved Devad.io [Privacy](https://st1.devad.io/privacy-policy) [Terms](https://st1.devad.io/terms-of-service) [Cookies](https://st1.devad.io/cookie-policy) [My data](https://st1.devad.io/data-deletion) [Free tools](https://st1.devad.io/free-tools/)