Proton

Minimal Portfolio Theme


Introduction

  • Item Name : Proton Minimal Portfolio Theme
  • Item Version : v 1.4
  • Author : neuronthemes

Welcome to documentation. First of all thanks for purchasing our theme. We hope you will be satisfied with our work, and this theme will be useful in your projects. If you need support or just want to say hi, drop us an email at neuronthemes@gmail.com.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly.

Note: If image is not readable and is very small please enlarge them by clicking on it.


Proton 1.4

​Before the version 1.4 of Proton, everything was built on template pages, so you could build Proton with template pages without any problem, you can do it know as well, but not with the all features. Because now our focus is to be concentrated more in the page builder itself since people find it easier to work with and not with options on the page.

So, if you're starting from scratch, please use the default template and page builder to start building your website.

Getting Started #back to top

Installing Theme & Plugins - #top

1 - Download the whole package at ThemeForest downloads.

2 - Extract all files of proton_package.

3 - Navigate to Appearance > Themes, press add new at the top.

4 - Press Upload Theme and choose proton.zip.

5 - Press the link activate.

6 - Navigate to Appearance > Install Plugins, install and activate all required plugins.


Demo Importer - #top

1 - Navigate to Proton > Demo Importer and press Import Demo.


Menus - #top

1 - Navigate to Appearance > Menus, press create a new menu and name it.

2 - Add your posts or pages into the menu then assign to Main Menu on the bottom.


Permalinks & Front Page - #top

1 - To change permalinks of the website, navigate to Settings > Permalinks and pickup your most prefered one.

2 - To make portfolio or any other page your homepage you have to go at Settings > Reading and choose it as front page.

Theme Options #back to top

General Options - #top

1 - Change the style of your theme between classic and modern, classic is the default one and the modern is the new one, in modern new CSS style will be activated and all main elements will be changed.
2 - Change the Proton Skin, default is light. All elements will be overwriten in black when dark is activated.
3 - You can disable the responsivity, which means with this option disabled your page will remain the same on small devices.
4 - Activate the borders around the theme, 4 borders will appear on each side of the theme, you can change their color at Style Options.
5 - Change the size of borders, default size is 12px in all edges of theme.
6 - Enable or Disable the transition effect of elements, the fade effect of elements will be 0.2 seconds, to change the number check the field Transition Duration.
7 - Upload your favicon, 16x16 is the preferred size in png format or jpg.
8 - Add Custom CSS or Custom Javascript to the theme.


Header Options - #top

1 - Change the menu type, check the style switcher in demo to see all the demos live.
2 - Make the header sticky, this means your header will stay fixed even if you scroll down.
3 - Upload your logo in .png or .jpg format.
4 - Change the logo width and height.
5 - Incase you have not uploaded any image as logo, you can write up any logo text here.
6 - Hide the mini cart on the header, mini cart will show up after installing and activating WooCommerce.


Footer Options - #top

1 - Enable the Parallax effect in footer, footer will come smoothly up when scrolling down.
2 - Enable Widgets in footer, you can edit the widgets in Appearance > Widgets.
3 - Change the columns of Widgets, if you change it to two, two new widgets will be created at Appearance > Widgets and so on.
4 - Change the alignment of footer content, default is left.
5 - Write your copyright text, you can change between visual and text on the right.
6 - Enable social icons in the footer, show them by ticking on it also to add links navigate to Theme Options > Social Media.


Style Options - #top

1 - Change the color of body, default color is #f7f7f7 in classic and #fff in modern.
2 - Change the color of border, default color is #fff in classic and #f7f7f7 in modern.
3 - Change the color of main color elements.
4 - Change the color of Header Text, default color is #848484.
5 - Change the color of Header Dropdown Text, default color is #C0BDBF.
6 - Change the background color of Footer.


Portfolio Options - #top

1 - Choose the layout of Portfolio Pages.
2 - Change the hover style of Portfolios, you should select Hover or Hover & NoSpace to make this option active.
3 - Choose the columns of Portfolio, you can choose it here for all pages or in the page option for individually page.
4 - Change the meta text position, the title and categories placement can be changed through this option.
5 - Switch on the hover effect of Portfolio Hover, the fadeIn animation will be applied to the title and category, they'll appear in smooth way with some good transition.
6 - Activate the Masonry layout, the posts will be arrange in that way that no matter the height they will stick together vertically.
7 - Hide the links of categories on the Portfolio, categories will be displayed unclickable.


Portfolio Item Options - #top

1 - Choose the layout of Portfolio Item, the lines contains the title and description and the grey box contains the images of Gallery.
2 - Choose the columns of Portfolio Item Gallery, you can choose it here for all pages or in the page option for individually page.
3 - Show or Hide the navigation, next-previous buttons will be displayed on the bottom of each Project.
4 - Show or Hide the categories.
5 - Enable Gallery fancybox, projects will open in a large fancybox where you can navigate between them.


Blog Options - #top

1 - Choose the layout of Blog, sidebar is placed on classic and minimal, grid is represented in masonry.
2 - Choose the position of Sidebar, default is Right.
3 - Choose the position of Pagination, default is Left.
4 - Show the Author info in Blog, by leaving it unchecked no author info will be displayed.
5 - Show the Categories in Blog, by leaving it unchecked no categories will be displayed.
6 - Show the Post Date in Blog, by leaving it unchecked no post date will be displayed.


Blog Single Options - #top

1 - Choose the layout of Blog Single, sidebar is placed on classic.
2 - Choose the position of Sidebar, default is Right, you can hide it too also.
3 - Show the thumbnail post in Blog Single, by leaving it unchecked no thumbnail will be displayed.
4 - Show the Author info in Blog Single, by leaving it unchecked no author info will be displayed.
5 - Show the Categories in Blog Single, by leaving it unchecked no categories will be displayed.
6 - Show the Post Date in Blog Single, by leaving it unchecked no post date will be displayed.
7 - Show the Next-Previous post links in Blog Single, by leaving it unchecked no pagination will be displayed.


Typography Options - #top

- Change the fonts properties for header, page header and for basic elements, options for basic elements can be found in the other submenu of Typography.


Social Media - #top

- You can change the fonts properties for header, page header and for basic elements too on the other submenu of Typography.

Pages #back to top

Portfolio - #top

1 - Navigate to Pages > Add New, select as template on the right Portfolio and write the name of page.
2 - Choose the style layout of the page, you can inherit the valus also from Theme Options.
3 - Choose the Hover Style, hover will be displayed only if style layout is selected to Hover or Hover & NoSpace.
4 - Choose the categories from where you want to get the posts from, e.g. If you want to get the posts from Creative and Uncategorized select them both, every new post you make all you have to do is select Creative or Uncategorized to make them display on this page.
5 - Select the columns of this page, you can inherit the values also from Theme Options.
6 - Enable the filters on this page, filters are represented by tags, it works same as categories but only by sorting them.
7 - Choose the tags(filters) you want to display on the page.
8 - Write the number how many posts you want to display on this page, default number is 9.
9 - Enable Masonry layout, the projects will be displayed in opposite of fixed rows. No matter height of images they will stick together in vertical.
10 - Enable Hover Effect, the title and category will display smoothly with fadeIn effect.
11 - Change the text position of title and category, you can inherit this option from Theme Options.
12 - If you want to display a button at the bottom of Portfolio, write the link here.
13 - If you want to display a button at the bottom of Portfolio, write the text here, default is Show More.


About - #top

1 - Navigate to Pages > Add New, select as template on the right About and write the name of page.
2 - Pickup the image you want at set featured image, which will be displayed below the page header.
3 - Write the title of page, will appear below image.
4 - Write the Clients title, the title wont show up if there are no clients images.
5 - Choose the clients columns, default is 6.
6 - Add clients with images and link, link can be left blank too.


Blog - #top

1 - Navigate to Pages > Add New, select as template on the right Blog and write the name of page.
2 - Choose the layout of blog page, sidebar is placed on the minimal and classic, values can be inherit from Theme Options.
3 - Choose the position of sidebar.
4 - Change the position of pagination, default is left align.
5 - Choose the categories from where you want to get the posts from, e.g. If you want to get the posts from Creative select it, every new post you make all you have to do is select Creative to make them display on this page.
6 - Write the number how many posts you want to display on this page, default number is 5.
7 - Show Author info in the blog, leave it unchecked if you want to hide it.
8 - Show Categories in the blog, leave it unchecked if you want to hide it.
9 - Show Post Date in the blog, leave it unchecked if you want to hide it.


Contact - #top

1 - Navigate to Pages > Add New, select as template on the right Contact and write the name of page.
2 - Paste your contact form shortcode, you canget it from the submenu Contact, make sure to install and activate Contact Form 7 plugin.
3 - Change the form alignment by left or right, default is left.
4 - Tick if you want to show the map in your contact page.
5 - Write the map latitude and longtitude.
6 - Write the head title of social media.
7 - Add social icons on the sidebar of contact.
8 - To make contact form same as in demo paste this to your contact form submenu

[text* your-name placeholder "Name"]
[email* your-email placeholder "Email"]
[textarea your-message placeholder "Your Message"]
[submit "Send"]


Services - #top

1 - Navigate to Pages > Add New, select as template on the right Services and write the name of page.
2 - Add posts by adding image, title, url and content.

Posts #back to top

Blog Single - #top

1 - While creating a new post make sure to select Blog Single on the type field and to write the title on the top and the content in the editor.
2 - Make sure to select the right category to display on your desired page as we earlier explained on the blog or portfolio page.
3 - Write any related tags.
4 - Upload the featured image which will be displayed on the blog or even on portfolio.


Portfolio Single - #top

1 - While creating a new post make sure to select Portfolio Single on the type field and to write the title on the top and the content in the editor.
2 - Choose the layout, the first layout includes the content in the left and images on the right and so on.
3 - Choose the gallery columns, default is full width.
4 - Enable Gallery Fancybox, all gallery images will be clickable in fancybox and let the option to be navigated between them.
5 - Add Gallery image to your single, you can change the columns in the upper field or even make them open in fancybox, there is no limit how many photos can be added.
6 - Add embed videos in your portfolio single e.g. from youtube or vimeo.


Redirect Link - #top

1 - While creating a new post make sure to select Portfolio Single on the type field and to write the title on the top and the link in the editor.


Page Header #back to top

Page Header is displayed in most of pages and posts, you can change the font at Theme Options > Typography.

Visual Composer #back to top

Proton now is fully compatible with Visual Composer, make sure to install and activate Visual Composer plugin before trying to use it, no license is required after activate. You can inherit most of the options from theme options or set them individually, also I would recommend you to create a default page template when using visual composer elements.

If you want to extend the knowledge about visual composer, we will list below some links by the author of plugin.

Page Heading - #top

  • Title - Enter the title of page heading.
  • Content - Enter the content of page heading, any character can be used.
  • Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
  • Design Options - Add different design only for this element, starting from different paddings, margins or even background color, same options can be applied in the row settings also.

Portfolio - #top

  • Portfolio Categories - Select the categories you want to get the posts from, if All is selected, it does not matter which category is selected, all posts will be displayed.
  • Sortable - Make portfolio items sortable, filters are represented by portfolio categories, If no taxonomies are selected while building the query, filters wont be displayed.
  • Filters String - There is a string before the filters, which says 'Filters:', override it or enter the word empty if you want to remove it.
  • Posts per Page - Enter how many posts per page you want to display, if you have more posts than the posts per page number a pagination will be displayed at the bottom.
  • Button Link - Add a button to the bottom of page, you can select any page to use as URL or enter any custom URL, text is also required.
  • Style - Select the type that you want to show your portfolio items, the values can be inherited or selected for each visual composer element differently.
  • Hover Style - Select the hover style that you want to show the projects, each style is doubled for the reason of boxed.
  • Metro Layout - Enable metro layout for portfolio items, columns can be selected for each post while creating or editing them.
  • Columns - Select the columns that you want to show your portfolio items, if you have enabled metro layout this option will not be visible.
  • Text Position - Select the text position of portfolio, default is center.
  • Hover Effect - Switch on if you want to enable portfolio hover effect.
  • Pagination - Select between normal pagination and show more button, the show more button works with ajax and the normal pagination works with different pages.
  • Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
  • Design Options - Add different design only for this element, starting from different paddings, margins or even background color, same options can be applied in the row settings also.

  • Blog - #top

    • Categories - Select the categories you want to get the posts from, if All is selected, it does not matter which category is selected, all posts will be displayed.
    • Posts per Page - Enter how many posts per page you want to display, if you have more posts than the posts per page number a pagination will be displayed at the bottom.
    • Layout - Select between three different layouts.
    • Columns - Select the columns that you want to show your blog posts, be careful when choosing the columns because of the layout.
    • Sidebar - Select the position of sidebar, or hide it.
    • Pagination Position - Select the position of pagination, default is left.
    • Show Author - Show or hide Author meta in blog.
    • Show Categories - Show or hide Categories meta in blog.
    • Show Date - Show or hide Date meta in blog.
    • Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
    • Design Options - Add different design only for this element, starting from different paddings, margins or even background color, same options can be applied in the row settings also.

    Social Media - #top

    • Type - Select the type you want to display the social media, text or icons.
    • Layout - Select the social media layout, default is without background color.
    • Style - Select the social media style.
    • Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
    • URL Inheritance - Select if you want to inherit the URLs from theme options or write them for each one.
    • Design Options - Add different design only for this element, starting from different paddings, margins or even background color, same options can be applied in the row settings also.

    Button - #top

    • Link - Add the link of a button at the bottom, you can select any page to use as URL or enter any custom URL, text is also required.
    • Style - Select the style of this button.
    • Shape - Select the shape of this button.
    • Size - Select the size of this button.
    • Fluid - Make this button fluid, which means the button width will be the same as column width.
    • Color - Select the color of button, if custom is selected a new colorpicker field will appear below.
    • Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
    • Design Options - Add different design only for this element, starting from different paddings, margins or even background color, same options can be applied in the row settings also.

    Map - #top

    Map is created from two different elements, one is the holder(map) and the other one is (map marker), you can add many map markers you want.

    Map Settings:


    • Map Height - Change the map height, default is 300px.
    • Map Full Height - Tick the option to make the map full height, the option above won't work anymore.
    • Map Zoom - Enter the map zoom perspective, default is 13. Higher number means closer to the ground.
    • Map Scroll Zoom - Enable the scroll in map.
    • Map Style - Select the style of the map, when selected custom a new field below will appear where you will be able to add your custom style. For more custom style of map, check here.
    • Map Controls -
      • Type - Show the switcher bar which allows you to change the type of map(satellite - visual).
      • Zoom - Show the switcher which allows you to play with the zoom of map.
      • Fullscreen - Show the map in fullscreen.
      • Street View - Show the button of street view.
      • Draggable - Allow the map to be draggable with mouse touch.
    • Marker Animation - Enable a smooth animation when marker appears.
    • Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
    • Design Options - Add different design only for this element, starting from different paddings, margins or even background color, same options can be applied in the row settings also.
    • Map Marker Settings:


      • Map Latitude - Enter the map latitude coordinates, to get map coordinates click here.
      • Map Longitude - Enter the map longitude coordinates.
      • Marker Image - Upload a custom marker image or use the default one.
      • Marker Title - Enter the title of map marker, the title will appear when marker is clicked.
      • Marker Description - Enter the description of map marker, the description will appear when marker is clicked.

    Service - #top

    • Icon Position - Select the position of icon, default is top.
    • Service Alignment - Select the alignment of this service, default is left
    • Icon - Select the pack of font family, if you pickup font awesome, font awesome family will appear below.
    • Image - Upload an image instead of icon.
    • Icon Color - Select the color of icon.
    • Icon Size - Select the size of icon, default is small.
    • Title - Enter the title of this service.
    • Title Size - Select the size of title, when selecting custom a new field below will appear.
    • Description - Enter the description of this service.
    • URL - Select a url to make the service a link, only the url will be available, not the text of link.
    • Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
    • Design Options - Add different design only for this element, starting from different paddings, margins or even background color, same options can be applied in the row settings also.

    Pricing Table - #top

    • Title - Enter the title of table.
    • Subtitle - Enter the subtitle of table.
    • Price - Enter the price of table, do not enter the symbol.
    • Currency Symbol - Enter only currency symbol, price is on the field above.
    • Pricing Unit - Enter the pricing unit.
    • Description - Enter the description of this pricing table.
    • Text Lines - Add different text lines, you have to separate them with a new line.
    • Button - Add a button to the bottom of table, URL and the text should be filled.
    • Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
    • Design Options - Add different design only for this element, starting from different paddings, margins or even background color, same options can be applied in the row settings also.

    Carousel - #top

    • Images - Upload the images to carousel slider, same image cannot be selected twice.
    • Items - The number of items you want to see on the screen, other will be visible on swipe.
    • Margin - Enter the margin space, number will be represented in pixels.
    • Controls
      • Auto Height - The slider will scale to height of images.
      • Loop - Infinity loop. Duplicate last and first items to get loop illusion.
      • Mouse Drag - Mouse drag enabled.
      • Touch Drag - Touch drag enabled.
      • Navigation - Show next/prev buttons.
      • Dots - Show dots navigation.
      • Autoplay - Enable autoplay.
      • Pause on mouse hover - Pause on mouse hover, won't work if autoplay is not enabled.
    • Stage Padding - Padding left and right on stage (can see neighbours).
    • Start Position - Enter from which element you want to start the position of carousel.
    • Auto Play Timeout - Autoplay interval timeout, number is represented in seconds.
    • Smart Speed - Speed Calculate, number is represented in seconds.
    • Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
    • Design Options - Add different design only for this element, starting from different paddings, margins or even background color, same options can be applied in the row settings also.

Row - #top

Row is a default element of Visual Composer, we have added 5 extra options, they are placed in tab 'Extra Opitons'. Documentation for default options of Row, click here.

  • Left and Right Spacing - Select the left and right spacing of this row, default is 0.
  • Top Spacing - Select the top spacing of this row, default is 30 pixels.
  • Bottom Spacing - Select the bottom spacing of this row, default is 30 pixels.
  • Alignment - Select the alignment of this row, default is left.
  • Mobile - Select the visibiliy of this row in mobile layout mode (< 768px).

Support Desk #back to top

Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.

Please visit our profile page or ask question neuronthemes@gmail.com

Support for my items includes:
  • * Responding to questions or problems regarding the item and its features
  • * Fixing bugs and reported issues
  • * Providing updates to ensure compatibility with new software versions
Item support does not include:
  • * Customization and installation services
  • * Support for third party software and plug-ins
Before seeking support, please...
  • * Make sure your question is a valid Theme Issue and not a customization request.
  • * Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
  • * Make sure to double check the theme FAQs.
  • * Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
  • * If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
  • * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  • * Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.

Version History (Changelog) #back to top

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.


Changelog

                                    ----------------------------------------
                                    Version 1.4 - 15/11/2017
                                    ----------------------------------------
                                    - New: Fully compatible with Visual Composer
                                    - New: Slider Revolution included, no extra license is required
                                    - New: Coming Soon Page & Maintenance Mode
                                    - New: Customize Search Page
                                    - New: Customize 404 Page
                                    - New: Customize Taxonomies
                                    - New: Powerful Google Map element
                                    - New: Show More Ajax in Portfolio
                                    - Update: More Options at Portfolio Single
                                    ----------------------------------------
                                    Version 1.3.1 - 29/01/2017
                                    ----------------------------------------
                                    - New: Change embed place in portfolio single(top-bottom)
                                    - New: Add description to portfolio item gallery
                                    - Update: Better logo width calculation
                                    - Update: CSS bugs fixed
                                    - Update: Latest WooCommerce and WordPress compatiable
                                    ----------------------------------------
                                    Version 1.3 - 26/12/2016
                                    ----------------------------------------
                                    - New: Modern Demo
                                    - New: Dark Skin
                                    - New: Powerful Theme Options
                                    - New: 600+ Google Fonts
                                    - New: One click Demo Importer
                                    - New: Translatable ready, po/mo files included
                                    - New: Add photo fancybox in Portfolio
                                    - New: Parallax Footer
                                    - New: Alternative style in Portfolio
                                    - New: Change Typography via Theme Options
                                    - New: Add photo fancybox in Project Single
                                    - New: Full width and Sidebar Shop Layout
                                    - New: Change Main color
                                    - New: Footer Widgets
                                    - New: Inherit options from Theme Options
                                    - New: Redirect Single post
                                    - New: More Style Options
                                    - New: Change opacity in Creative Blog
                                    - New: Previous and Next in project single
                                    - New: Footer social icons
                                    - New: Hide shopping cart option
                                    - New: Upload white logo for overlay header
                                    - New: Footer tweets widget
                                    - New: Add Custom Javascript
                                    - New: Choose Blog Single Layout
                                    - New: Change Pagination Position in Blog
                                    - New: Select the Sidebar Position in Blog and Single
                                    - New: Add Page title to Shop
                                    - New: Option to make Default Template with Sidebar
                                    - New: Inherit Portfolio Item Options from Theme Options
                                    - New: Option to remove category in Portfolio Single
                                    - New: Show/Hide Author Info in Single and Blog
                                    - New: Show/Hide Categories in Single and Blog
                                    - New: Show/Hide Post Date in Single and Blog
                                    - New: Show/Hide Next-Previous post links in Single
                                    - New: Show/Hide Post Thumbnail in Single
                                    - New: Show More button in Portfolio
                                    - Update: Portfolio post clickable on image
                                    - Update: Add links to Services
                                    - Update: Dynamic title in about page
                                    - Update: Index page changed into Blog
                                    - Update: Dynamic title in Get Social Widget
                                    - Update: Add content in Portfolio page
                                    - Update: Better explanation in documentation
                                    - Update: WooCommerce css in standalone file
                                    - Update: Compatible with WordPress 4.7
                                    ----------------------------------------
                                    Version 1.2 - 1/10/2016
                                    ----------------------------------------
                                   - New:  Woocommerce SHOP
                                   - New: Ajax Mini Cart
                                   - New: 2 Astonishing new Headers
                                   - New: 2 Blog styles, Creative and Minimal
                                   - New: 3 style of project single
                                   - New: Change columns of gallery in project single
                                   - New: Profesional Service Page
                                   - New: Contact Page with map
                                   - New: Option to hide link from portfolio category
                                   - New: Creative Portfolio Hover Effects
                                   - New: Activate borders all around theme
                                   - Update: Loader color changes with background
                                   - Update: Dynamic title in about
                                   - Update: Add Clients logos links in About Page
                                   - Update: Choose columns of clients in About Page
                                   - Update: Carousel effect of clients in About page
                                   ----------------------------------------
                                    Version 1.1 - 19/09/2016
                                   ----------------------------------------
                                   - New: Enable or Disable transition effect
                                   - New: Fixed margins if no page title
                                   - New: Wysiwyg editor in page title area
                                   - New: Update of ACF(5.4.5)
                                   - New: Embed videos in portfolio single
                                   - New: Sticky menu
                                   ----------------------------------------
                                    Version 1.0 - 04/08/2016
                                   ----------------------------------------
                                   - Initial Release
                                

If you liked our theme please leave us a rate with 5 stars, it would help us a lot.