Recommended Workflow

Setting up Monogram is straightforward when you follow the right order. This recommended workflow takes you from a fresh WordPress install to a fully launched portfolio site.

#Step 1: Install the Theme and Activate Your License

Upload the Monogram theme via Appearance > Themes > Add New > Upload Theme. After activation, install and activate the JKDEVKIT plugin, then enter your license code. This unlocks automatic updates and premium plugin access.

#Step 2: Install All Required Plugins

After activating the theme, you'll see a notification prompting you to install required plugins. Click through and install all of them:

• JKD Theme Core Plugin - custom post types, Elementor widgets, AJAX handlers

• Elementor - page builder

• Advanced Custom Fields PRO - custom fields for portfolio items

• Kirki - Customizer framework for theme options

• JKDEVKIT - licensing, updates, and framework utilities

#Step 3: Import Demo Content

Go to Appearance > Import Demo Data and click Import. This sets up sample portfolio items, pages, menus, and Elementor layouts that match the theme demo. The import may take a few minutes depending on your server.

#Step 4: Customize Colors and Typography

Open Appearance > Customize and start with the visual basics:

• Color Scheme - set your primary and secondary accent colors, toggle dark mode

• Typography - adjust font families, sizes, weights, and line heights

These settings use CSS custom properties, so changes apply instantly across the entire site.

#Step 5: Set Up Navigation

Go to Appearance > Menus and create or edit your main navigation menu. Assign it to the Navigation Menu location. The theme supports up to 7 top-level menu items by default, with mega-menu-style dropdowns.

#Step 6: Create Portfolio Items

Start with 3 to 5 portfolio items to establish your grid. For each item:

1. Set the media type (image, gallery, video, GIF, or 3D model)

2. Fill in client name, duration, and project URL

3. Choose a single page style (1 through 4)

4. Assign industry and category taxonomies

5. Write a brief summary (3-4 sentences)

#Step 7: Configure the Footer

Customize footer content in Appearance > Customize > Footer - tagline, copyright text, social links, and contact information.

#Step 8: Build Custom Pages with Elementor

Use Elementor to create your homepage, about page, contact page, and any other custom pages. The 22 custom JKD widgets are available in the Elementor panel under the JKD category.

#Step 9: Set Up Blog Posts

Create a few blog posts with featured images, categories, and tags. Configure blog layout options in Appearance > Customize > Blog (sidebar position, meta display).

#Step 10: Configure Advanced Features

Once the basics are in place, enable and fine-tune the premium features:

• Page transitions (Barba.js) - smooth SPA-style navigation

• Sound effects - audio feedback on interactions

• Grain overlay - animated texture for a premium feel

• Preloader - branded loading animation

• Scroll-to-top button - quick navigation aid

#Step 11: Test on Mobile Devices

Monogram is fully responsive, but always test your specific content on phones and tablets. Several features (custom cursor, grain overlay, smooth scroll) are desktop-only by design. Check that your portfolio grid, navigation menu, and page transitions work smoothly on mobile.

#Step 12: Launch

Once everything looks good, remove the "Coming Soon" or maintenance mode if active, submit your sitemap to Google Search Console, and share your new portfolio with the world.

Last updated 19 Aug 2026