Gema is a newspaper-inspired theme focused on presenting your content in diverse, daring, and bold ways.
Bring forth the stylish traveler, lifestyle connoisseur, wandering photographer, literary dreamer, or any other passionate persona you keep tucked away. Gema complements each with its dynamic and adaptable nature.
Bold, Adaptable Layouts
Gema was designed with a wide range of content in mind and adapts to any type of post — images, quotes, text, or any combination.
Daring Design for Devoted Readers
With a unique grid layout, balanced range of diverse post layouts, and thoughtful choice of type and whitespace, Gema has a sharp and lightweight look. Precise animations set the right tone for your stories.
Mobile-Ready and Responsive for All Devices
Gema knows how much you love your writing and carefully chosen imagery or videos, and how critical it is to showcase that content beautifully to all of your users, no matter which device they happen to use. You can be sure that Gema will keep your website completely mobile-ready and responsive.
Social Icons for Those That Share
Gema easily features social media accounts using a Custom Menu, which appears just below the main menu.
Customize With Ease
Use the Customizer to adapt Gema even more by giving it a personal touch, in tune with your brand. For additional options like Custom CSS and Custom Colors outside of the free palettes that come with the theme, you will need the Premium or Business Plan.
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.
To change your site title and tagline, go to Customizer → Site Identity and set them both to your liking.
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.
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.
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.
Gema offers a series of custom styles, which you can view on the style guide page of the demo.
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>
Add drop caps by wrapping the first letter of the first word in a
span tag with the “dropcap” CSS class:
<span class="dropcap">F</span>irst letter.
Gema supports the following post formats:
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.
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.
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.
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.
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.
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.