Vesta WordPress Theme Documentation

Vesta is a free, personal presentation WordPress theme. It’s developed to fully support Gutenberg editor – which means that the layouts on pages can be created using only pre-defined blocks.

Learn how you can get the most out of the theme with the Vesta WordPress theme documentation.

Vesta WordPress theme documentation, step 1: Theme specifications

• Recommended logo size: 280x60px.
• Single page content area width: 1420px.
• Single post content width: 750px.
• Single post featured image width: 750px.

Vesta WordPress theme documentation, step 2: Theme installation

The theme can be installed through the WordPress Admin panel.

1. Log in to the WordPress admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button, at the top of the screen.
4. In the Add Themes screen, click on Upload Theme.
5. Click on Choose theme, and then browse for theme file on your computer.
6. Click on Install Now to start the installation.
7. After the installation is done, click on Activate theme.

A detailed video of theme installation is available here.

After activating the theme, you will be prompted to install the required plugins. Required plugins in the Vesta WordPress theme documentation are:

1. Jetpack
2. Kirki Customizer Framework

Jetpack plugin setup

Jetpack plugin is a required plugin. After installing the plugin, you will need to connect it with your site. When you click the Set up Jetpack button, you will need to log in to your WordPress.com account, or you’ll have to create a free Jetpack account. The official article that explains how to set up the Jetpack plugin is available here.

Vesta WordPress theme documentation, step 3: Theme features – explained

As mentioned at the beginning of this guide, Vesta theme is using Gutenberg blocks for creating layouts. Aside from using the default block and the Jetpack blocks, the theme is relying on a set of built-in blocks, which are organized into five categories:

1. Vesta
2. Buttons
3. Columns
4. Gallery
5. Headers
6. Text

To add a custom block, click on the black square with a plus, and then, in the quick block picker, click on “Browse all”. Then, in the sidebar, click on the Patterns panel.

Vesta specific patterns (Paid version only*)

Vesta theme is coming with unique, theme-specific patterns:

• Basic Information
• Basic Information 2
• Call to action
• Call to action 2
• About information 1
• Areas of expertise
• About information 2
• Overlapping images
• Contact via Social Media
• Contact via email
• Career information
• Expertise

Basic Information

The Basic information pattern is built using text and image blocks. Both text and image can be replaced with your own, without changing the pattern appearance. Standard text settings are available – background color and text color.

Basic Information 2

The Basic Information 2 pattern displays text and image, but with a different layout. Standard text settings are available – background color and text color.

Call to action

The Call to action block is similar to the previous two patterns – it consists of an image and a solid color block with a button. This block is useful when you wish to create an outstanding section, which needs to catch the site visitors’ attention. Both text color and text background color can be customized.

Call to action 2

The Call to action 2 block is similar to the previous two patterns – it consists of an image and a solid color block with a button. It’s useful when you wish to create an outstanding section, which needs to catch the attention of the site visitors. Both text color and text background color can be customized.

About information 1

The About information 1 pattern is a pure textual block where you can insert various information. In our demo, we used this pattern to display a short bio, and some awards.

Areas of expertise

The Areas of expertise pattern is a textual block with text displayed in three columns. Both text color and text background color can be customized.

About information 2

Another pattern that comes in handy when you need to provide additional information on e.g. image, or gallery. It contains nicely organized text which can be customized to meet your style.

Overlapping images

The Overlapping images pattern represents a unique gallery, where images are displayed in shuffle mode, with a slight overlap. You can use this pattern to create unusual visuals and outstanding galleries. Click on each image to replace them with your own.

Contact via Social Media

The block is used to display your contact information on social media.

Contact via email

The block is used to display contact information through email.

Expertise

The Expertise pattern is developed to display information similar to a blog roll, so it looks like a timeline. This pattern is a great choice if you wish to display your previous working experience or events in chronological order.

Buttons

Buttons are styled links, and they are usually part of the call to action areas. There are two options for inserting two or three buttons. Of course, you can remove the unnecessary buttons.

Available settings for buttons:

1. Style: Style for a button can be fill (solid background) or just outline.
2. Color settings: You can set colors for the button background (or border, if you choose the outline option) and button text.
3. Border radius: Defines radius for button corners, making them appear round.

Columns

Columns allow you to enter text in the two columns – just like in the newspapers. There are three styles for columns available: heading text with two columns, two columns of text with images, and three columns of text with buttons.

Available settings for columns:

1. Typography: Size of the text in pixels. You can also change the line height. The default value is 1.5.
2. Color settings: You can set colors for the column background and its text.
3. Text settings: Dropcap capitalizes each paragraph’s first letter and makes it larger.

Gallery

The Gallery block displays two images in-line. This block is wider than the content area itself and takes 1420px of the page width.

Gallery settings:

1. Columns: Currently, images can be displayed only in one or two columns.
2. Crop images: Use when one image is not the same height as the other and should be cropped to align vertically.
3. Link to: The images in a Gallery can be linked to a media file or an attachment page. They don’t have to be linked.

Headers

Headers are outstanding sections that consist of backgrounds and large texts. Two styles can be used for headlines – an image background and a text, and solid color background and with a call to action button. Headings are typically used to separate the content.

Settings for a Large header with a heading:

1. 1. Media settings:
      • Fixed background: If this option is toggled on, only a part of an image will be displayed, and that image will be displayed with a parallax effect – as you scroll, the image will be revealed.
      • Repeated background: If this option is turned on, the image will repeat itself. This option is useful when you wish to use small pattern images, which can be repeated.
   2. Dimensions: Sets the height of your image section.
   3. Overlay: Overlay will add a layer of color that will go over the image. The color layered can be a solid color or a gradient. You can also set the opacity for the overlay.

Settings for a Large header with a heading and a button:

1. 1. 1. 1. Dimensions: Sets the height for the section.
         2. Overlay: Sets a solid color or a gradient for the section. The gradient can be linear (gradient that goes from the left to the right part of the section in a straight line), or radial (gradient that is distributed evenly, starting from the center of the section).

Settings for a button and a text are identical to the previously explained sections.

Text

For a Text block, you have two options – Heading and paragraph and Quote.

The Heading and paragraph block is built to make any heading outstanding compared to the text.

The Quote block is used for displaying citations with an image. The image can be deleted.

Standard text settings are available for both of the Text blogs – background color and text color.

Theme Customizer options

The Customizer is a great WordPress feature that allows you to customize the theme and set theme options. Theme specific settings:

1. 1. 1. 1. Site Identity
         2. Menus
         3. Widgets
         4. Homepage Settings
         5. Color Settings
         6. Additional CSS
         7. Theme Settings

Site Identity

Site Identity allows you to set your Site Title, Tagline, and Icon.

The Site Title is the name of your site, and it’s displayed in the header, where the logo is displayed.

The Tagline is a short description or your motto, and it’s displayed just below the title. This setting is the same as in Settings -> General in the WordPress admin panel.

1. 1. 1. 1. Logo: Upload logo for your site. The logo should be in a PNG or JPEG/JPG format. Recommended logo size is 280x60px.
         2. Site Title: The name of your site.
         3. Tagline: Site punchline.
         4. Display Site Title and Tagline: If enabled, both Site Title and Tagline will be displayed. The Tagline will be displayed below the title.
         5. Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square and at least 512px wide and tall.

Menus

This option in the Vesta WordPress theme documentation allows you to manage created menus quickly. You can select which created menu will be displayed as a Primary Menu or Footer Menu. If you need to manage actual menu items, you can do that in Appearance -> Menu.

Widgets

The Widgets section allows you to manage widgets in widget areas quickly. This option allows you the same possibility as the Widgets option in the WordPress admin panel.

Homepage Settings

In this setting in the Vesta WordPress theme documentation, you can change theme reading settings. The theme can be set either to display the latest posts on the homepage, or to display a static homepage page. Theme reading settings can be also managed in Settings -> Reading.

Color Settings (Paid version only*)

The Colors panel allows you to set the color for different elements of the theme. Here are the available subpanels:

1. 1. 1. • General Theme Colors: Global theme color settings for the background, headings, paragraphs, etc.
         • Header Colors: Colors used in the theme header – header background color, navigation links, and such.
         • Home Slider colors: Appearance colors for the home slider.
         • Footer Colors: Colors for footer elements – the background, links, text, etc.

Additional CSS

In the Additional CSS section, you can enter your custom CSS classes, so you don’t need to mess with original styles or create a child theme. Of course, you should create a child theme if you plan to modify other files, as well.

Theme Settings (Paid version only*)

1. 1. 1. 1. Font Settings
         2. Header Settings
         3. Layout Settings
         4. Homepage Settings
         5. Paging Settings
         6. Footer Copyright

Font Settings

Font Settings allow you to set the desired font family for the paragraphs, headings, and navigation. The Font Settings option requires the Kirki Framework plugin to be installed and active.

All available fonts are Google Fonts. Custom fonts can be implemented with some CSS changes – feel free to submit a support ticket, and we will handle that for you.

Header Settings

In the Header Settings in the Vesta WordPress theme documentation, you can change the main menu appearance and header behavior.

1. 1. 1. • Display header menu as a “hamburger” icon: If this option is checked, the header menu will be hidden behind the “hamburger” button.
         • Enable sticky header: If this option is enabled, the header will stay at the top of the screen.

Layout Settings

The Layout Settings panel controls the blog page appearance, filter appearance and allows you to turn on/off the author box on a single post page.

1. 1. 1. • Blog layout: Blog posts can be displayed in a grid form, with three or four columns. Note: The number of columns can vary, depending on the screen a user is utilizing to view the blog – on some laptops, a blog can appear in three columns, on tablets in two, and on smartphones in only one column.
         • Enable posts category filter on the blog: If this option is enabled, the posts category filter will be displayed above the posts.
         • Display author box under single post content: If this option is enabled, the author box will be displayed on a single post page, below the content.

Paging Settings

In the Paging Settings, you can enable infinite scroll and set how infinite scroll will load new posts. Keep in mind that the Jetpack plugin is required for this feature.

Footer Copyright

In the Footer Copyright field in the Vesta WordPress theme documentation, you can enter your copyright or contact details. HTML tags can be used to style text.

Vesta Premium theme – features set

Vesta WordPress theme comes in three versions – Vesta, Vesta Premium, and Vesta WordPress theme with the Themes Kingdom hosting.

If you choose the Vesta theme, you’ll get basic, “starter pack” features. If you upgrade the theme to Vesta Premium or purchase the Vesta Premium theme, you’ll get access to some additional functionality. Here are all the extra features Vesta Premium comes with:

Gutenberg Block Patterns
Gutenberg block patterns are predefined layouts that consist of regular, easy-to-edit Gutenberg blocks. These patterns will help you create a website faster, so if you want to learn more about them, be sure to visit this link.

Customer Support
Full access to our free and prompt support. Our support agents are always there to give you a hand.

Color Settings
Change the color of any theme element, including the background color, general theme colors, header, and footer colors. You have unlimited options.

Font Settings
Change the fonts of your site’s paragraphs, headings, and navigation. You can choose amongst hundred font options.

Header Settings
Display header menu as a hamburger menu and/or enable sticky header that is visible at all times. The hamburger menu is presented with a hamburger icon that opens up into a navigation drawer.

Blog Layout Settings
Choose a 3- or a 4-column blog layout. You can also choose to enable post categories on blog and/or display author box under each single post content.

Paging Settings
You can choose classic pagination or infinite load. The infinite load option can be activated on click or scroll.

Footer Copyright Text
Change footer copyright text. Just enter the desired text, hit the “Publish” button and that’s it.