Diux - Responsive One Page Portfolio Theme

• created: 07/31/2017
• latest update: 07/31/2017
• by: ridianur

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 Diux One Page Portfolio Theme functionality. The Diux One Page Portfolio 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 "benten" into the folder wp-content/themes/) or via wordpress upload function. While using WordPress admin panel uploading option, make sure to upload only "diux.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->"Diux".

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

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.

Notice:

You will have some report about "failed to import..". It's normal, due the images license so i can't provide some images from the demo site, you just need replace it with your own images.

For Homepage

• Create new page(Pages->Add New), set the title eg:Homepage in page attribute(right bottom) choose the template Homepage Slider template/Homepage Video template/Homepage Youtube template and 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. Slider Setting. You can create slider list for homepage/main slider here.
3. Video Background Setting. You can set the video background setting in here.This options only affect on page that using Homepage Video template.
4. Youtube Background Setting. You can set the youtube video background setting in here.This options only affect on page that using Homepage Youtube template.
5. Sections Setting You can set each section Main title, subtitle and detail here.
6. Big Background Image . You can set the big background section here.
7. Footer Setting. This section contain options to set the footer text and footer social icon
8. Homepage Custom Layout. You can set the homepage custom layout here. This options only affect on page that using homepage Custom Layout template.

Most of theme options have explanation inside of it.

You can import the option that i used in demo. To import it go to Appearance->Options Backup and open the options.txt file in documentation sample_data folder. Copy all the code inside of it and paste it into Import Theme Options box. And you're done.

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 Homepage Template  Its the menu that only display in homepage( static page with Homepage Templates)
2. Menu that display in Blog and Other Pages. Its the menu that display in every pages except the static page with Homepage Templates.

This is the setting that i used for Main Menu in Homepage. 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
• Label Works in URL input  #works
• Label About in URL  input  #about
• Label Services in URL input  #services
• Label Contact in URL  input  #contact

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

Most of sections on this theme is created from custom post type. Make sure you have installed Diux 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.
• About Us This is posts for about section
• Team Post. This is posts for Team Section.
• Contact Post This is posts for contact section.
• Custom Section This is post for custom sections(You can use this section to creating custom section in homepage custom layout).

For the title, icon, black circle of each section, you can change it in Appearance->Theme options->Section Settings

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 Standard. This will show the portfolio(ajax) detail with image at the top of the content. You can use the featured images or the big image for the top image.
• Portfoloi Gallery. This will show the portfolio(ajax) detail with the gallery at the top of the content. Make sure all the images is in the same width,height and ratio.
• Portfolio SliderThis will show the portfolio(ajax) detail with the slider at the top of the content.
• Portfolio VideoThis will show the portfolio(ajax) detail with the video at the top of the content. You can use youtube or vimeo video in here
• Portfolio AudioThis will show the portfolio(ajax) detail with the embed audio at the top of the content. You can even use any embed code in this portfolio format.

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 section

You can create the client list in Theme Options->Section Setting->Client list

About section

You can create the about section in "About Us->add new About Us"

You can choose the post format here. The demo site is using Post with quote, list and button type.

Team section

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

For the team background, you can set it in Theme Options->Section Settings

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 in "Theme Options->Section Settings->Contact"

Homepage Slider/Video/Youtube Background section

And for Homepage  Slider,Video background, Youtube Background, Big Image Background and Client list you can create it on theme options.

You can see the image here for the explanation

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

You can see this video to see how to create the custom section

Go to Appearance->Theme options->Homepage Custom Layout. Create your new list for sections in Section list.

There is sections that you can add in your homepage. This is the list for each section

1. About & Team Section This is section to display about post
2. Team Section This is section to display team post
3. Works Section This is section to show your works/portfolio section with filter.
4. Contact Section This is section to show your contact &  google map post
5. Client Section This is section to show the client & second parallax that you set on "Big Background Image"
6. Custom Section . This is the section to show the custom post type of custom section. You can create custom parallax background/white background section section.

You can reorder the list that you already created. You can add/remove section here.

After you've done creating the section list, you can choose what background that you want to use in homepage in Home Section Background Setting.You can set the slider/video/youtube background at the Slider/Video/Youtube Option

After all done, create new page and select the template into Homepage Custom Layout template and set the front page with those page.

This is the video to show how to create the Homepage Custom Layout

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

ou 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

1800 × 1100px

For Team Posts

800x600px and 1200x450px

For Client Image

250x100px

For Portfolio Thumbnail

800x600px

For Image on Google Map Marker Content

250x125px

or you can simply use the demo content to see the more detail of it.

There is few plugin used in this theme.

• Benten WordPress Theme Plugin Bundle This plugin is used for creating custom post type.
• Contacf 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:

<p>[text* your-name placeholder "Your Name..."] </p>
<p> [email* your-email  placeholder "Your Email..."] </p>
<p>[tel tel-997 placeholder "Your Telephone..."]</p>
<p>[textarea* your-message x5 placeholder "Your Message"]</p>
[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"]

Recomended Plugin

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

If you want to add boostrap 3 shortcode you can used this plugin (only supported wp 3.9+) Bootstrap Shortcode

For page builder (not fully tested)

You can try to use this plugin https://wordpress.org/plugins/elementor/

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 : benten.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 "Benten WordPress Theme Plugin Bundle". Firstly, deactivate and delete the older Diux WordPress Theme Plugin Bundle . And there will notice "This theme requires the following plugin: Diux 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 template is using  the following images, icons or other files as listed.

• Image in Demo Page from Death to the Stock Photo
• Video In Demo Page Shakir Dzheyranov – Detailvision
• Fonts fontawesome-webfont
• Google Fonts Fonts Teko
• Google Fonts Open Sans
• Google Fonts Oswald

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.