Ubud is an elegant, minimalist Photography theme with a grid layout that offers beautiful and easy-to-use options to present your photography, artwork or portfolio work. You can choose between a 1-5 column grid layout and landscape, portrait or square image formats to feature your images. By including your categories in the main header menu (which can be set to be fixed-positioned in the theme options) you will have an easy way to filter your posts by different topics.
Feature Your Photography
On single posts, Ubud offers plenty of white space to feature your images in a pure and minimal way. In addition to the large featured image — with a max. width of 970 pixels — you can also show more images or galleries in your posts.
The calming, clean design of Ubud lets the viewer focus completely on your artwork. On the blog front page, additional content and text stays in the background, so it doesn’t interfere with the minimal presentation of your images. Then, on single posts, the reader can explore the content more deeply and completely concentrate on the images and text without getting distracted by any unneeded information.
Layouts and Image Format Options
You can choose between five different grid layouts and three image formats.
Ubud offers you different layout options that you can choose under Appearance → Customize → Theme. You can choose to show featured post images in a big, single-column layout or in a grid layout with up to five columns. You can also choose between square, landscape, and portrait image formats.
The Grid/List Switcher
Another theme highlight of Ubud is the grid/list switcher, that makes it possible for your visitors to view your posts in an image grid layout or an alternative list view with further content information.
All posts in the list view
Use Ubud as a Portfolio Theme
With its elegant and timeless design and the focus on images, Ubud also becomes a great Portfolio theme for designers, photographers, or artists. Comments can easily be disabled on posts, if you prefer. The artwork or portfolio project can be shown directly in a WordPress post. Categories and tags offer a flexible way to filter your different projects.
Ubud’s About section in the header is a great way to tell your visitors a little bit more about yourself and your blog right at the top of the screen. You can add a brief introduction to your site by going to Customizer -> About Header Section -> Short Intro Text. Content in the Additional Intro Text area will appear behind a “more” link. You can also add an image together with a short image caption.
The About header widget area.
If you would rather use your own header or logo image, instead of a site title and tagline, upload your image under Appearance → Header. You can either choose to upload a small logo image or a big header image with a maximum width of 1305px, which is the full theme width.
Ubud has no sidebars, but you can include widgets in a large four-column footer widget area (under Appearance → Widgets). You can also include a social links menu with icons by creating a Social menu under Appearance → Menu.
Ready for Mobile Devices
Ubud has a responsive theme design that adapts smoothly to different screen sizes, so your content will look beautiful on smartphones, tablets, laptops, and large desktop screens.
You can customize Ubud very easily and add your Header About Section, choose a fixed-positioned top navigation, center-align your blog title, and choose your grid layout and image formats right in the Customizer.
Ubud also supports Custom Backgrounds, and you can add your own logo or other header image instead of the default site title, by uploading your image to the Custom Header. For further options like Custom CSS, font changes, and more custom color options you can buy the Custom Design upgrade.
Quick Specs (all measurements in pixels)
- Standard post featured images in the landscape image format should be
- Standard post featured images in the portrait image format should be
- Standard post featured images in the square image format should be
- The standard content width for Posts and Pages is
- Max. width of logo/header image:
- The standard content width for Pages is
After activating Ubud, you can start customizing the theme under Appearance → Customize, where you’ll find the main customization options like changing your background color, uploading a header/logo image, or choosing a custom menu.
Under “Theme” you can find the Ubud theme options. You can choose your grid layout (1-5 columns), image format (square, landscape or portrait), a fixed-position top navigation bar, and light or dark image hovers.
The Ubud theme options in the Customizer
Under “About Header Section” you can include some text for your About page’s header area, so visitors can learn a little bit more about you and your blog. You can also add an About image with a caption.
You’ll see your changes right away in the Live Preview, so it’s easy and fun to play around with the settings. For further customizations and theme options please read the documentation below.
To create the image grid layout for your blog’s index page, you’ll need to upload a featured image for each post. The ideal width for featured images is 970px or more. Depending on the image format you chose under Customize → Theme you will need a height of at least 970px for the square image format, a mininum height of 728px for the landscape image format, and a minimum height of 1293px for the portrait image format.
If you upload larger featured images or images with other proportions to your posts, the images will be automatically resized to match the specific image format and grid layout you chose in your Ubud theme options. On single posts, your featured images will be displayed at their original size, so you can have big and beautiful featured images in your posts.
A Featured Image in A Single Post
Customizing the Header
The About Header Section
Under Appearance → Customize you can also include the content for your About Header Section. You can add a brief introduction to your site by going to Customizer -> About Header Section -> Short Intro Text. Content in the Additional Intro Text area, as well as your about profile image and the image caption text will appear behind a “more” link. You can include links and other HTML text styles in your About text areas.
Easily create your About Header Section in the Customizer
Add a Logo or Full Width Header Image
You can include your own logo/header image to replace the default site title and tagline. First, you need to prepare your image as a JPG or transparent PNG image. Then, you can upload your image under Appearance → Header. You can also crop a larger image to a smaller size while uploading your image. In the header options, you can choose to hide the site title and tagline, or change the color of your site title.
Custom Main Menu and Social Icons Footer Menu
Under Appearance → Menus you can create custom menus for the Main Navigation Menu and a Social Links footer menu.
You can create your custom Main Header Menu by adding any number of custom links, pages, categories, tags or posts, and save them to your created menus. If you drag the included menu items to the right, you can also create submenus. You can then select your new menu as the “Primary Menu” in the Menu settings and save your changes.
To add Social Icon links in the footer, you need to create a new custom menu called “Social.” Add your Social Profiles to it by adding links with your social profile URL and name.
The following social sites are supported with individual icons: CodePen, Digg, Dropbox, Facebook, Flickr, Google+, GitHub, Instagram, LinkedIn, Pinterest, Polldaddy, Pocket, Reddit, Skype, Stumbleupon, Tumblr, Twitter, Vimeo, WordPress, and YouTube.
The Ubud social menu footer icons
Footer Widget Area
Next to the Social icons menu you can also add all your widgets to the four-column footer widget area. Just go to Appearance → Widgets to add widgets to the widget areas. If you’d like to include your social links in one of the four footer widget columns, make sure you name your social menu “Social” and then add the menu via the Custom Menu widget.
To customize the main background color — the default color is white — you can go to Appearance → Background and either choose your own color or upload a background image. The background color should be a light color or light-patterned image to make sure the dark text color will still be visible.
Full Width Page Template
With the Full Width Page Template option, you can create a full width page with a maximum width of 1305px. Just choose the page template under Page Attributes → Template when editing the page in your dashboard.
Additional Post Styling Options
An example of a drop cap and a left-aligned pull quote in a post.
You can style the first letter of a text paragraph with a drop cap by wrapping this first letter in a span tag with the CSS class of “dropcap”:
<span class="dropcap">D</span>ropcaps are very elegant...
You can add left- or right-aligned pull quotes to your posts by adding a paragraph with the CSS class “pull-left” or “pull-right” above the main text paragraph:
<p class="pull-left">Your side note content here...</p>
Wide Content Area Posts
Example of the wide content area styling in a post.
Another beautiful feature for your posts in Ubud is the wide-content area CSS class. Just go into the HTML editor of your post and wrap the content you want to appear in a width of 970px – instead of the default 700px – in an extra div container with the CSS class of “wide-content”:
Your content comes here...