Cordon - Responsive One/Multi Page Portfolio Theme

• created: 10/16/2017
• latest update: 10/16/2017
• by: ridianur
• themeforest.net/user/ridianur/portfolio

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here . Thank you!

I do offer support for my customers but i only provide support for my themes and their core features and functionality not customization works. I cannot guarantee my themes will function with all third party components, plugins, web browsers, and server environments. If you plan on adding numerous plugins to this theme, please note I can not fascilitate support of any conflicts they might cause with the default Cordon Theme functionality. The Cordon Theme is presented as is.

You can see the support item policy from themeforest in here

This Theme comes with many custom  options which can be activated at your wordpress admin panel(theme option). You can either choose to upload the theme to your server via ftp (only upload the unzipped folder "cordon" into the folder wp-content/themes/) or via wordpress upload function. While using WordPress admin panel uploading option, make sure to upload only "cordon.zip" file (Note: Don't upload the whole archive file that you received by themeforest).

Notice: if you are new to wordpress and having problem in installation, you might want to check out this link: http://codex.wordpress.org/Installing_WordPress
Once done, you can activate the theme as usual
at Appearance->Themes->"Cordon".

Dont forget to install and activate all required plugins for this themes.

Manual Import

You can import the sample data that i provided in documentation folder. Its file with xml extensions. Go to Tool->Import and choose Wordpress and install importer plugin for it. After that click Activate Plugin & Run Importer and upload the sample data for it.

One Click Demo Import

First make sure you have installed all the required plugins. After that go to ->Appearance->Import Demo Data. And then click Import Demo Data button.

This will takes a while to importing all the data.

See the video here about using this one click demo import

Notice:

All the images imported will be replaced by placeholder. If you want to use the demo pages image please see the source in the credit tab.

For Homepage

• Create new page(Pages->Add New), add Homepage title in it, and after you set the page content save it.
• Go to Setting->Reading choose Front page displays A static page. And in the front page select Homepage and save it.

For Blog/News

• Create new page(Pages->Add New), set the title eg:Blog in page attribute(right bottom) choose Blog Sidebar template
• And you can connect this page to the menu.

And you're done. Now you can set the theme options

Go to Appearance->Theme Options and you will see some options list here.

1. General Setting This section contain options to set the styles,logo and preloader
2. Social Icon Setting This section contain options to set the social icon in header and footer.
3. Page Setting This section is contain options to set the text in portfolio section/single page & blog page.
4. Footer Setting. This section contain options to set the footer text and footer social icon

Most of theme options have explanation inside of it.

You can import/exporting the theme options settings. Go to Appearance->Options Backup

If you want to export, copy the text below Export Theme Options and save it in some file eg. options.txt.

If you want to import, copy the text inside the options.txt file, and paste it to the field below Import Theme Options and hit Import Theme Options button.

Menus can be found under Appearance -> Menus. For more detailed usage of the menu manager, read this: http://en.support.wordpress.com/menus

There is 2 different menus location.

1. Menu that display only in One Page Template Builder  Its the menu that only display in One Page  Builder Template. With this, you can use the one page scrolling style menus.
2. Menu that display in All page except the One Page Template Builder. Its the menu that display in every pages except the page that using the One Page template  builder. So you can use the normal menus in here.

This is the setting that i used for one-page-menu for One Page template builder in demo page. You can create different  order or name for each menu item, but remember the every anchor for the section.

• Label Home in URL input  #home (this is for heading section)
• And for the rest, it was custom id/anchor. You can see the video below to create that custom id.

You can see the menu setting in sample data for reference.

This is the video showing how to create onepage menu & the ID/Anchor for scrolling

Most of sections on this theme is created from custom post type. Make sure you have installed Cordon WordPress Theme Plugin Bundle to make the custom post type for each section. You can automatically install it after you finish upload and set the theme into diux theme. You can find this plugin inside documentation folder.

You can choose your post format for some custom post(video/slider/audio/gallery slider) in post metabox(below the wordpress editor).

Here are the list of custom post type for the sections:

• Portfolio. This is posts for works section.
• Team Post. This is posts for Team Section.
• Client  You can create client list/post in here
• Testimonial You can create testimonial list/post in here
• Contact Post This is posts for contact section.
• Homepage Slider You can create homepage slider in

Portfolio section

You can create this section in "Portfolio ->Add new Portfolio"

Featured image will appear in the homepage template, make sure you never leave it blank.

You can choose the porfolio format. Here is the list:

• Portfolio Gallery at Top. This will show portfolio with gallery at the top of the content.
• Portfoloi Gallery at Right. This will show portfolio with gallery at the right of the content.

For the portfolio filter, its based on portfolio category, so make sure you have category for any portfolio post. And please avoid using any special character.

Client List

You can create the client list in Client->add new Client

Homepage Slider

You can create the client list in Homepage Slider->add new Homepage Slider

Testimonial

You can create the about section in "Client>add new Client"

Team section

You can create the team section content in "Team Posts->Add new Team Post"

Contact section

You can create the contact section in "Contact Posts->Add new Contact Post". After that, put the shortcode from contact form 7 into the post content.

You can see the example code & setting up the contact post in "Plugin" section in this documentation.

For the address, phone,email section(right side of contact form), you can set that when you used the Contact Section Block in page builder page.

After you finish fill the custom post above, you can use it in Cordon Builder Block/Section in page-builder page.

You can see how to create the portfolio & setting in here.

This theme is powered by SiteOrigin Page Builder. So you can easily creating page with page builder powered by this plugin.

You can visit this page for more detail explanation for using this page builder plugin.

You can use the Cordon Builder Element/Block to create the new page layout that you like.

Or you can use the prebuilt layout that already included in this theme to save time or for reference.

This is the page builder setting we use for this theme.

Go to Settings->Page Builder->Layout Tab

This is the settings that used in demo page:

Mobile Width value 1024

For Row/Widget Bottom Margin set the value to 0

For Last Row With Margin uncheck the Enable

For Row Gutter set the value to 30 (px)

Here is the screenshot

Here is the Video List about how to use the page builder in our theme.

For using the prebuilt layout & using page settings, see this video

For using the Cordon Element/Block

For Setting Row,Background and Parallax see this video

For creating the same height columns

For creating row inside of row

There is 8 Template in this theme.  Here is the list of it

1. Default Template
2. Blog Wide
3. Blog with Sidebar
4. One Page Builder
5. Page Builder
6. Page wide

The Blog Template is use for the blog template.

And for page builder, always use the builder template for that.

One Page Builder  template is used for one-pager style page(with page builder). So you can set the menu with the scrolling effect.

Page Builder template is used for every page (with page builder) that used the normal menus.

You can edit the pot files inside lang folder into your own languange using tools like Poedit

You can see detailed documentation about translation this theme into your languange in wordpress documentation here and here

You can see the image size i used in theme options by importing the demo data. But if you havent try that, this is the list of it:

For Slider Background,Big Image on post and Portfolio

1658 × 1100px

For Team Posts

1000x1218px

For Client Image

250x100px

For Portfolio Thumbnail

800x582px

There is few plugin used in this theme.

• Cordon WordPress Theme Plugin Bundle This plugin is used for creating custom post type & Page builder Element & Block.
• Site Origin Page Builder This plugin is used for creating Page builder. You can see the docs here
• One Click Demo ImportThis plugin is used for importing the demo data.
• Contact Form 7 This plugin is used to display contact form for your page. To set this, choose contact menu in admin menu. And input your information for it.  You can see the docs here This is the code that i create for my demo:

[text* your-name placeholder "Your Name..." ]

[email* your-email placeholder "Your Email..."]

[text your-subject placeholder "Your Telephone..."]

[textarea your-message placeholder "Your Message"]

[submit "Send Message"]

After all set, you can copy the shortcode from it and insert it into the contact post. eg: [contact-form-7 id="352" title="Contact form 1"]

But please make sure you have the correct settings for those contact form. See the contact form 7 for more detail about settings the correct contact form.

Recomended Plugin

If you want to add your own font using google font, you can try to use this plugin  Easy Google Fonts

1. Login into your Themeforest account and go to downloads (Dashboad > downloads)

2. Download the theme into your computer

3. Install an FTP program (Filezilla is free)

4. Retrieve your FTP login information from your hosting admin panel and login into your hosting via FTP

5. unzip the item main file

6. Locate theme.zip (eg : cordon.zip) and unzip it. make sure your unzipping software do not create extra directory with the same name nested into each other. In other words you should find the theme files once you click the theme main folder. Otherwise your themewill not function correctly and you will see your theme is un-styled. 

7. drag and drop theme main folder into your FTP program with the destination : “YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/”

8. FTP program will give a warning that there is an existing with the same directory name, choose replace all.

8. it will take varying from 15 to 30 minutes to replace all files. After you're done with it, try to update the "Cordon WordPress Theme Plugin Bundle". Firstly, deactivate and delete the older Cordon WordPress Theme Plugin Bundle . And there will notice "This theme requires the following plugin: Cordon WordPress Theme Plugin Bundle." Click "Begin installing plugin and then activate it again. Or you can manually upload the plugin from"Add New Plugin". The plugin zip files is inside documentation folder. And you're done.

IMPORTANT:

All the customization/modification for the old theme will be deleted. If you have create customization/modification try to rename the old theme or create the old theme into child theme, so the change will not be deleted. You can check this link to know how to create child theme http://codex.wordpress.org/Child_Themes

This theme is using  the following images, icons or other files as listed.

• Image in Demo Page from Unsplash
• Video In Demo Page Shakir Dzheyranov – Detailvision
• Fonts fontawesome-webfont
• Google Fonts Quicksand
• Google Fonts Montserrat
• Google Fonts Arimo
• Google Fonts Playfair Display

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help, 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 theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section and contact me via my profile here.