Coleta WordPress Theme Documentation

Coleta is a responsive, highly customizable portfolio WordPress theme developed for photographers. This theme allows your shots to breathe and leaves; and potential clients will be mesmerized by your work.

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

Coleta WordPress theme documentation, step 1: Theme specifications

• Post featured image recommended width is 770px.
• Page and Post content maximum width is 740px.
• Recommended logo size is 210 x 40px.
• Sidebar content width should be 300px.

Coleta 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 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 Coleta WordPress theme documentation are:

1. Jetpack
2. Kirki Customizer Framework

Note: After installing and connecting Jetpack plugin, make sure to activate Portfolio post type under Jetpack -> Settings -> Writing.

Coleta WordPress theme documentation, step 3: Theme demo

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

Coleta WordPress theme documentation, step 4: Theme setup

Coleta theme is set to display portfolio items on the homepage, and posts on the inner page. To set up the theme, please follow the next steps:

1. Create pages with the default template: About, Journal, and Contact. The Journal page will be used to display all posts. Create a page with the title Work, and with a Portfolio page template.
2. The About page is built using an HTML block to make the image show on the hover and two columns block for the text. Please refer to the Useful CSS classes section for the instructions on how to make an image appear on hover.
3. For the Contact page, you will need to insert a contact form into the page. The contact form is provided by the JetPack plugin.
4. Go to Settings -> Reading. Select the homepage to display a static page. For Homepage set the Work page, and for the Posts page, set the Journal page.
5. 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 a title, and set a featured image. Add additional images to the Gallery section. Additional images for the single portfolio item can be added to the Gallery section that is displayed just under the main content. Click on Add images and select/upload additional images for your portfolio.

   

6. As mentioned above, the Journal page will display posts. Go to Posts -> Add New and create several posts. For posts, you will need to enter titles, content and set featured images.
7. 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. Create another menu with name e.g. Social and add as Custom Links links to your social profiles. Mark that menu as Social.
8. Finally, you need to add some personal touch to the theme. Go to Appearance -> Customize.
   • Site Identity: Set your logo or site title.
   • In Theme Options -> Post Single Options set Posts Navigation Position to Fixed on sides.
   • Theme Options -> Portfolio Archive Options set Portfolio layout to Shuffle, and enable On hover display title instead of a cursor.
   • In Theme Options -> Portfolio Single Options enable Slide numeration, and set Image size to Centered.
   • In Theme Options -> Footer Settings enter your footer copyright text. You can use HTML elements to create links.

If you want to customize the theme a bit more, and a personal touch, be sure to follow the next steps.

Coleta WordPress theme documentation, step 5: The Customizer

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

1. Site Identity
2. Menus
3. Content Options
4. Widgets
5. Homepage Settings
6. Additional CSS
7. Homepage Slider Options
8. Theme Options

Site Identity

Site Identity panel in the Coleta WordPress theme documentation 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. Coleta 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 Coleta WordPress theme documentation allows you to control the visibility of posts’ metadata. By enabling or disabling the options you can show or hide dates, categories, tags, and the author for all posts.

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.

Coleta theme has only a regular sidebar area, which is triggered by clicking on the button.

Homepage Settings

Homepage Settings in the Coleta 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.

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 most used classes.

Home Slider Options

The Home slider option panel contains settings for the slider that is available in the Coleta theme. By default, the slider is displayed on the homepage and is displaying featured images from the posts that are tagged with the same tag. The slider is only displayed on the page with the Home Slider template.

Home slider customization options:

1. Options
2. Slider – Featured Content
3. Video – Header Media

Options

In the Options panel within the Coleta WordPress theme documentation, you can set slider specific settings related to the slider appearance.

1. Image Size can be set to full size or centered. If the full size is selected, the theme will use the image as-is. In centered mode, images will be shrink to the center of the screen. Note: To have a full-screen slider, you will need to set a larger image for featured image e.g. 1920×1080.
2. Animation type can be set to slide or fade.
3. Position of Titles: Project titles can be displayed in the center of the screen or in the bottom left corner.
4. Title Text Color: Color for project titles in the slider.
5. Enable blend mode for Titles: Title color will depend on the background image. It will override the previous setting, and always set the color that is the most visible (opposite) on the background image.

Slider – Featured Content

In Slider – Featured Content can be set using the tag that is used for the projects to display them as the slider on the homepage.

1. Tag name: Enter the tag name that you have used for 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 the 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 portfolio template, as well.
4. Autoplay slider: If enabled, slider will automatically play slides.
5. Show slide numeration: If enabled, the slide number will be displayed on the side.

Video – Header Media

Instead of displaying the slider, you can display the video on the homepage. The setup process is the same as explained below, but without a need to set a tag for the desired portfolio posts.

1. Header video: You can either upload the video to your site or paste YouTube links to your video. The video should be in .mp4 format, and in 1920x1080px resolution for the best results. Please note that larger videos will prolong load time.
2. Header Image: Header image is displayed while the video is loading or as a fallback if the video is not loaded. The image should be in the same size as the video.

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 page template, select the Home Slider 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 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.

Theme Options

Theme Options panel in the Coleta WordPress theme documentation contains theme-specific settings.

1. Post Single Options
2. Portfolio Archive Options
3. Portfolio Single Options
4. Color Settings
5. Font Settings
6. Footer Settings

Post Single Options

Settings related to the appearance of the post navigation. Post navigation can be displayed on the sides or under the content on the single post, or can be hidden.

Portfolio Archive Options

A portfolio archive page can display posts in the shuffle, boxed or grid layout. 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.

Portfolio Single Options

On the single portfolio page, images can be displayed as-is or in centered/boxed mode. Slide numeration will display a number of the slides if there are more images in the project.

Color Settings

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

• Background Color: Site background color.
• Body Text Color: Color used for the paragraphs on the site.
• Navigation Text Color: Main menu text color.
• Enable blend mode for Navigation: If enabled, the main navigation color will depend on the background color. For example, if the background image is dark, navigation will automatically become white. To be more precise – navigation color will be the opposite color of the background.
• Sidebar Background Color: Color used for the sidebar area background.
• Sidebar Text Color: Color for the text that is displayed in the sidebar.

Font Settings

The Font Settings panel in the Coleta WordPress theme documentation 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 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.

Coleta WordPress theme documentation, step 6: 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, an artist’s image will pop-up when you hover over their name. To create that effect, insert an HTML block, and add code like this:

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

Change site title size

.site-title a {
font-size: 42px;
}

Change main navigation size

.main-navigation a {
font-size: 16px;
}

Change social navigation size

.jetpack-social-navigation a span.screen-reader-text {
font-size: 16px;
}

Change social navigation orientation

.social-wrapper {
-webkit-transform: rotate(-90deg) translate(0);
-moz-transform: rotate(-90deg) translate(0);
-ms-transform: rotate(-90deg) translate(0);
-o-transform: rotate(-90deg) translate(0);
transform: rotate(-90deg) translate(0);
}

Change text content size

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