Gemaby PixelGrade

Header Area

The header area in Gema features several areas: logo or title/tagline (for the best display, we recommend using one or the other), and the custom navigation menu.

 

Site Title

To change your site title and tagline, go to Customizer → Site Identity and set them both to your liking.

Custom Logo

Gema supports a Site Logo, which you can upload under Customizer → Site Identity. We recommend a graphic around 220px high to avoid over-stretching the header area and losing valuable screen space. The width is limited to about 710px.

Menu

After you create a custom menu, assign it to the Primary Menu location either from the same page — the Menu Settings section below your menu items — or by going to Customizer → Menus and selecting your custom menu from the dropdown list.

The primary menu supports sub-menus, allowing you to better categorize your links.

Social Icons

Under the Primary Menu area, Gema features an area for showing off your social media presence with a Social Links Menu.

Gema supports the following social services: Email, RSS Feeds (links with “feed” or “rss”), Behance, Delicious, DeviantArt, Digg, Dribbble, Facebook, Flickr, FourSquare, GitHub, Google+, Instagram, LinkedIn, Pinterest, Reddit, Skype, SoundCloud, Spotify, StumbleUpon, Tumblr, Twitter, Vimeo, Vine, VKontakte, Sina Weibo, Xing, Yahoo, AngelList, Yelp, LastFM, SlideShare, Twitch, BlogLovin, Medium, WhatsApp, LeanPub, and RenRen.

Typography Styles

Gema offers a series of custom styles, which you can view on the style guide page of the demo.

Intro Text

Add an introductory larger-size paragraph by wrapping the text in a p tag with the “intro” CSS class:

<p class="intro">Larger text will usually be read before.</p>

Drop caps

Add drop caps by wrapping the first letter of the first word dropcapin a span tag with the “dropcap” CSS class:

<span class="dropcap">F</span>irst letter.

Post Formats

Gema supports the following post formats:

postformat_final

Standard Post

On the blog and archives, standard posts display the title, featured image, excerpt, date, and categories. The author is also displayed if there’s more than one author on a site; in single post view, the author is always displayed.

Quote Post

Displays your quote content with special styling, on a white background. If you don’t wrap your content in a <blockquote> tag, the tag will be automatically added when you select this format.

To add an author to the quote, wrap it in a <cite>Author Name</cite> tag and place it inside the <blockquote> using the Text/HTML editor mode.

Featured Images

layout_animation

Using Featured Images with different shapes and sizes adds character to your posts. Gema uses the featured image’s aspect ratio to determine where the post will sit in the layout, and how the featured image will interact with the post title and content.

On your homepage, different featured image sizes and shapes will add a dynamic feel to the grid. Mix in posts with and without featured images for an engaging, visually balanced layout.

gema_documentation_features

On single posts, the featured image’s aspect ratio is used to establish the relationship of the image with the title and the rest of the content. Depending on its original size, the featured image can be the entire width of the content or half-width; half-width images will appear beside the title.

Widgets & Sidebars

Gema features one widget area that displays on the right side on single posts and pages. You can leave the sidebar empty if you are after a cleaner, bolder look, or you can control where you want certain widgets to appear – on pages, single posts, etc. – by adjusting Widget Visibility.

Custom Colors

By default, Gema has a simple black and white color scheme, and comes with three free color palettes. If you would like to customize the colors even further, you will need Custom Design.

Custom Fonts

Gema uses the Butler font family for the site title and the category pages titles, and the Montserrat font family for headings and body font. You can change Gema’s typography using the Custom Fonts, or by adding Custom Design to your website for even more options.

Note: Gema helps to optimize the title’s font size for the available space on various display sizes (keeping the layout consistent and responsive). Due to this automation, “Large” and “Huge” font sizes may not apply to longer site titles when using custom fonts.