Veniby Themes Kingdom

Let’s get you set up with Veni.

Theme Options

To access Veni‘s theme settings, go to Customize → Theme Options.

Header Menu Layout

You can choose from two different menu styles in Veni:

  • Normal navigation — Your menu is displayed in the upper right corner of the screen.
  • Compact navigation — Your menu is centered, right below your website’s title/logo.

Featured Pages

Display up to three featured pages right beneath the featured content slider — select the pages you would like to feature from the dropdown menus.

Blog Layout Settings

Standard displays all your posts in a flowing stream, like on Facebook or Tumblr. Masonry displays your posts in a layout a little more like a classic magazine spread, or Pinterest.

The interlocking masonry-grid layout has three columns without a sidebar, or two columns with a sidebar.

Featured Content Slider

To set up the Featured Content slider for your front page:

  1. Create some posts with optional Featured Images, and give them all the same Tag, like “featured.”
  2. Go to Customize → Featured Content, and enter the tag you used in the previous step in the “Tag name” field. Click Save & Publish.
  3. The slider will automatically appear on the front page, displaying all the posts with this tag.

To make the images full-width, check the box under Header Menu Layout that says “Display Featured Slider in full width.”

Side Social Menu

The Social Menu is located on the top right side of the screen, which is a great space for links to your social media profiles. Read more about Social Links.

Set Up a Social Links Menu

  1. Create a new Custom Menu, and assign it to the Social Links Menu location.
  2. Add links to each of your social media services using the Links panel.
  3. Icons for your social links will automatically appear in the footer.

Available Icons

Linking to any of the following sites will automatically display its icon in your menu.

  • CodePen
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Email (mailto: links)
  • Pinterest
  • Pocket
  • Polldaddy
  • Reddit
  • RSS Feed (urls with /feed/)
  • StumbleUpon
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Create a Portfolio Page

First, go to Portfolio → Add and publish a few portfolio projects. Be sure to add a featured image to each one.

Then, create a portfolio page:

  1. Go to Pages → Add and create a new page.
  2. Select the “Portfolio” page template under Page Attributes.
  3. Press Publish when you are done.

Widgets

Veni has a sidebar and footer area for widgets. Widgets are configured under Customize → Widgets

The slide-out widget area is always hidden and can be displayed by clicking on the three dots in the navigation menu.

Post Formats

Post formats are a great way to style your posts for specific purposes. Here’s what you can create:

Standard Post Format

This is the default post format for your everyday blog post. You can add video, images, galleries, and any other media to a standard post.

Quote Post Format

To create a quote:

  1. Add a new post and choose Quote from the Post Format module.
  2. Select your desired text in the Visual Editor and click the Blockquote button.

If you would like to include a citation with the quote, you can use the HTML Editor instead, and copy and paste the following HTML to get the correct formatting. Next, you can update the quote and citation to whatever you like:

<blockquote>
They know the price of everything and the value of nothing.
</blockquote><cite>Oscar Wilde</cite>

To learn more about basic HTML, click here.

Link Post Format

To create a link post:

  1. Add a new post and select the Link post format under the Post Format module.
  2. After you add the link text, link it to the URL you want.

Extra Styles

Two-Column Content

You can display content in two columns by wrapping a div element with the class “twocolumn”, and then a paragraph element with the class “half-width” around your content:

 
<div class="twocolumn">
<p class="half-width">Your text goes here.</p>
<p class="half-width">Your text goes here.</p>
</div>

Drop Caps

Drop caps let you stylize the first letter in a post or page. To create a drop cap, switch to the HTML Editor and wrap the first letter in a span with “dropcap” as the class.

<span class="dropcap">T</span>he first letter of this paragraph will have a dropcap.

Blockquotes

Blockquotes are usually used to highlight important parts of your posts. In the Visual Editor, select the text you’d like to feature and click the Blockquote button. Update your changes when you finish editing.

To cite the quote’s author, write their name below the quote text. Switch to the Text Editor and add <cite></cite> around the author’s name.

You can also change the blockquote alignment, which is useful when you want to modify the visual flow of the page. To do this, add a class to the HTML:

<blockquote class="pull-right">
This is a right-aligned block quote.</blockquote>

<blockquote class="pull-left">
This is a right-aligned block quote.</blockquote>

Highlighted Text

To highlight text, switch to the HTML Editor and wrap it with the “emphasis” class:

 <p class="emphasis">Your highlighted text goes here.</p>

You can see the complete style guide in action here.