Ubudby Elmastudio

Getting Started

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.

Ubud Theme Options
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.

Featured Images

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.

Ubud Single Post
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.

Ubud Customize About Header
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.

Ubud Create A Social Menu

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.

Ubud Social Footer Menu
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.

Custom Background

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

Ubud Dropcap and Pullquote
An example of a drop cap and a left-aligned pull quote in a post.

Drop Caps

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...

Pull Quotes

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

Ubud Wide Content Area
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”:

<div class="wide-content">
Your content comes here...