Milano

Documentation

INTRODUCTION

General

We would like to thank you for purchasing Milano! We are sure that you have made an excellent choice in selecting it. You also have agreed that this item is unique among tons of Premium WordPress themes. Before getting started, please make sure that you always check out our Milano WordPress Theme documentation files. We offer all kinds of useful information that you need to use for your purchased item. Besides, Knowledgebase, Video tutorials, Forum Search in our Free support center are available for you to fully satisfy your questions. Thank you, we hope you enjoy our theme.

WordPress information

To begin with the template, you can get knowledge about WordPress from installing WordPress to FAQs to WordPress. Below are some useful channels for WordPress users:

Requirement for Milano

To use Milano, your server must be running WordPress 4.0 or higher, PHP5 or higher, and mysql 5 or higher.

THEME INSTALLATION

To install Milano you must have a working version of WordPress already installed. Make sure your installed Wordpress version is 4.0 or higher. You also need to have PHP 5.2.4 or higher versions (recommended is php 5.3+) and MySQL 5.0 to function correctly. If you need help installing WordPress, follow the instructions in WordPress Codex

Downloading

Purchase Milano then you can download our template package on there.

Extract our full package, then you will see all the files and folders, including 01 .zip file (this is the file you need to add to the theme installation) and 03 folders which are Child-Theme, Documentation, Plugins.

Install via WordPress

Following some steps below, you can completely install Milano in few minutes.

Step 1: After getting the installation zip file of Milano, you should navigate to Appearance >>> Themes.

Step 2: Click Add New and then wait while the theme uploaded and installed.

Step 3: Click to activate it.

Step 4: Done

Install via FTP

Common Install Errors

3.1. Are You Sure You Want To Do This?

If you get the “Are You Sure You Want To Do This” message when installing Milano via WordPress, it means you have an upload file size limit. Install Milano via FTP if this happens, or call your hosting company and ask them to increase the limit.

3.2. Upload size limit

If you get this message when you install our theme on localhost, here is a solution for you:

INSTALL DEMO DATA

1. Install all plugins

After installing Milano, you need one important step to go further that is installing and activating our required plugins to make your theme and website work properly. There are 02 ways that you can apply to achieve this which are:

1.1. Install automatically

1.2. Install manually

Besides Brandname shortcodes plugins, you have to install 3rd party plugins. To install these plugins manually, please go to Plugins >>> Add New. Search the name of the plugin, install and activate it as above.

There are 13 plugins you need to install to use and build a site like our demos:

2. Import Sample Data

When you are done with the plugin installation, the next thing you might want to follow is to import our sample data. There are also 02 different ways to help you implement this process. However, each way has its own purpose which are worth noticing:

3. Import Manual Data

In case importing all the demo data into your website is an unnecessary step, you can choose another way to manually import some parts of demo data instead.

But before moving straight to the point, there are some notes worth checking:

  • Make sure you have installed all recommended plugins before importing sample data.
  • In /Sample Data/ folder, you can find 4 folders containing our sample data which are:

    • Milano.xml All Data - sample demo data of some pages from our demo

    Milano-revoslider.zip Revolution Slider Settings

  • The import process may take several minutes due to large data and your server capacity. If your server setting "Max Execution Time" is too low, increase it (as your hosting provider). Please do not close the browser until it finishes. If it fails, you can run this process again until seeing the "Success Message".
    Demo Images are not installed due to some copyrighted licenses
  • If you have to run the process more than once, menu items may be duplicated. Just go to Appearance > Menus and edit/delete Menu items
  • Feature images are not imported (We use licensed photos on our demo page). Instead you will see placeholder images.

Now begin with the detailed step below to manually import all parts of sample data:

In case you want to export slider from a website, you can go to Revolution Slider >> Export Slider

Step 2 - Import Widget into WordPress

Step 3 - Import Theme Options Data into WordPress

  • To transfer theme options data into your website, go to Apperance >> Theme Options >> Backup Options >> Import Options (.txt file)

  • Step 4 - Import Demo Content

    • SETTING HOMEPAGES

    You can quickly build single page, post, portfolio pages using Visual Composer for WordPress that is a drag-and-drop front-end and back-end page builder plugin to save you time, energy on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required

    You don't know about Visual Composer? Please follow that: http://vc.wpbakery.com/video-academy/

    1. Hompage Samples

    1.1. Classic Mode


    1.2. Backend editor mode


    1.3. Set a page as homepage

    To set one of pages created as homepage, firstly go to Setting >>> Reading. Then set Front page displays to A Static page. Choose Home Page page as Front page and blog as Posts page

    1.4. Selecting header style for homepage

    To set up header style for each homepage, you scroll down to page layout in Page options. There will be 3 header styles for you to select including header style 1, header style 2 and header style 3. For example, to set up header style like homepage 3 on demo, you will select header style 2 and insert shortcodes in above header menu box. Besides, to see header styles on front-end, you can see more setting header section

    2. Layout

    Below is an example of WordPress theme with direct instruction for every section. This captures some main components in contributing a web page:

    3. Sample Codes

    With this template, you can create any homepage in the most creative way possible, thanks to a large number of shortcodes and flexbile layouts from the theme.

    Here we provide you 3 demo pages, each comes with different style and purpose:

    3.1. Homepage Versions:

    3.2. Page Templates

    Milano provides you a great, number of sample pages and layout, which help you create an impressive website on your own:

    SETTING HEADER

    1. Main Header Setup

    To setup Header, Follow the steps below

  • Step 1: Navigate to Appearance >> Theme Options >> Choose Header settings, if you want to fixed header, you only turn ON.There are two options to select Sticky menu Sticky menu on top header, Sticky menu on middle header. Especially, Milano allows you to display fullwidth header.

  • Step 2: Milano lets you select these header styles including 3 header styles: header style 1, header style 2, header style 3

  • Step 3: Setting Header section. Milano gives you two header sections including Top, Middle. Check ON to enable style of header sections you want to.

  • Step 4: Each style of header sections has several element so that you select to show on front-end. You only need to select these elements you want to show and click to Save to see changes.

  • Top header is a part of header, it is displayed above main header. In Top header section, you can check ON to show top header. Top header permits you to display text editor, cart, social, custom menu, logo, widgets, canvas sidebar or search box.

  • Middle header is a main part of header. It is similar to top header, you can check ON to show middle header. Middle header also permits you to display text editor, cart, social, custom menu, logo, widgets, canvas sidebar or search box.

  • Step 5: Specially, Milano has a outstanding feature is that it allows you to create columns on header. The maximum number of columns is 3. By creating columns and using style of different header sections, you can config header according to the way you want to. You can drag and drop elements and change columns width freely. See front-end settings to have more details.

  • Step 6: Besides, you can set up background color, image, opacity, custom css in each of header sections (top, middle header section).
  • Step 7: Finally, the import/export function of theme header can save your time in customization. You can import data of headers you want in Header sections of Theme Option

    • Note: If you want to set header style for each page, please see more Page layout

    2. Setting menu

    The following steps will guide you how to set up main menu.

    In each menu, you can add as many items you need: links, pages, custom links, shop categories, portfolio categories

    2.1. Main menu

    • Navigate to Appearance >>> Menus and click the “create a new menu” link.

    • Enter a menu name in the “Menu Name” box and click the Create Menu button.

    • You can add as many items you need by dragging and dropping to set sub menu or position of them.
    • Furthermore, Milano has visually stunning icon sets for you to beautify each single menu level

      • Note: Choose theme locations for the menu before you save. The mobile menu is the responsive menu that will be displayed on mobile screens

      Manage locations

      That tab to allow you setting menu location you want.

      2.2. Mega Menu

      To Create A New Menu, Follow The Steps Below:

      • Step 1: Navigate to Appearance >>> Menus section.

      • Step 2: Click the “Create A New Menu” to make a new menu. Enter the name menu you want to create, then click the “Create Menu” button.

      • Step 3: To add a menu item, select one of your created pages on the left hand side and click “Add to Menu”. You can also add any posts from the left side.

      • Step 4: To add a custom menu item, enter a custom name and link into the “Links” box.

      • Step 5: Make sure you click the “Save” button.

      The Mega Menu

      This theme allows users to create 4 columns mega Menu

    • Step 1: Navigate to Appearance >>> Menus section and select to create a new menu, or edit a current menu.

    • Step 2: Only first level items can enable the Mega Menu. Click the “arrow icon” next to any parent level menu item to expand the option box. You will see an option to “Enable Mega Menu”, check the box.

    • Step 3: Select Yes to display the “Mega Menu Fullwidth”. Also choose "Mega Menu Position" such as Left or Right.

    • Step 4: If using Mega menu background, click the “Upload Image” button to upload an image.
    • Step 5: Second level menu item will show the title text above each column. To add a second level item inside the Mega Menu, select one of your pages on the left hand side and click “Add to Menu”. In addition, you also can add icon and widget into your sub-menu.
    • Step 6: The Third level will be the smaller menu items in each column. To make it a third level, drag the menu item into place, below and to the right of the second level.

    • Step 7: Make sure you click the “Save” button.

      • 2.3. Create One-page Header Menu

      If you want to create one-page header menu with smooth transitions, please following these instructions:

      • Step 1: Create a new page in section ‘Pages’
      • Step 2: Create all row sections (containing elements) in this new page and make it paralell with the number of menu items. Click to a certain menu item, you will be taken to the part of section.
      • Step 3: Configure page normally by adding shortcodes to each row you have created.
      • Step 4: In each row, click on row Setting (at the top-right corner of each row shaping pen icon)
      • Step 5: Fill in the ID section with the row ID field, the description for ID field is “(Optional) Enter a unique ID”. For example: fill in “about” word, then the ID of this row is “about”
      • Step 6: Fill in ID for all rows with separated word (ID)
      • Step 7: Go to menu: Appearance -> Menus
      • Step 8: Go to menu item and add “#about” to the URL, and It will be scrolled to the row about related same word (ID)
      • Step 9: Do the same thing with all menu items. Remember the ID name in Menu item and row ID has to be the same, the only difference here is that Menu item got character “#” before the ID name.
      • Step 10: Save all the Changes.

    4. Logo & Favicon

    Besides you upload your logo as an image file, this item has a special thing is that you can use text logo instead of image logo. The best size is 203x48px. Please use jpg, jpeg, png or gif image for best performance. Milano is also retina ready so there are additional options to upload a retina 2x logo and specific instructions that need to be followed for it to display correctly on retina ready devices.

    To Insert Your Logo, Follow The Steps Below.

  • Step 1: Navigate to Appearance >> Theme Options >> Choose Header to Setup.

  • Step 2: You will see three logo options, one is to use text logo, you turn ON if you want to use text logo instead of image logo, the other is standard desktop and the final one is for retina logo. Click upload button and select your logo file.

  • Step 3: If you are using a regular logo, the best size is 203x48px. Please use jpg, jpeg, png or gif image for best performance. If you are uploading a retina logo, it needs to be exactly 2X the size of the regular logo. For example, if the standard logo is 203x48px, the retina logo should be 406x96px. Click upload button and select your retina logo.

  • Step 4: There are also options to choose alignment of the logo, and adjust the left, top logo margins. This allows you to fine tune the placement of your logo.

  • Step 5: Click to Save all changes and see them on front-end.

    • front-end setttings

    Note: If your logo is narrowed down in tiny shape, (1) you can resize it by navigating to Appearance >> Theme Options >> Header >> Headers Section. Then move your mouse pointer to the space between two blocks. If the logo block was too small, you need to resize it until you satisfy with the result.

    (2) Also, don’t forget to adjust the padding size in “Logo Margin” of Theme Options. That is also the reason causing the logo’s narrowing.

    The final way to resolve this problem is to have some code knowledge to be able to edit the height of header section.

    (3) You can remove the max height limit by adding this code to "Apperance >>> Theme Options >>> General >>> Custom CSS"
    .k2t-logo, .k2t-logo img { max-height: inherit; max-width: inherit }

    K-EVENT PLUGIN

    If you want to create an single event, first of all, you need to install our K-Event plugin. The installation file can be found in the /Installation Files/ folder of the download package or in our recommended plugins notification when you successfully installed Milano theme. After finishing the installation, you will see K-Event in the left menu panel.

    1. Create an Event

    1. Go to K-Event > Add New Event
    2. Enter event title, description and other information and you will have a event detail like this:
      • Event Layout

        - Event Layout: Select "Default" to use settings in K-Event Settings page. If you do not choose “Default”, page will be formatted with “Left” sidebar , “Right” sidebar or no sidebar (“Hidden“).

      • Event Information

        - Start Date: Event Starts Date & Time

        - End date: Event Ends Date & Time

        - Event ID: Event ID should be unique.

        - Staff of event: These members take part in the preparation process of event.

        Note: In order that all avatar of members display well on the various layouts of theme, the presequite dimension of images has to be larger than 70x70px.

      • Event Location

        - Address: Enter Location Address of Event

        - Phone: Enter Contact Number of event

        - Website: Enter Website URL of event

        - Email: Enter Email Contact of event

      • K-Event titlebar: You can custom anything related titlebar of event post type.
      • Excerpt

        The brief introduction about event

    2. K-Event Setting Page

    If you want to change event page's setting, you need to navigate to Appearance >> Theme Options >> Event and continue to make changes in there.

  • Event settings
    1. Layout: Select layout style for Events Listing page. It can be either "Right Sidebar", "Left Sidebar", "No Sidebar".

    2. Sidebar name: You might want to fill it in by the name of custom sidebar in Theme Option >> Widget.

    3. Event style: Select one of two options: classical list or style 2.

    4. Number of related events: Enter the number of Events displayed in the Related Events section (in a Single Event page)

  • Meta

    Turn on to show author, time, date, address, related event.

  • titlebar: You can change anything related to titlebar of event category and single event

    • 3. Events Listing page

    Events Listing page will be defined by using our K-Event Listing shortcodes in Visual Composer.

    For example: To create an Event Listing, we use K2T event shortcodes and choose Style options with other related information. See more detail K2T event shortcode settings

    SHORTCODES

    Visual Composer is a very modern and useful feature of Milano, it allows users to make a new page in a short time, simplifying shortcodes. If you like the traditional way to create your own page, you can always click to Classic Mode.

    It is very easy to create your own page.

    Step 1:

    • Create a very new page by yourself, choose "Add element" to insert any rows, texts or shortcodes you want to show on your page or "Add text blog" to write text.
    • Create new page based on available layouts: Landing page, Call to action page, feature list, description page, product page or service list.

    Step 2: To custom each row, you choose options in the right of the row.

    2.1. Edit this row:

      Design option:
    • Css: padding, border and margin.
    • Color: color of border and background. Choose color from color palette.
    • Theme_border: select theme from theme list: solid, dotted, dash, none.... Default is theme defaults.
    • Theme_background: select theme from theme list: cover, contain, no repeat, repeat. Default is theme defaults.
    • Box_controls: tick the checkbox if you want to simplify controls. Otherwise, deselect it.
      • General:
    • row_fullwidth: tick the checkbox if you want the row to have full width (no wrap content). Otherwise, deselect it.
    • Background_type: background color, background image, background slider and background video
    • Color" color of background. Choose color from color palette.
    • ID: enter a unique ID for your button.
    • Class: enter a unique class name for your button

      • 2.2. Clone: make a clone from original element.

      2.3. Delete: delete the element.

      Step 3: Each element you choose will have different setting. The below is detail setting for each shortcode.

    1.1. Button

    Here are the parameters of this shortcode:
    • Button_text: text you want to show inside the button.
    • Link: the URL that the button should link to.
    • Link_target: open in a new window or Open in the same frame as it was clicked.
    • Style: You can choose any style such as modern, classic, flat, outline, 3D, custom, outline custom.
    • Shape: Rounded, Square
    • Color: Grey, Green, Black, White...
    • Size: button size. You can choose among mini, small, normal or large. Default is normal.
    • Align: Inline, left, center or right. Default is Inline.
    • Add icon: tick the checkbox if you want to add icon. Otherwise, deselect it.
    • Icon alignment: Icon position: left or right.
    • Icon library: you can choose different type of icons.
    • Animation: It can be top to bottom, bottom to top, left to right, right to left or center.
    • Class: enter a unique class name for your button

    1.2. Icon Box

    Here are the parameters of this shortcode:

    • Title: title/name of the iconbox.
    • Font size: size of font title. Numeric value only. Unit is pixel.
    • Color: color of the title, icon, icon background and background. You can choose any color from color palette.
    • Text_transform: tranform of text: inherit, uppercase, lowercase, initial and capitalize.
    • Sub_title: sub title you want to show below Title.
    • Layout: select layout for your icon box: 1, 2 or 3. Default is 1.
    • Type: choose icon type: Icon fonts or Graphics.
      • .
    • Size: choose size of the icon. Numeric value only. Unit is pixel.
    • Transparent:tick the checkbox if you want the icon to be transparent. Otherwise, deselect it.
    • Border: tick the checkbox if you want icon to have border. Otherwise, deselect it.
    • Link: the URL of “Learn more” button.
    • Link_text: default is “Learn more”.
    • Align: none, left, right or center. Default is none.
    • Content: content you want to show inside box. You can insert image or audio too.
    • Box_border: tick the checkbox if you want the box to have border. Otherwise, deselect it.
    • Margin margin of top, right, bottom and left. Numeric value only. Unit is pixel.
    • Animation: tick the checkbox if you want to enable animation, then select kind of animation and fill animation time delay. Otherwise, deselect it.
    • ID: enter a unique ID for your step.
    • Class: enter a unique class name for your step.

    1.3. Heading

    Here are the parameters of this shortcode:

    • Title: name/title of heading.
    • Sub_title: content subtitle of heading.
    • Heading_tag: h1, h2, h3, h4, h5 or h6. Default is h1.
    • Heading underline:If you choose True, a special symbol will be displayed under heading
    • Align: heading align: left, center or right. Default is left.
    • Font: use any font from Google Font.
    • Font_size: Numeric value only. Unit is pixel.
    • Animation: tick the checkbox if you want to enable animation, then select kind of animation and fill animation time delay. Otherwise, deselect it.
    • ID: enter a unique ID for your step.
    • Class: enter a unique class name for your step.

    1.5. Testimonials

    Here are the parameters of this shortcode:

    • Style: select square or free style. Default is style 1.
    • Avatar: choose avatar for testimonial author from library media.
    • Align testimonial: Avatar position: left, center or right.
    • Name: name of testimonial author.
    • Position: position of testimonial author.
    • Link_target: open in a new window or open in the same frame as it was clicked.
    • Text: you can add text or image, audio... from library media.
    • Animation: tick the checkbox if you want to have animation on your page. Otherwise, deselect it.
    • ID: enter a unique ID for your step.
    • Class: enter a unique class name for your step.

    1.6. Images

    Here are the parameters of this shortcode:

      General:
    • Widget title: enter text which will be used as widget title. Leave blank if no title is needed.
    • Image: select image from media library.
    • Image_size: enter image size. Example: "thumbnail", "medium", "large", "full" or other sizes defined by current theme. Alternatively enter image size in pixels: 200x100 (Width x Height). Leave empty to use "thumbnail" size.
    • Image_alignment: select image alignment: align left, align center or align right.
    • Image_link: enter URL if you want this image to have a link.
    • Image_style: select image style: rounded, outline, shadow or border. Default is none.
    • Image_hover_style: select image hover style: dark, light or banner. Default is none.
    • Animation: tick the checkbox if you want to have animation on your page. Otherwise, deselect it.
    • ID: enter a unique ID for your step.
    • Class: enter a unique class name for your step.
      • Design option:
    • Css: padding, border and margin.
    • Color: color of border and background. Choose color from color palette.
    • Theme_border: select theme from theme list: solid, dotted, dash, none.... Default is theme defaults.
    • Theme_background: select theme from theme list: cover, contain, no repeat, repeat. Default is theme defaults.
    • Box_controls: tick the checkbox if you want to simplify controls. Otherwise, deselect it.

    1.7. Countdown

    Here are the parameters of this shortcode:
    • Dropdown Style: Square, square fill color, circle, circle fill color or solid.
    • Time: fill the time
    • Year, Month, Day, Hour, Minute, Second: fill in the blank the word of year, month, day, hour, minute and second in your language.
    • Font_size: size of text.
    • Align: left, center or right.
    • Color: color of number and background. Choose color from color palette.
    • ID: enter a unique ID for your step.
    • Class: enter a unique class name for your step.

    1.8. Google maps

    Here are the parameters of this shortcode:
    • Zoom level: between 0-20.
    • Latitude: line of latitude.
    • Longitude: parallel of longitude.
    • Width: default is 600.
    • Height: default is 400.
    • Address: the place you want to mark.
    • Marker: choose Yes or No. Yes to display marker.
    • Marker_image: to change default Marker.
    • Traffic: tick the checkbox if you want to show traffic on the map. Otherwise, deselect it.
    • Draggable: tick the checkbox if you want to drag the map. Otherwise, deselect it.
    • Show_Info_Map: tick the checkbox if you want to show info map. Then fill information in the Content Info Map. Strong, br are accepted. Otherwise, deselect it.
    • Maptype: the type of Google Maps: Roadmap, Satellite, Hybrid, Terrain.
    • Hide_control: tick the checkbox if you want to show control on the map. Otherwise, deselect it.
    • Scroll_wheel_zooming: tick the checkbox if you want to scroll wheel zooming. Otherwise, deselect it.
    • Map_type: select type of map: Road map, Satellite, Hybrid or Terrain.
    • Color: Select color of background from pallete.
    • ID: enter a unique ID for your step.
    • Class: enter a unique class name for your step.

    1.9. Member

    Here are the parameters of this shortcode:
    • Member_name: name of member.
    • Role: role of member.
    • Link: fill link of Facebook, Twitter, Skype, Pinterest, Instagram, Dribble and Google Plus.
    • Info: fill info of member. You can add text, image...
    • Animation: tick the checkbox to enable animation, then choose style of animation and time delay (numeric value only, 1000 = 1sec).
    • ID: enter a unique ID for your step.
    • Class: enter a unique class name for your step.

    1.10. Socials

    To increase interact between you and your visitors, Milano has 4 different popular social buttons for you to choose: facebook, twitter, google plus and pinterest.

    • Facebook: select type: Standard, button count and box count.
    • Twitter: select type: horizontal, vertical or none.
    • Google Plus: select button size: standard, small, medium or tall. And select type of annotation: inline, bubble, none.
    • Pinterest: select type: horizontal, vertical or no count.

    1.11. Contact form

    Here are the parameters of shortcode Contact form:

    1.12. blog post

    Here are the parameters of shortcode blogpost:

    1.13. Open table

    Here are the parameters of this shortcode:

  • Your ID restaurant: ID of your restaurant
  • Text of button: Text you want to show inside button.
  • Enable animation: Check the box to enable animation

    • 1.14. K2T Event

    Here are the parameters of shortcode K2T event:


  • Style for event: You can choose style 1 or style 2
  • Categories: Fill in category ID
  • Specific event: Fill the ID of event which you want to set of
  • Pagination: Show or Hide pagination
  • Featured image: Show or hide featured image
  • Excerpt: Show or hide excerpt
  • Button joint event: Fill your event link in box

    • PAGE LAYOUTS

    Title Bar

    Page titlebar: If you don't want to fill the title name above, you can customize your page titlebar here. Beside some simply options, you can notice some special options in Grid:

    • Title bar: Show or hide title bar. Default is show.
    • titlebar layout: Choose from justify or center for alignment of elements on titlebar.
    • Main title underline: If you choose to show "main title underline", you will see a symbol below the title, this is a special symbol of Milano theme.
    • titlebar font size: Set the size of your text in title area.
    • Top Padding and Bottom Padding: It is a line at the top or bottom of your title area, which is different from padding of content.
    • Background image: select image from "Media" or your computer. Set your background image position among 9 available positions.
    • Background color: Set your color in title area
    • Background image position: set the position of image background from position list. Default is left top.
    • Background zoom effect: True or False. If you choose True, your background will have zoom effect. Otherwise, set False. Default is False.
    • Background parallax: True or False. If you choose True, your background will have nice paralax effect in title bar.
    • Title opacity: adjust the opacity of titlebar

    - Shadow opacity: Shadow makes a dark area for titlebar here, highlighting your titlebar name. This is the setting to adjust the opacity of titlebar

    - Overlay opacity: An effect cover the surface of titlebar area with a coating. This is the setting to adjust the opacity of overlay

    - Clipmask opacity: This is the setting to adjust opacity of clipmask, an effect cleaves scope of title into small squares.

  • Custom title content:You can create your content for title area instead of filling the title name above, which is the same as customizing post content: you can add image, media or using shortcodes.

    • Blog Option

    • Blog tab in page options will help you select categories of blog which contain posts you want show in your blog page. For example, you want to show posts of Carpentry and Electricity categories, you only need to select Carpentry and Electricity, these posts belongs to these categories will be showed in your blog page.

    • To add new category, you click to "+" and fill in the name of new category. Besides, there are an option for you to select parent category.

    Page Layout

    There are 5 page layout styles. Layouts can only be customized in Page Layout.

      To create a page with Standard Layouts (Default, 100% width, Left Sidebar, Right Sidebar and No sidebar), simply choose among the options in Page Layout and set Page Template to Default Template.

      Page Layouts is to customize page content arrangement. There are 4 page layouts including: right sidebar, left sidebar, 100% width and no sidebar. Default layout is right sidebar

      • Page sidebar width: customize width of sidebar. The measuring unit is %
      • Background color: set your page background color here.
    • Above header menu: Insert your content here (html and shortcodes are allowed)
    • Header style: You can choose one of three header styles for each page.

    Row

    • Step 1: Navigate to Pages >> Add New Page >> Backend Editor.

    • Step 2: You can choose Add Element to add new row.

    • Step 3: Milano supports you a lot in customizing the row settings. You can set background for the row by selecting background type including background color, image, video, sider or set video background
    • For Background image: You only upload the image you want to set background, after then setting background position, size, animation, repeat. Besides, if you want to parallax effect for background you only check to box, or create mask layer image by uploading an image file and set the attributes of image.
    • For Background video: You can insert Youtube link and customize opacity, starting time, quality and the other attributes.
    • For Background slider: Uploading images for slider and set auto play or parallax effect by check to box
    • Step 4: In design options tab, this theme supports you in adjusting margin, border and padding. You will fill in the size you want to (unit: pixel) and set color for border.

    Blog

    1. Create blog single post

    Step 1- Navigation to Post in your WordPress admin. Click on Add New to make a new post.

    Step 2 - Create a new post with various options

    - Create a title and insert your post content in the editing field. You can use any of our shortcodes inside post.

    Add your post format. It includes:

    If you choose format "video, audio, link, quote, gallery", please customize their detailed options in "Post format".

    - Add category, tag and your featured image post from the right side. Please add new category if it hasn't existed. Image format will take the featured image as the post image.

    In order that all posts display well on the various layouts of theme, the presequite dimension of images has to be larger than 850x410px for blog large with sidebar and dimension of images has to be larger than 550x380px for blog medium.

    Post layout: We include 4 layouts: default, right sidebar, left sidebar, no sidebar. Choose any fit layout for your single post page.

    Short description: you can fill a short description for post, this information will be displayed below the heading.

    Custom sidebar name: this is unique option of Milano. By using one great third party plugin named Custom Sidebar by WPMUdev, you can create your own sidebar apart from default sidebars. See full instruction in Page Layout section. In Milano demo data, we have created 3 new sidebars: shortcode sidebar, canvassidebar and custom-shop-sidebar.

    - Customize Post metadata you have some options:

    • Categories: Show or hide post's category.
    • Post date: Show or hide post date.
    • Tags: Show or hide tags.
    • Authorbox: Show or hide post authorbox.
    • Related post: Show or hide related post.

    - Customize Post format if you choose one of these formats "video, audio, link, quote, gallery".

    For format "video", you have some options:

    • Video format url: you can only add link from Vimeo and Youtube
    • Video source: select video source: video link, upload local file, video embed code.

    For format "audio", you have some options:

    • Audio source: select audio source: soundcloud link or upload local file.
    • Link: insert soundcloud link, or link audio from other websites (option for format "Link" only, please fill in full http:// address).

    For format "quote", you have some options:

    • Quote author: fill the author name of the quote.
    • Author quote url: add author link.
    • Quote content: fill the quote.

    For format "gallery", you have some options:

    • Gallery format: add images, audio, video... from gallery.
    • Gallery auto play: True or False. If you choose True, your gallery will play in auto. Default is False.
    • Gallery duration time: fill duration time for your gallery. Default is 5000.
    • Gallery speed: custom the speed. Default is 300.
    • Gallery pagination: True or False. If you choose True, your gallery will be paginated. Default is False.
    • Gallery navigation: True or False. If you choose True, your post will have gallery navigation. Default is True.
    • Gallery mousewheel using: True or False. If you choose True, the gallery can be used by mousewheel. Default is True.

    Step 3- Click to Settings >>> Readings to choose number of post can be shown in each blog page.

    2. Create a new blog page

    There are 2 blog styles: blog medium, blog large. Each style can be customized in many layouts: left sidebar, right sidebar, no sidebar.

    It is very easy to create your own blog.

    Step 1: Choose "Add New" to create a new blog page.

    Step 2: Customizing some special options: Choose blog Template on Page Attributes. 2 blog styles: blog medium and blog large.

    Step 3: Customize Page Options. There are 3 options you must to change: Page Layout, Page titlebar and blog.

      To customize Page layout, see more dertail Page layout section

      Page titlebar:

      To Set Different Settings Per Page/Post, Follow The Steps Below. These mentioned parameters are already explained in the blog section

      • Step 1: Open an new page or post in your WordPress admin

      • Step 2: The Page Title Bar Options section, there are a lot of options that you can set to customize the page title bar per page or post. You can show or hide the bar per page/post, select titlebar layout, enter Page titlebar font size, top padding, bottom padding, choose background image or color, style, enter custom titlebar content.

      • Step 3: When finished, make sure to save the page.

      See front-end

      Blog Large Right Sidebar

      Blog Large Left Sidebar

      blog Medium

    SHOP

    Milano is completely compatible with WooCommerce, you can use all WooCommerce shortcodes and functions to build your shop pages. More about the WooCommerce shortcodes.

    How To Create Your Products
  • Step 1: In the dashboard, Click on the Products sidebar menu and click on “Add Product” button. Enter a name for your product.

  • Step 2: Write the product description into the post content field, this will be all the product information.

  • Step 3: You enter the product information price, SKU, shipping, and more) into the “Product Data”.

  • Step 4: The “Product Short Description” permit you to write the short information about product.

  • Step 5: Set “Featured Image” in the right sidebar.

  • Step 6: When all manipulations are finished, click “Publish” to show on your main shop page.
  • Step 7: For Variable product, you click to Attributes tab to add more options for product. For example, you create an option "size" with values: small, medium, large and don't forget save attributes
  • Step 8: After you add options, you click to Variation tab to add variation. You can add variations from default options or create variations from all attributes which you created in Attribute tab.
  • Step 9: In each option, you will set up information for that option. For example, regular price, sale price, stock status, weight, dimensions of product. Finally, click to save changes and see changes on front-end.

    • See front-end

    Simple product

    Product with option

    Product with complex options

    The Product Page is Described Above.


    How To Adjust shop in Milano
  • Step 1: Click on the WooCommerce menu item on your Dashbroad

  • Step 2: In "General” tab, you can adjust general options such as locations and currency options for products.

  • Step 4: In "Product" tab, you can adjust measurements: weight, dimensions or reviews.

  • Step 5: Back to the product page and set “Featured Image” in the right sidebar.

  • Step 6: When all manipulations are finished, click “Publish” to show on your main shop page.
    • How To Customize Your Own shop Page

    • In shop Archive Template of Theme Option, you can choose 3 template: Right Sidebar, No Sidebar or Leftsidebar

    • In Single Product, you can customize your page with 3 templates : Right sidebar, Left sidebar or no sidebar

    • On single product page, if you want to display the buttons to share your products on social networks such as facebook, twitter, pinterest, google+, tumblr, email, or display related products you only select On or Off. On if you want to display and Off is opposite.

    • In detail, there are options for you selecting such as number of related products to show on desktop, number of related products to show on tablets, number of related products to show on mobile, and custom footer for single product.

    THEME OPTIONS

    General


  • Step 1: Navigate to Appearance >>> Theme Options >>>General.

  • Step 2: General in Theme Options is where you can customize options such as Sidebar width, header code, footer code or custom CSS and Icons.

  • Step 3: Check ON if you want to show breadcrumb or page loader. Besides, you can customize sidebar width

  • Step 4: For Header code, footer Code, custom CSS you can load Google Font, fill Google Analytics tracking code, or write your custom CSS.
    • Icons

    There are numerous types of icon such as favicon, Iphone icon, Iphone retina icon, Ipad icon, Ipad retina icon. You only need to upload icons as a image file

  • Favicon - Favicon is a small icon image at the topbar of your browser.

  • Iphone icon - The iPhone icon is a file used for a web page icon on the iPhone. When someone bookmarks your web page or adds your web page to their home screen, this icon is used. If this file is not found, these products will use the screen shot of the web page, which often looks like no more than a white square.

  • Iphone retina icon - The same as iPhone icon but for Retina iPhone.

  • Ipad icon - The same as iPhone icon but for iPad.

  • Ipad retina icon - The same as iPhone icon but for Retina iPad.

    • Layout

  • Step 1: Navigate to Appearance >>> Theme Options >>>Layout.

  • Step 2: Layout tab in theme options is where you can customize content width. You can choose content width in the range from 940px to 1200px. Check ON to enable boxed layout.
  • titlebar

    • The Title Bar Options section, there are a lot of options that you can set to customize the page title bar per page or post. You can select titlebar layout (Justify or Center).

  • Enter Page titlebar top padding, bottom padding, choose background image or color, position (Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, Center Bottom).

  • Check ON to turn background parallax, customize titlebar shadow opacity, titlebar overplay cpacity, titlebar clipmask opacity according to percentage.

  • Enter titlebar custom content.

    • Style

  • Primary Color
  • Step 1: Navigate to Appearance >>> Theme Options >>>Style.

  • Step 2: Select color for site in primary color (main color), select color for heading and text and set color to footer background.

  • Step 3: You can select color for link, link hover, footer text and footer link.

    • Typography

    Font Family
  • Step 1: Navigate to Appearance >>> Theme Options >>>Typography.

  • Step 2: You can choose a normal font or Google font for Navigation, Heading and Body.
    • Headings Font Size

    In this section, you can customize Font size for Heading types or Body.

    General Font Size and Font Type

    You will customize Main navigation, Submenu of Main navigation, titlebar title font size in elements font size section.

    Font Type: You can select type of font for navigation text transform such as capitalize, uppercase, lowercase, inherit.

    blog

    All the changes that have been made in this 'blog' section of Theme Options will effect the entire website. That means if you make any adjustments in a certain page, it will overwrite options in Theme Options.

    blog Layout
  • Step 1: Navigate to Appearance >>> Theme Options >>>blog.

  • Step 2: blog tab in theme options help you select blog style such Large, Medium, Small, Grid, Masonry or Timeline, choose blog sidebar position (right sidebar, left sidebar, two sidebar, no sidebar).

    • front-end setttings

  • Blog Large Right Sidebar
  • Blog Large Left Sidebar
  • Blog Medium

    • blog Show/Hideing Options
  • Step 1: Navigate to Appearance >>> Theme Options >>>blog.

  • Step 2: There are options about content or excerpt. Select display post content or excerpt on the blog, adjust excerpt length (words).

  • Step 3: To display categories filter, title link, post date, number of comments, categories, author, excerpt, "Readmore" link, tags, social share you only need to turn On.

    • The Title Bar Options section, there are a lot of options that you can set to customize the page title bar per page or post. To show a special symbol under the titlebar, you can turn On. Besides, you can enter font size for title or select titlebar title color.

  • Enter Page titlebar top padding, bottom padding, choose background image or color, position (Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, Center Bottom) and select background repeat.

  • Check ON to turn background parallax, customize titlebar shadow opacity, titlebar overplay cpacity, titlebar clipmask opacity according to percentage.

  • Enter titlebar custom content.

    • Social

    Similarly, turn On to show social buttons and turn Off if you do not want to display them.

    Single

    NOTE: Similar to the 'blog' section, all the changes that have been made in this 'Single' section of Theme Options will effect the entire website. That means if you make any adjustments in a certain page, it will overwrite options in Theme Options.

    Single Layout
  • Step 1: Navigate to Appearance >>> Theme Options >>>Single.

  • Step 2: Select single layout such as right sidebar, left sidebar or no sidebar. Right sidebar will be selected by default.
    • Meta
  • Step 1: Navigate to Appearance >>> Theme Options >>>Single.

  • Step 2: Check On if you want to show categories, post date, post navigation links, post tags, author box, related post, comment form on single post. Check Off if you don't want to display them.

    • WooCommerce

    You can go to shop to know more about Woocommerce customization.

    404 Page

  • You can enter 404 Title, custom text, upload 404 image you want to show when users go to 404 page. Check ON to display subcribe newsletter form. But you need to install newsletter plugin.

    • Social


  • Step 1: Navigate to Appearance >>> Theme Options >>>Social.

  • Step 2: Social Tab in Theme Options is where you will insert your custom social media links you want to display. If you want to display Facebook icon, Twitter icon or Google+ icon in header or footer you need to insert the URL of your Facebook, Twitter, Google+ in the corresponding field.

  • Step 3: To display icon title when you hover icons, you only need to turn On in the icon title field.

    • Backup Options


  • Step 1: Navigate to Appearance >>> Theme Options >>> Backup Options.

  • Step 2: In Backup Options tab you can use the two buttons backup options and restore options to backup your current options, and then restore it back at a later time. This is useful if you want to experiment on the options but would like to keep the old settings in case you need back.

    • TRANSLATION

    Please follow these simple steps to get Milano translated to other languages with WPML (WordPress Multilingual).

  • Step 1: Install & activate Milano WordPress theme.

  • Step 2: Open the file “en_US.po” in folder “languages” of Milano with poEdit. The tool will automatically generate the list that need translating. Learn how to download and use poEdit in details right here

  • Step 3: After the translation is ready, go to File → Save as… to save your translations to a .mo file. Your file should carry the name of the language you will be translating into. Check the Codex page to give your file the right name

  • Step 4: Copy that .mo file into “languages” folder of Milano theme folder.

  • Step 5: Install WPML plugin. Activate the plugin and select the language you want to translate to.

    • Milano is 100% compatible with WPML plugin. For more information about the WPML plugins, please refer to its documentation here or in Milano package.

    FONT ICONS

    Follow these steps to know how to add different icons fonts to Milano:

    Step 1: Copy the icon fonts following the link: theme root / framework / k2ticon / inc / font. An icons fonts standard includes 4 files: your_font.eot, your_font.svg, your_font.ttf and your_font.woff

    Step 2: Open file as link: root theme / framework / k2ticon / css / style.css to inform font-face and the whole css class for the new font. (Note to change the path to adapt). For example:

    @font-face {

    font-family: " your_font ";

    src: url("../inc/font/ your_font.eot");

    src: url("../inc/font/ your_font.eot#iefix") format("embedded-opentype"),

    url("../inc/font/ your_font.woff") format("woff"),

    url("../inc/font/ your_font.ttf") format("truetype"),

    url("../inc/font/ your_font.svg") format("svg");

    font-weight: normal;

    font-style: normal;

    }

    .icon-1 { content: “” }

    .icon-2 { content: “” }

    ….

    Step 3: Open file as the direction: theme root / framework / k2ticon / inc/ list.php and find line 729 to add new class of the new icon fonts

    ‘your_font ‘ => array(

    ‘icon-1’,

    ‘icon-2,

    ‘icon-3’

    …

    )

    Step 4: Open file as the direction: theme root / framework / k2ticon / js / generator.js and find line 56, duplicate line 56-59 and then paste down

    if ( selectedIcons == ‘your_font-icons-list' ) {

    listIcons.hide();

    jQuery( 'ul. your_font -icon-list' ).show();

    }

    Step 5: Open file as the direction: theme root / framework / k2ticon / k2ticon.php, find line 80 to paste the code down

    Step 6: Done!. See the results!

    Note: You can replace "your_font" by your own name

    FINALLY

    Thank you for reading!

    We hope you can create the best website with Milano.

    One again, thank you so much for using Milano. 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.

    Do not hesitant to contact us via email: earththeme.com@gmail.com or submit ticket via Forum

    Please take a screenshot photo with descriptions about your problem. More details about your problems help us more easier to figure out and respond you sooner.

    *******************Note*********************************************************************************************************

    SCOPE OF SUPPORT

    Our support covers getting setup, trouble using any features and any bug fixes that may arise. Unfortunately we cannot provide support for customizations or 3rd party plugins. If you need help with customizations of your theme, please contact with us with your requirement. Our technical team will help you with some fees.

    SUPPORT SCHEDULE

    Our working time is 8:30am - 5:30pm from Monday to Friday (GMT+7). So if you email us or submit ticket besides this working time, we are really sorry that we are not able to respond you soon. We will try to reply you as fast as we can. Especially if you email or submit ticket at weekend, please be patient and we will respond to you right when we are back on Monday.

    Support forum

    CONTACT

    Facebook

    Twitter

    Google Plus

    Youtube

    Reference WordPress support (installation, development): Learn to HTML, CSS, PHP, Javascript, etc