Didi is a perfect match for fashion, lifestyle, and magazine-style sites. The theme’s modern, easy-to-read typography and minimalist design is a pleasure to view on devices of all sizes.
Didi is responsive and displays your site in the best possible way on smartphones, tablets, and laptops, as well as large desktop screens.
Front Page: Build Your Own
We styled the Front-Page Template in Didi with a great attention to detail, from layout options to styling and typography. The front page consists of a page content area, and two different widget areas that you can combine to create unique looks. Here are few examples:
Flexible Blog Layout
Didi lets you change your blog layout in seconds. In the Customizer, choose between three different blog layouts. You can change the position of the sidebar or a full-width display. Your custom layout also applies to archive pages like category and date archives.
To make it easier to add variety to your site, Didi offers several page templates:
Didi supports social media icons for CodePen, Digg, Dribbble, Dropbox, Facebook, Flickr, Foursquare, GitHub, Google+, Instagram, Linkedin, Pinterest, Getpocket, Polldaddy, Reddit, Stumbleupon, RSS Feed (urls with
/feed/), Tumblr, Twitter, Vimeo, YouTube, WordPress.com, WordPress.org, Spotify and Twitch. Linking to any of these sites will automatically display its icon in your social menu.
More Customization Options
Didi allows you to customize your site title, site logo, custom header, and background.
Didi comes with six widget areas — one sidebar, three footer widget areas and two front-page widget areas.
Multiple Color Schemes
Is the theme’s default color scheme not your style? We’ve included a few free featured color palettes to inspire you — or choose your own colors with the WordPress.com Premium or Business plan.
We used black and white images in the demo, but of course, you can use full-color images as well.
Quick Specs (all measurements in pixels):
- Front Page: Page Content Featured Image –
- The sidebar width is
- Content Width, No Sidebar
- Content Width, Sidebar
Navigate to the Customizer‘s Header Image panel and upload your header image, which will appear above the site title/logo and menu in the header area.
Navigate to the Customizer’s Site Identity area to upload a site logo. You can have a site title and tagline with your logo, a logo on its own, like on the demo site, or a title and tagline without a logo.
Logo with Site Title and Tagline
Site Title and Tagline
Social Menu Bar
Follow the guide to create a social links menu.
The available icons are: CodePen, Digg, Dribbble, Dropbox, Facebook, Flickr, Foursquare, GitHub, Google+, Instagram, Linkedin, Pinterest, Getpocket, Polldaddy, Reddit, Stumbleupon, RSS Feed (urls with
/feed/), Tumblr, Twitter, Vimeo, YouTube, WordPress.com, WordPress.org, Spotify and Twitch. Linking to any of these sites will automatically display its icon in your social bar.
In the Customizer’s Theme Options panel, check “Hide Search Box” if you don’t want to show it.
Didi supports one custom menu in the Primary Menu location.
Creating Your Front Page
By default, the front page displays your latest posts on a new site. If you don’t want to use blog posts for your homepage you can set up a static front page following this step-by-step guide. Once you’ve created your static homepage, assign it the Front Page template.
Page Content Area
1. Navigate to Pages and open a new page. In the demo we named it “Welcome to Didi.” Inside the editor, add the content you want to show in the main area. See below:
Front Page First Block
1. Navigate to Customizer → Widgets → Front Page First Block
2. Add widgets you want to show in the first widget area. Didi comes with two custom widgets, the Didi Recent Posts Widget and the Didi Promo Block Widget. With the Recent Posts Widget you can choose the number of posts you want to show, the number of columns (two, three, or four), and the category. In this widget area we added the Didi Promo Block Widget twice in different places (at the top and the bottom), the Didi Recent Posts Widget (three column). Also included is the Image Widget.
Front Page Second Block
1. Navigate to Customizer → Widgets → Front Page Second Block
2. Add the widgets you want to display in the second widget area. We added Didi Recent Posts Widgets (two column).
3. Navigate to Customizer → Widgets → Sidebar and add the widgets you want to display in the sidebar.
Didi supports three footer widget areas: Footer Left, Footer Middle, and Footer Right. If you add widgets to the Footer Widget Area they will be displayed on all pages of your website.
The front page consists of three different content blocks that can be differently combined to create unique looks. In the live demo we showcase all content blocks, but feel free to build your own look for your site. A couple of ideas are presented in the demo:
This theme offers four different page templates: the Grid Template, the Full Width No Sidebar Template, the Default Template, and the Right Content No Sidebar Template.
This page displays all child pages of a page with featured images in a grid. It’s perfect for Projects, Team, or Services-type pages.
- Create or edit a page, and assign it to the Grid Template.
- The Grid Page Template displays all child pages of the page in a grid. Learn more about creating sub-pages (or child pages).
- The featured image, the title, and content from each sub-page creates a grid item.
Full Width No Sidebar
This page template removes the sidebar, giving your content plenty of space to spread out!
Create or edit a page, and assign it to the Full Width, No Sidebar template.
This is the default look for pages, with the content on the left and a sidebar on the right.
Create or edit a page, and assign it to the Default Template template.
Right Content No Sidebar
This page template displays your content in a similar format to the blog (no sidebar), with the entry title to the left and the content on the right. This page template does not include the sidebar.
Create or edit a page, and assign it to the Right Content, No Sidebar template.
Blog Page Settings
In the Customizer’s Theme Options panel, under Blog Layout, choose the best layout for your site. You can change the position of the sidebar or opt for a list layout without a sidebar. Your chosen layout will apply to archive pages as well.
In the Customizer’s Theme Options panel, you can hide items like post author and date.
CSS Styles – For Advanced Users
To style your pages individually, you can use extra CSS styles in your page text/HTML editor.
<a class="button" href="">Find out More</a>