Aridio WordPress Theme Documentation

Aridio is a modern portfolio WordPress theme built for all kinds of studios and agencies. Aridio’s atypical layout and design are created to help you focus on the storytelling 一 its homepage comes with a full-screen slider that puts your work in the front row; its clean and smooth Project pages will give your projects life; its blog section will keep the site visitors intrigued and wanting more. Aridio is also a responsive and highly customizable theme. Read how you can get the most out of the theme with the Aridio WordPress theme documentation.

Aridio WordPress theme documentation, step 1: Theme specifications

• Recommended logo size is 200 x 48px.
• Post featured image recommended width is 830px.
• Post content maximum width is 830px.
• Portfolio image recommended size is 1920x1080px.

Aridio 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.

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

1. Jetpack
2. Kirki Customizer Framework

Aridio WordPress theme documentation, step 3: Theme demo

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

Aridio WordPress theme documentation, step 4: Theme setup

Aridio theme is a great choice for promoting your work, especially if you rely on strong visual elements.
In our demo, we have displayed specific portfolio items on the homepage, and the rest on the work page.

To set up the theme, please follow the next steps of the Aridio WordPress theme documentation:

1. First, go to Pages -> Add New, and create four pages – Home, News, Projects, and Contact. For Home, News and Contact set the Default page template, for Projects select the Portfolio page template, and for the Info page, select the Info page template.
2. For the Home page, set the featured image and enter the desired text wrapped in h1 element with the class “xl-font-size”. Refer to the section Useful CSS classes for detailed instructions.
3. Go to Settings -> Reading. Select the homepage to display a static page. For the Homepage, set the Home page, and for Posts, page set the News page.
4. Now it’s time you add some portfolio items, which will be displayed on the homepage. Go to Portfolio -> Add New. Create several portfolio items. For each portfolio item, enter the title, and set a featured image. If you need to include additional images into your portfolio, you can insert them into the content. Additional images will be displayed as a slider on the single portfolio page. Tag the desired portfolio items with the tag “Slider” –  this tag will be used to display them on the homepage slider.
5. Creating primary and social menu: Go to Appearance -> Menus. Create a new menu with the title e.g. Primary. Add all your pages to it, and mark it as a Primary. Add your projects and pages to the navigation. In our demo, the top item is the Work page with projects as subitems, and the Info page, as the second top item.
6. Finally, you’ll need to add some personal touch to the theme. Go to Appearance -> Customize.
   • Site Identity: Set site logo, and leave title and tagline empty.
   • Featured Content: Enter the tag (“Slider”) used for the desired portfolio items to be displayed on the homepage slider.
   • Under Theme Options -> Footer Settings enable Fix Footer to the bottom of the page and enter the desired footer text.
   • Under Theme Options -> Header Settings enable sticky header and disable sidebar.
   • Under Theme Options -> Layout Settings enable Blog Post Single: Display media in a separate block, Portfolio Archive: Display the title instead of a cursor (on hover) and Show form buttons with animated arrows and without borders.

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.

Aridio WordPress theme documentation, step 5: The Customizer

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

1. Site Identity
2. Menus
3. Content Options
4. Widgets
5. Homepage Settings
6. Featured Content
7. Additional CSS
8. Font Settings
9. Color Settings
10. Theme Options

Site Identity

Site Identity panel in the Aridio WordPress theme is used for setting up basic site identity:

1. Logo: Site logo is an image in a .jpg, .jpeg or .png format. Suggested logo image size is 210 x 40px.
2. Site Title: The name of your site. Ideal length should not exceed 20 characters. If the site title is longer, it will be displayed in two (or more) lines.
3. Tagline: Tagline is a short description of the site, or simply a punchline of your business.
4. Title and Tagline Visibility: If Display Site Title and Tagline is checked, both Site Title and Tagline will be displayed.
5. Site Icon: Site Icon will be displayed in a browser tab, bookmarks or in the WordPress mobile app. The icon should be squarely-shaped, and the recommended icon size is 512 x 512px.

Menus

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

Content Options

The Content Options panel in the Aridio WordPress theme documentation allows you to control the visibility of the posts’ metadata. By enabling or disabling the options, you can show or hide dates, categories, tags, and the author for all posts. Besides that, you can control where the featured image will appear. Featured image for posts and portfolios can be enabled or disabled on archives, blog pages, single posts. That way, you can set a featured image to be visible on the posts page, but hidden on the single post page.

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.

Aridio theme has the top widget area, which is triggered by clicking on the button.

Homepage Settings

Homepage Settings of the Aridio 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.

Featured Content

Featured Content can be used to set the tag that is used for the projects to display them as the slider on the homepage. A slider can display up to 20 slides.

1. Tag name: Enter the tag name that you have used for the portfolio items that you wish to appear on the homepage.
2. Do not display tag in post details and tag clouds: If enabled, the tag used for the slider will not be displayed anywhere.
3. Also, display tagged posts outside the Featured Content area: If enabled, portfolio items tagged with the tag used for the slider will be displayed on the page with the portfolio template, as well.
4. Autoplay slider: If enabled, the slider will automatically play slides.
5. Show slide numeration: If enabled, the slide number will be displayed on the side.

Setting up a slider
To set up the slider:

1. In Pages -> Add New create a new page with title e.g. Home, and for the page template, select the Default template.
2. Go to Settings -> Reading. Select the homepage to display a static page. For the Homepage, set the previously created page.
3. Go to Portfolio -> Add New. Create several portfolio items. For each portfolio item, enter a title, and set a featured image. Tag the desired portfolio items with the same tag e.g. Featured. The tag will be used to identify and display the desired portfolio items as a slider.
4. Finally, go to Appearance -> Customize, and under Home Slider Options -> Slider – Featured Content enter the tag used for the portfolio items.

Aridio 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 of the Aridio WordPress theme documentation, you can find some most used classes.

Theme options

The Theme Options panel contains theme-specific settings.

1. Footer Settings
2. Header Settings
3. Layout Settings

Footer Settings

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.

Header Settings

In Header Settings, you can set theme header behavior. Here, you can enable or disable sticky header, and disable sidebar (widgets area) trigger. Main Navigation dropdown: on hover hide main content option is used to display portfolio featured image over the whole site when hovering over the menu item.

Layout Settings

Layout Settings of the Aridio WordPress theme documentation are used to define the layout on the single post page and on the archive pages.

1. 1. Blog Post Single: Display media in a separate block will extract all media files (images and videos) from your single post, and on the single post, the text will be displayed in the left column, while media will be displayed in the right, scrollable, column.

      

   2. Portfolio Archive: Display title instead of a cursor (on hover): The project title can be displayed on the portfolio image instead of the cursor, and it will follow the mouse pointer movement inside the portfolio image.
   3. Portfolio Single Post: remove slide counter: If you have more images in your portfolio item, the number of images will be hidden.

      

   4. Show form buttons with animated arrows and without borders: This setting applies only to the Jetpack form. If checked, the Submit button will be displayed as an animated arrow.

Aridio WordPress theme documentation, step 7: Useful CSS classes

Custom CSS classes can be added to the Additional CSS section in the Customizer.

Making image show on hover over the word
In our demo, on the About page, artist’s image will pop-up when you hover over their name. To create that effect, insert an HTML block, and add the code:

So, it’s important to wrap the desired word and image into an element with the class “hoverimage”. That way, the word will become show trigger for that image.

Adding large text to the homepage (or any other page)
In our demo, we have showcased a huge text on the homepage. To insert a larger text, insert an HTML block in Guttenberg, and insert the code as displayed on the image:

In short – add the class xl-font-size to your HTML element.

Remove main menu stroke on hover – replace #000 with the desired color hex value.

@media only screen and (min-width: 1025px) {
.site-header nav a:hover, .site-header nav a:focus {
    -moz-text-fill-color: #000;
    -webkit-text-fill-color: #000;
    -moz-text-stroke-color: transparent;
    -webkit-text-stroke-color: transparent;
    -moz-text-stroke-width: 0;
    -webkit-text-stroke-width: 0;
}
}

Increase logo size

@media only screen and (min-width: 1441px) {
.site-branding {
    width: 200px;
}
}

Change single post title size

.single-post header h1.entry-title {
font-size: 48px;
}

Change single post content text size

.single-post .entry-content p {
font-size: 14px;
}