Artigo WordPress Theme Documentation

Artigo is a WordPress theme created for photographers. This theme’s layout is inspired by the ones you’ve seen in magazines 一 there is a clear grid layout on the homepage that allows all your shots to take center stage. In this Artigo WordPress theme documentation, read how you can tweak the theme and get the most out of it.

Artigo WordPress theme documentation, step 1: Theme specification

• Post featured image recommended width is 760px.
• Page and Post content maximum width is 760px.
• Recommended logo size is

Artigo 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 Add Themes screen, click on Upload Theme.
5. Click on Choose theme, and then browse for a theme file on your computer.
6. Click on Install Now to start the install process.
7. After the installation is done, click on Activate theme.

A detailed video for theme installation is available here: https://help.themeskingdom.com/how-to-install-and-setup-the-theme.

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

1. Jetpack
2. Kirki Customizer Framework

Artigo WordPress theme documentation, step 3: Theme demo

To set the theme as presented in our demo, you can import the demo file.

Artigo WordPress theme documentation, step 4: Theme setup

To set up the theme, please follow the next steps:

1. Go to Posts -> Categories and create categories that you will use to organize your posts.
2. 
   Go to Posts -> Add New and create several posts. Select Image post format, and set a featured image for each post – in our demo, we have used images that are 800x1200px. Associate the post with the desired categories.
3. Now, head to Pages -> Add New and create a new page – About. The About page is used to display a short bio and profile image. Insert the Two Column Block, and insert an image on the left and short text on the right. Add the Two Column Block again, under the first one, and enter the text in both columns.
4. Create another page – Contact. On the Contact page, you can display a short intro text and a contact form. Add a text block and insert your content. Add a form block, and Publish page. Make sure to install and activate the Jetpack plugin; otherwise, the Form block will not be available.
5. Time to set up navigation – go to Appearance -> Menus. Create New menu, and add desired categories and pages to it.
6. Almost done – in Appearance -> Customize, you’ll need to set site identity and layout.
   1. In the Site Identity panel, either set the desired logo or enter Site Title and Tagline.
   2. Under Huntt Settings – > Layout Settings set the number of columns for archive pages (in our demo we have set it to 4), and set pagination type.
   3. Enter desired copyright text in the Footer Text field.

If you want to customize the theme a bit more and add a personal touch to it, be sure to read the rest of the documentation.

Artigo WordPress theme documentation, step 5: The Customizer

The Customizer of the Artigo WordPress theme documentation allows you to modify theme visuals and settings easily. Here are the customization options in the Artigo theme:

1. Site Identity
2. Background Image
3. Menus
4. Widgets
5. Homepage Settings
6. Artigo Settings
7. Additional CSS

Site Identity

TBD

Background Image

Depending on the use case, some users need to set a background image on the site. In the Background Image panel, you can set a background image. After choosing an image, you will be able to set background behavior.

1. Preset: Defines image size – Fill Screen will stretch an image to fill the whole site; Fit to the screen will cover the only visible part of the site, and Repeat will keep original image proportions, but it will repeat the image. The Custom option allows you to set background parameters manually.
2. Image Positions: Tool used to define the starting position of the image.
3. Scroll with Page: Option available only if the background image is set to Repeat. If checked, the background will scroll together with the page content.

Menus

The Customizer menu option allows the user to manage available menu locations, and add and remove menu items. Artigo theme has two menu locations available – the Primary menu, which is mostly used for as the main menu, and the Social menu. Menus can be managed from Appearance -> Menus, as well.

Widgets

Widgets are useful extensions for content, which you can add to your sidebar or other widget areas. In the Widgets option in the Customizer, you can see available widgets area in the currently active theme.

Artigo theme has only the right-hand side widget area, which is available only on a single post page or on static pages. In our demo, we didn’t set widgets. Widgets can be managed also from Appearance -> Widgets. Widgets’ appearance can be controlled with the Widget Visibility feature.

Homepage Settings

Homepage Settings in the  Artigo WordPress theme documentation work the same way Reading settings in Settings -> Reading does. Homepage settings allow you to set the theme to use static homepage, or to display the latest posts.

Artigo Settings

Artigo Settings panel contains theme-specific settings.

1. Theme Colors
2. Layout Settings
3. Font Settings
4. Footer Text

Theme Colors

Setting up colors and adding a personal touch to the theme is important for building a personal brand. The Color Settings panel allows you to set colors for various elements in the theme.

Available settings:

• Background Color: Background color for the whole site, except the left side panel, where the main navigation is located.
• Headings Color: Color for all major headings – posts, pages, headings in the content, etc.
• Paragraph Color: Content text color.
• Link Color: Color of all links in the content.
• Link Hover Color: Color for links on mouse hover.
• Site Title Color: Color of the site title. The site title is displayed only if you are not using a logo.
• Site Description Color: Site tagline color.
• Site Icons Color: Color used to share icons and other icons that are used in the content.
• Site Icons Hover Color: Color of icons on mouse hover.
• Social icons color: Color of Social icons that are displayed in the bottom right, above the copyright.
• Social icons color hover: Color of Social icons that are displayed in the bottom right on mouse hover.
• Navigation Link Color: Color of links in the main menu.
• Navigation Link Color Hover: Color of links in the main menu on mouse hover.

Layout Settings

The Layout Settings panel allows you to change the number of columns on the posts archive pages, and pagination type.

• Choose a number of columns to display on archives: Posts archive page can display 3 or 4 columns on the device with screen resolution larger than 1025px. On screens larger than 1900px width, four columns will be displayed. Please note that on the smaller screens, posts will be displayed in two columns on tablets, and in one column on smartphones.
• Choose which type of pagination you would like: Pagination can be set to infinite scroll or classic, numeric pagination.
• Type of Infinite Scroll post-load (if chosen): Infinite scroll pagination can be set to load more posts as the site visitor scrolls or on button click.

Font Settings

The Font Settings panel is displayed only if the Kirki Framework plugin is installed and activated. Font Settings are used to set font families and weights for global text elements 一 content, headings, and navigation. Available fonts are from Google Fonts but without the extended variants. If you need assistance on how to integrate additional variants, please submit a support ticket.

Footer Text

Footer Copyright Text: Text that will be displayed in the footer, as footer credits. You can enter basic HTML elements to create links and stylize footer text.

Artigo WordPress theme documentation, step 6: Additional CSS

The Additional CSS section is used for custom CSS classes, without interfering with theme original CSS files, or creating a child theme. These classes are always loaded first, before other stylesheets. In the Useful CSS Classes section, you can find some of the most used classes.

Artigo WordPress theme documentation, step 7: Useful CSS classes

Custom CSS classes can be added to the Additional CSS section in the Customizer.
Increase/decrease site title font size

h1.site-title {
font-size: 24px;
}

Hide search icon

.icon-search:before, .search-form:before {
display: none;
}

Change single post title font size

.single .entry-title {
font-size: 24px;
}

Increase/decrease footer text font size

.site-info {
font-size: 14px;
}