Google uses mobile-first indexing for all websites. This means Google crawls and ranks the mobile version of your site — not the desktop version. If your WordPress Website looks great on a Mac but falls apart on an iPhone, Google sees the broken version. Your rankings reflect that.
In 2026, 63% of all web traffic globally comes from mobile devices. In India, that number is closer to 77%. A website that isn’t properly mobile-responsive is not just a bad user experience — it’s an SEO liability and a commercial failure.
Elementor has responsive design tools built in, but they require deliberate use. This guide walks through every setting, test, and fix needed to make your Elementor WordPress Website genuinely mobile-friendly.
Understanding Elementor's Breakpoint System
Elementor uses a breakpoint system to define how sections, columns, and widgets behave at different screen widths. In 2026, Elementor Pro supports 6 breakpoints:
| Breakpoint | Default Width | Target Devices | Priority |
|---|---|---|---|
| Widescreen | 2400px+ | Large monitors | Low |
| Desktop | 1025px+ | Laptops, desktops | High — default design view |
| Laptop | 1024px | Small laptops | Medium |
| Tablet | 768px | iPad, Android tablets | Medium |
| Mobile Extra | 480px | Large phones (iPhone Pro Max) | High |
| Mobile | 375px | Standard phones (iPhone SE, etc) | Critical |
- Add code to your child theme's functions.php — never the parent theme, which will be overwritten by theme updates.
How to Create a Custom Post Type — Two Methods
Method 1 — CPT UI Plugin (Recommended for Beginners)
CPT UI (Custom Post Type UI) is a free WordPress Website plugin that lets you create and manage custom post types and taxonomies through a visual interface — no code required.
- Install CPT UI from Plugins > Add New (search ‘CPT UI’)
- Go to CPT UI > Add/Edit Post Types in your admin menu
- Set: Post Type Slug (e.g., ‘projects’), Plural Label (Projects), Singular Label (Project)
- Under Settings, enable: Has Archive, Publicly Queryable, Show in REST API
- Under Supports, enable: Title, Editor, Thumbnail (Featured Image), Custom Fields
- Click Add Post Type — your CPT is now available under the admin menu
Method 2 — Code in functions.php
For developers who prefer clean code without an extra plugin:
add_action( 'init', function() {
register_post_type( 'projects', [
'labels' => [ 'name' => 'Projects', 'singular_name' => 'Project' ],
'public' => true,
'has_archive' => true,
'show_in_rest' => true,
'supports' => [ 'title', 'editor', 'thumbnail', 'custom-fields' ],
'rewrite' => [ 'slug' => 'projects' ],
]);
});
- Add code to your child theme's functions.php — never the parent theme, which will be overwritten by theme updates.
Adding Custom Fields with ACF
Custom Post Types become genuinely powerful when combined with ACF (Advanced Custom Fields). ACF lets you add structured data fields to any CPT — text fields, image pickers, number fields, date pickers, link fields, and more — which Elementor Pro can then display dynamically.
Example for a Project’s CPT: create an ACF field group with fields for Client Name, Project URL, Industry, Location, and Completion Year. These fields appear in the WordPress Website editor when editing any Project. Elementor Pro’s Dynamic Content feature then pulls these values into your design automatically.
Displaying CPTs in Elementor Pro with Loop Grid
The Loop Grid widget in Elementor Pro displays any post type in a custom-designed grid. Set the source to your CPT (e.g., ‘Projects’), design the card skin using Elementor’s Loop Item template, and the widget automatically displays all your CPT entries in your design.
Combined with Elementor’s Filters widget (Pro), you can add a live filter bar above the grid — letting visitors filter your Portfolio by Industry, Location, or any taxonomy you’ve defined.
- Add a custom taxonomy to your CPT (e.g., 'Project Type' or 'Industry') for filter bar functionality. Taxonomies work exactly like categories or tags but scoped to your specific CPT.
We Build WordPress Website with Custom Post Types and Elementor
Hopeleaf Technologies builds CPT-powered WordPress websites for portfolios, real estate, job boards, directories, and more — with Elementor Pro Loop Grid display.
- Start your project → hopeleaftechnologies.com/contact-us/
We Build Every Site in Elementor Pro
Hopeleaf Technologies is a specialist Elementor agency — we design in Figma and build in Elementor Pro on WordPress. Fast, editable, and built to rank on Google.
