XGo Back

Hello.

Thank you for choosing Infinito Wordpress Theme . Bellow you will find all the necessary help and documentation on how to use the theme.
Legend:

Internal URL
External URL
Figure

1.Download

You can download the theme in 2 ways:

  1. By logging in to your account with the credentials created when you made the purchase - then click on View orders and downloads
  2. From the purchase receipt email ( This link will be valid only for 24 hours ) - If email is not found please check your spam folder also

Note:The main file that you need to download it's Infinito.zip
Otherwise when you will try to install the theme you might get this error Theme is missing the style.css stylesheet
The other files that are included in the download are: Infinito Child Theme.zip , Documentation.zip.
Tip: If you plan on modifying the theme core files, we suggest you install the Infinito Child Theme also, and make your modifications there. By doing this you will not lose your custom modifications when the main theme will receive an update. More information about this topic can be found here

2.Installation

2.1 Installation

Theme can be installed in 2 ways:

  1. 1 . WordPress Theme Manager as seen on Fig. 2
    1. Go to Appearance > Themes > Add new > Upload
    2. Select the zipped theme folder infinito.zip that you just downloaded from themeforest
    3. Press Install Now and you are all set.

    4. Note: When you install via WordPress Theme Manager please make sure your PHP server upload_max_filesize and post_max_size are bigger than or at least equal to 8 MB. If you are unsure about how to do this, please contact your hosting provider or choose the second installation method: Install via FTP.

    5. Note: If upload_max_filesize and post_max_size are NOT bigger than or at least equal to 8 MB you might get this error: Warning: POST Content-Length of "some" bytes exceeds the limit of "your" bytes in Unknown on line 0 The link you followed has expired.Please try again.

Install via Wordpress theme manager
Fig. 2
  1. 2 . FTP Upload as seen on Fig. 3
    1. Unzip the file infinito.zip that you just downloaded from themeforest
    2. Login to your server with your favorite FTP client
    3. Navigate to your website and then go to wp-content/themes folder
    4. Copy the extracted files to themes folder
    5. Login to your Wordpress website
    6. Go to Appearance > Themes
    7. Locate the Infinito theme and click Activate as seen on Fig. 4

    8. Note: When you extract the archive make sure that all folders and files are placed in a folder called infinito, and copy that folder to wp-content/themes

Install via FTP
Fig. 3
 Activate theme
Fig. 4

2.2 Required plugins

After successful theme installation:

  1. You will be redirected to a welcome page
  2. First of all you need to activate your theme ( as seen on Fig. 5 - step 1 ) using your purchase code, in order to be able to download the plugins and use 1 Click Importer. You can find your purchase code in your account , or in the receipt email.
  3. A notice will inform you that some plugins are required to be installed
  4. Click on Begin Installing Plugins as seen on Fig. 5 - step 2
  5. Check all plugins and click on Bulk Action - > Install -> Apply as seen on Fig. 6
  6. Check all plugins and click on Bulk Action - > Activate -> Apply as seen on Fig. 7
  7. Congratulations! Your theme is ready for use now.
Begin installing plugins
Fig. 5
Install plugins
Fig. 6
 Activating plugins
Fig. 7

Note: Please make sure that when you click Bulk action first you Install the plugins, and then click Activate plugins.

2.3 Theme update

When a new theme update is released you will be informed at the top of your wordpress admin screen, and we strongly recommend that you update immediately, as this may add new features to theme and fix bugs/errors.

Important Note: When you update the theme, we strongly recommend you make a backup of your database and files first.

3.One Click Importer

With this option you can import any demo in seconds. To do this follow these simple steps:

  1. Navigate to admin menu Infinito > 1 Click Importer
  2. Navigate through demos and choose the one you like
  3. Click on the picture of your chosen demo
  4. Click the Import button as seen on Fig. 8 bellow and confirm the installation by pressing Yes
  5. Wait for the installation to complete. Install time may vary, depending on your server performance.
  6. Congratulations! Your new website it's ready.

Note: Before clicking Import button, please make sure that the required plugins are active. This are listed each time when you click on a demo, above the Import button

One Click Demo Import
Fig. 8

4.Header

Header is the first section of your website, and it contains your website logo, menu, and top bar info with social incons, phone, address, and e-mail.
To access your header options navigate to admin menu Infinito > Theme Options > Header
All header options are explained bellow:

4.1 Logo

Logo options are located in admin menu Infinito > Theme Options > Header > Logo as seen on Fig. 9. Options available:

  1. Logo - allows you to upload a logo via wordpress media upload
  2. Retina Logo - allows you to upload a retina logo via wordpress media upload. Don't forget to make it twice the size of the regular logo
  3. Logo width - allows you to add a width to your logo
  4. Logo margin - allows you to add margin(s) to your logo
Header logo options
Fig. 9

4.2 Layout

Header layout options are located in admin menu Infinito > Theme Options > Header > Layout as seen on Fig. 10. Options available:

  1. 1 . Header position
    1. Default - Display header above all content
    2. On Slider - Display header on slider/content(it is recommended to use transparent header)
    3. Under Slider - Display header under slider ( you need to select a slider from Pages > Edit > Page options > Header Position Under Slider. )

    4. Note 1: Please note that the above options are only valid for homepage(s) that have a slider right bellow the header, on other pages the header position it's always above all content ( default )

    5. Note 2: Please note that header position options only work for horizontal and overlay header layouts.

    6. Note 3: If you want to use the under slider option, please select a slider from Pages > Edit > Page options > Header Position Under Slider Make sure that you don't have another slider in the page as your first section, otherwise slider will show twice.

  2. 2 . Header layout
    1. Logo left - Display a header with logo on the left and menu on the right
    2. Logo right - Display a header with logo on the right and menu on the left
    3. Logo left with separators - Display a header with logo on the left and menu with separators on the right
    4. Logo right with separators - Display a header with logo on the right and menu with separators on the left
    5. Logo left - menu bellow - Display a header with logo above, menu bellow, alignment left
    6. Logo center - menu bellow - Display a header with logo above, menu bellow, alignment center
    7. Logo right - menu bellow - Display a header with logo above, menu bellow, alignment right
    8. Center logo - two menus - Display a header with logo on the center and two menus on the left and right
    9. Vertical left - logo top - Display a vertical header on the left, with logo above and menu bellow
    10. Vertical left - logo bottom - Display a vertical header on the left, with logo bellow and menu above
    11. Vertical right - logo top - Display a vertical header on the right, with logo above and menu bellow
    12. Vertical right - logo bottom - Display a vertical header on the right, with logo bellow and menu above
    13. Overlay - Display an overlay header with logo and menu
      • Overlay Style - This is the appear effect of the header
      • Overlay icon trigger color - Choose color of overlay trigger menu
Header layout options
Fig. 10

4.3 Options

Header options are located in admin menu Infinito > Theme Options > Header > Options as seen on Fig. 11. Options available:

  1. Width - This is the width of the header - Full width / Boxed
  2. Background width - Use this option when header is set to boxed, and you want the background to be full width
  3. Paddings - Add header paddings top and bottom.You can also enter 0 (zero) for no paddings
  4. Background - Add background to your header

  5. Important Note: If you have a transparent header and/or top bar, the sub-header background will serve as a background for the header and top bar also. See Fig. 22 A for a better understanding

  6. Enable Header Underline - If Enabled it will display a separator line bellow header
  7. Line Color - Choose separator line color
  8. Line thickness - Choose separator line thickness

  9. Note: Please note that some options may not appear, as they are dependent to other options. ( Example: A color option may not appear if a certain type of menu is selected )

Header options
Fig. 11

4.4 Top bar

Header top bar options are located in admin menu Infinito > Theme Options > Header > Top bar as seen on Fig. 12
This will display an info bar with phone, address, email and social icons , above/bellow your website header. Options available:

Note: Please note that some options may not appear, as they are dependent to other options. ( Example: A color option may not appear if a certain type of menu is selected )

  1. 1 . Top bar as seen on Fig. 12
    1. Enable/Disable - Enable or disable the whole top bar
    2. Width - This is the width of the top bar - Full width / Boxed
    3. Background width - Use this option when top bar is set to boxed, and you want the top bar to be full width
    4. Bar Background - Add background to your top bar

    5. Important Note: If you have a transparent header and/or top bar, the sub-header background will serve as a background for the header and top bar also. See Fig. 22 A for a better understanding

    6. Bar Position - Choose where to display the top bar above or bellow
    7. Bar Padding - Add padding to your top bar
Header top bar
Fig. 12
  1. 2 . Info bar as seen on Fig. 13 - This contain your phone, email and address. Those details can be added here
    1. Enable/Disable - Enable or disable the info bar
    2. Info Position - Choose where to display the info top bar - left or right
    3. Info Padding - Add padding to your info bar
    4. Info Font - Choose typography for info bar font
Header info bar
Fig. 13
  1. 3 . Social as seen on Fig. 14
    1. Enable/Disable - Enable or disable the social icons in top bar
    2. Social Margin - Add margin to your social
    3. Social Font - Change font size of social icons
    4. Social Color - Choose text color for social icons
    5. Social Hover Color - Choose hover text color for social icons
    6. Social Style - Choose display style - simple, square, rounded or circle
Header social info
Fig. 14

4.5 Menu options

Header menu options are located in admin menu Infinito > Theme Options > Header > Menu Options as seen on Fig. 15.
From here you can customize your menu with options such as typography, menu style, dropdown animations etc. Options available:

  1. Dropdown Animation - Choose your sub-menu dropdown animation
  2. Menu padding - Add padding to the whole menu
  3. Links Margin - Add margin to the links in the menu
  4. Links padding - Top and bottom links padding
  5. Hover style - Choose your menu hover style
  6. Icon for 1st level menu ( if has submenu ) - Add an icon to the first level menu ( Work only if it has submenu )
  7. Icon for 2nd and higher level menu ( if has submenu ) - Add an icon to the second level menu ( Work only if it has submenu )
  8. Menu Typography - Change typography for main level menu
  9. SubMenu Typography - Change typography for submenu

  10. Note: Please note that some options may not appear, as they are dependent to other options. ( Example: A color option may not appear if a certain type of menu is selected )

Header menu options
Fig. 15

4.6 Menu colors

Header menu colors options are located in admin menu Infinito > Theme Options > Header > Menu Colors as seen on Fig. 15 A.
From here you can customize your menu colors, hover colors, hover backgrounds etc. Options available:

  1. Link - Choose link color
  2. Hover Link / Active Link - Choose hover / active link color
  3. Effect - Choose menu effect color. This is the effect that appears on hover and active links
  4. Hover / Active Link Background - Choose hover link background color
  5. Submenu Link - Choose submenu link color
  6. Submenu Hover Link - Choose submenu hover link color
  7. Submenu Background - Choose submenu background color
  8. Submenu Hover Background - Choose submenu hover background color
  9. Submenu Separator - Choose submenu separator color
  10. Mega menu heading color - This is the color of the heading ( in mega menu )

  11. Note: Please note that some options may not appear, as they are dependent to other options. ( Example: A color option may not appear if a certain type of menu is selected )

Header menu colors options
Fig. 15 A

4.7 Sticky menu

Header sticky menu options are located in admin menu Infinito > Theme Options > Header > Sticky menu as seen on Fig. 16.
Sticky menu it's the menu that shows up once user start scrolling down the page, and the main menu exits out of the viewport area.
From here you can customize your sticky menu options. Options available:

  1. Enable/Disable - Enable or disable the sticky menu
  2. Logo - Allows you to add a different logo for the sticky menu
  3. Sticky Background and Opacity - Change sticky menu background and opacity
  4. Link color - Change links color for sticky menu
  5. Link hover color - Change hover links color for sticky menu
  6. Sticky typography - Allow you to change font typography for sticky menu
  7. Sticky Shadow - Adds a shadow to the sticky menu
  8. In Animation - Choose an entering animation for sticky menu
  9. Out Animation - Choose an exiting animation for sticky menu
  10. Width - Change size of sticky menu - full width or boxed
  11. Sticky content margin - This will add margin to the whole content of your sticky menu ( logo and links )

  12. Note: Please note that some options may not appear, as they are dependent to other options. ( Example: A color option may not appear if a certain type of menu is selected )

Header menu options
Fig. 16

4.8 Responsive

Header responsive options are located in admin menu Infinito > Theme Options > Header > Responsive as seen on Fig. 17.
From here you can customize your header and menu options for responsive devices. Options available:

  1. 1 . Responsive header
    1. Background - Choose your responsive header background
  1. 2 . Resposive menu
    1. Text color - Choose menu text color
    2. Hover / Active text color - Choose menu hover / active text color
    3. Background color - Choose menu background color
    4. Background image - Choose menu background image
    5. Separator color - Choose menu separator color
    6. Trigger button text color - Choose your trigger button text color
    7. Trigger button background color - Choose your trigger button background color
    8. 2nd Level (and above) Text color - Choose color for second level menu links ( and above i.e level 3, 4 etc. )
    9. 2nd Level (and above) Hover text color - Choose hover color for second level menu links ( and above i.e level 3, 4 etc. )
    10. 2nd Level (and above) Background Color - Choose background color for second level menu links ( and above i.e level 3, 4 etc. )
    11. 2nd Level (and above) Background Image - Choose background image for second level menu links ( and above i.e level 3, 4 etc. )
    12. Menu on show animation - Choose menu appear animation : Side / Top / Short
    13. Button animation style - Menu button animation style
    14. Sticky - Enable /disable responsive sticky menu
    15. Sticky background color - Choose sticky background color
    16. Sticky Logo - Add a responsive sticky logo
    17. Is Sticky Logo retina ready? - If checked , on retina ready devices logo will look great( don't forget to make it twice the size. ).
    18. Body overlay background - Choose background of body overlay. This is the background when the responsive menu it's opened
Header responsive menu options
Fig. 17

4.9 Menu

Menu(s) are located in Appearance > Menus as seen on Fig. 18.
This theme comes bundled up with 3 menus locations:

  1. Header menu - This is the theme main menu that is being displayed on all header layouts except Center logo - two menus
  2. Left menu - This is the theme menu that is being displayed on Center logo - two menus layout on the left side
  3. Right menu - This is the theme menu that is being displayed on Center logo - two menus layout on the right side

  4. Note: To use and display a menu, drag and drop desired links in the Menu Structure area, check the desired menu location structure ( depending on what header layout are you using ) and click Save Menu.

  5. Note 2: To add description to your menu items click at top of the Page the button Screen Options, and check the Description box. Now when you expand every menu item there will be a field called "Description". Enter your desired text and save menu.

  6. Note 3:You can create as many menu(s) as you want, and display on each page a different menu

Menu locations
Fig. 18

4.10 Mega menu

The theme comes with a built in mega menu
To access mega menu feature as seen on Fig. 19

  1. Go to Appearance > Menus
  2. Choose any first level link that you want to trigger your mega menu ( in our example it's Mega Menu )
  3. Find the expand arrow on the chosen link as seen on Fig. 19 - step 1
  4. Check Activate Mega Menu as seen on Fig. 19 - step 2
  5. Edit your desired options
  6. Click Save Menu

  7. Note: Please note that all links need to be placed inside the main link that will trigger the mega menu, as seen on Fig. 20

  1. 1.Mega menu options - This options apply only to first level menu(s) ( in our example it's Mega Menu ) - as seen on Fig. 19
    1. Number of mega menu columns - Choose how many column(s) will the mega menu have
    2. Megamenu Width - Enter width of your mega menu in px. ( I.e 1200px ) - Leave blank for theme default width
    3. Disable link - Useful when you want to create a heading in mega menu
    4. Background - Background options for mega menu
      • Background Color - Allow you to add a background color to menu
      • Background Image URL - Enter/add your background image URL
      • Background Position - Enter your background position
      • Background Repeat - Enter your background repeat
    5. Paddings - Add paddings to the menu
      • Padding left - Define a padding left in px. ( I.e 20px )
      • Padding right - Define a padding right in px. ( I.e 20px )
      • Padding top - Define a padding top in px. ( I.e 20px )
      • Padding bottom - Define a padding bottom in px. ( I.e 20px )

    6. Note: Options: Disable link, Background and Paddings also work for regular menu(s)

  2. 2.Mega menu sub items options - This options apply only to menu sub items as seen onFig. 20 - bottom part
    1. New row( for megamenu ) - This will start a new row from this menu element
    2. Add feature - Click to add feature text and background color like "New" , "Sale" , "Today Only" ,to a menu sub item.
    3. Make this heading - This will transform the current menu item into a heading ( make text bolder )
    4. Disable link - Useful when you want to create a heading in mega menu

    5. Note: Options: Add feature, Make this heading and Disable link also work for regular menu(s)

Mega Menu
Fig. 19
 Mega Menu links placement
Fig. 20

4.11 Sub-Header

The sub-header section displays your page title and breadcrumb navigation. They are being displayed right bellow the header on each page.

This options are located in admin menu Infinito > Theme Options > Sub-Header as seen on Fig. 21 A. Options available

1.Main options - This are the main options for Breadcrumb & Page Title
  1. Sub-Header Width - Choose your width of sub-header - Full Width / Boxed
  2. Sub-Header Background - Add a background for sub-header

  3. Important Note: Sub-Header background, starts from header top, so if you have a transparent header and/or top bar, the sub-header background will serve as a background for the header and top bar also. See Fig. 22 A for a better understanding

  4. Tip:You can override the sub-header background for each post/page/portfolio, or remove the background completely by selecting a color and set the opacity to 0. All this options are located in wordpress admin area when you Edit/Add New post/page/portfolio.

  5. Display page title? - Enable or disable the sub-heading for the whole inner pages/posts/portfolio etc. Can be overridden in each post/portfolio/page
  6. Display breadcrumb? - Enable or disable the breadcrumb navgation for the whole inner pages/posts/portfolio etc. Can be overridden in each post/portfolio/page
  7. Home text - Enter your text for Home in breadcrumb navigation
  8. Alignment of page title and breadcrumb - Choose alignment of page title and breadcrumb
  9. Padding of page title and breadcrumb - Add a padding to page title and breadcrumb
2.Page Title - This are the options for page title
  1. Typography - Typography for page title
  2. Padding - Padding for page title
  3. Enable 3d effect on text? - This will add a nice 3d shadow to page title
3.Breadcrumb - This are the options for breadcrumb navigation
  1. Typography - Typography for breadcrumb navgation
  2. Padding - Padding for breadcrumb navgation
  3. Link colors - Link colors for breadcrumb navgation
  4. Links effect hover - Links effect hover for breadcrumb navgation
  5. Color for hover effect - Color for hover effect in breadcrumb navigation
4.Separator - This are the options for breadcrumb separator
  1. Select icon for separator - Choose an icon for separator
  2. Typography - Separator typography
  3. Padding - Separator padding
Sub-Header
Fig. 21 A
 Sub-Header Background
Fig. 22 A

5.Pages creation & options

From here you can create any page such as blog, portfolio, woocommerce, or regular pages.
To add a new page, go to Pages > Add New
When you create/edit a new page you can use these 2 templates: as seen on Fig. 21

  1. Default template - Which is used for creating any type of page, except portfolio
  2. Portfolio - Which is used for creating the portfolio page

Page templates
Fig. 21

5.1 Page Options

From this options you can add extra details to your pages
To locate this options go to Pages > Add New/Edit and scroll down untill you see the group Page Options as seen on Fig. 22. Options available:

Note: Please note that for some pages this options will not work. This are mostly wordpress core pages such as blog page, woocommerce page etc.

  1. Page padding - Allows you to add certain page paddings on desktop and mobile devices.
  2. Page background - Change body background for that specific page
  3. Page Width - Select desired page width - Full Width / Container
  4. Page layout - Select desired page layout - No Sidebar / Left Sidebar / Right Sidebar / Both Sidebars
  5. Header Position Under Slider - From here you can select which slider you want to use if you select to display the header under slider. You can also add another slider shortcode as well.

    6. Note: Please note that for option above, slider will only be displayed if that page is set to Homepage. Settings > Reading > Your homepage displays > A static page (select below) > Homepage

  6. Full page - This will transform any page into a full slider page as seen here. Every row from WPBakery Visual Composer will be a slide for the page. To add labels to the menu, click on Edit row and find the option located at Full page tab > Label name as seen on Fig. 23
    • Options
      • No - Page will not be transformed to Full Page with slides
      • Yes - No menu - Page will be transformed to Full Page with slides and will have no menu
      • Yes - Make menu from labels - Page will be transformed to Full Page with slides and will have a menu with labels pulled from Edit row > Full page tab > Label name as seen on Fig. 23
      • Yes - Keep main menu - Page will be transformed to Full Page with slides and will have the regular menu attached

      • Note: If you will not add any labels in Edit Row > Full page tab > Label name the label name will be Slide

    • Menu style - Choose your menu style - overlay/side panel
    • Parallax - Enable/disable parallax for full page
    • Show footer - Show/hide footer for full page
    • Label text color - Text color of the label near the navigation bullets
    • Label background - Background of the label near the navigation bullets
    • Trigger color - This is the color for the menu trigger
    • Menu Width - Enter width for menu. Works only for side panel menu. Enter in px. ( I.e 300px )
    • Menu Text Color - Choose text color of menu
    • Menu Hover Text Color - Choose hover text color of menu
    • Overlay Background Color - Choose background color of overlay menu
    • Menu Font Size - Define a font size for the menu
    • Menu Line height - Define a line height for the menu
    • Links margin - Add links margin. I.e ( 5px 0 5px 0 ). Enter 0px for no margin
  7. Header layout - Allow you to change header layout for that specific page only
  8. Other options - Some extra page options
    • Different menu? - Allow you to add another menu in that specific page. Does not work with Center logo - two menus header layout.
    • Disable header - Disable header for that specific page
    • Disable footer - Disable footer for that specific page
    • Absolute Header ? - It will disable your Sub-Header background, and replace it with the background from the first row you add via Page Builder. Useful for when you want to add a nice background to your header what will also continue onto your page bellow header. Works only for horizontal header layouts.
    • Content padding top - Enter content padding top in pixels. This field is mandatory when you select the Absolute Header option above, otherwise the content will overlap the header/breadcrumb. I.e 500px
  9. Sub-Header Options - Change sub header background for that specific page
  10. Page title & breadcrumb display ? - You can select for that specific page what you want to display - the title and breadcrumb are being displayed right bellow the header on each page.
    • Theme Default - Theme will display the default options that are defined here
    • Both (title and breadcrumb) - Theme will display title and breadcrumb navigation
    • Breadcrumb - Theme will display breadcrumb navigation only
    • Title - Theme will display title only
    • None - Theme will display nothing
  11. SEO - Allow you to add title, description, and keywords to that specific page
  12. Custom CSS Code - Allow you to add custom CSS Code to that page
Page Options
Fig. 22
 Full page label name
Fig. 23

5.2 WPBakery Blocks

WPBakery Blocks ( formerly Visual Composer ) are blocks that help you build any page very fast.
To start adding block(s) to your page:

  1. Go to Pages > Add New/Edit and click Add Element as seen on Fig. 24 or + icon as seen on Fig. 25
  2. Pick your desired element and click on it.
  3. Edit your desired element settings
  4. Click Save Changes
  5. Save/Update your page

Note: All WPBakery theme specific blocks are located in the Infinito tab as seen on Fig. 24

All WPBakery Blocks are explained bellow:

WPBakery Blocks
Fig. 24
 WPBakery Blocks
Fig. 25

5.2.1 Row

This is the main block of WPBakery and each one represent a section of your website.
Every other block(s) should be placed inside a Row
To edit row options click on the Edit Icon as seen on Fig. 26. Options available:

Tip: You can place a row inside other row as seen on Fig. 26

WPBakery Row inside other row
Fig. 26
1 . Tab General as seen on Fig. 27
  1. Wrap row in container? - This will wrap the whole row in container.
    Use this option when the page width is set to Full Width, and you need this row wrapped in container.
    Do not use this option when the page width is already set to container
  2. Row stretch - Select stretching options for row and content
  3. Columns gap - Select gap between columns in row
  4. Full height row? - If checked row will be set to full height
  5. Columns position - Select columns position within row
  6. Equal height - If checked columns will be set to equal height
  7. Content position - Select content position within columns
  8. Use video background? - If checked, video will be used as row background
  9. YouTube link - Add YouTube link
  10. Parallax - Add parallax type background for row
  11. Parallax speed - Enter parallax speed ratio (Note: Default value is 1.5, min value is 1)
  12. CSS Animation - Select type of animation for element to be animated when it "enters" the browsers viewport (Note: works only in modern browsers).
  13. Div ID - Add html Div ID. Useful for one page designs. Enter it here, and then go to Appearance > Menus, create a custom link, and in the URL input, add the same ID you just added here with a # in front. I.e if you named your div "example" in the menu you will add "#example" ( without the quotes ). See the video tutorial for even a better understanding.
  14. Row ID - Enter row ID (Note: make sure it is unique and valid according to w3c specification )
  15. Disable row - If checked the row won't be visible on the public side of your website. You can switch it back any time
  16. Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS
WPBakery Row Tab general
Fig. 27
2 . Tab Full Page as seen on Fig. 27a
  1. Label name - If you make a full page from Pages > Page Options > Full page, here is where you put the label.
  2. Slide direction - Choose slide direction - horizontal/vertical

  3. Note: For horizontal slides you need at least 2 consecutive slides to be set as horizontal in order to work.

  4. Dark navigation bullets? - By default the navigation bullets for full page are white for each slide. If checked, it will make the bullets navigation black for this specific slide.
WPBakery Row Tab Full Page
Fig. 27a
3 . Tab Design Options as seen on Fig. 28
  1. CSS box - With this option you can add margins, paddings, border and backgrounds
WPBakery Row Tab Design options
Fig. 28
4 . Tab Responsive options as seen on Fig. 28a - This allow you to change background(s) for various breakpoints, so they will be nicely visible on any device. There are 4 breakpoints, all with the same options as described bellow:
    >
  1. Background color - Add new background color for this breakpoint. This will replace the background set in Design Options tab for the selected breakpoint in particular.
  2. Background image - Add new background image for this breakpoint. This will replace the background set in Design Options tab for the selected breakpoint in particular.
  3. Background position - Change the new background position for the selected breakpoint
  4. Background repeat - Change the new background repeat for the selected breakpoint
WPBakery Row Tab Responsive options
Fig. 28a
5 . Tab Fancy text background as seen on Fig. 29 - This allow you to add a nice animated text background inside every row
  1. 1st row text background - Add the first row text background
  2. 2nd row text background - Add the second row text background
  3. Font - Choose font ( Theme Font, Google Font or Custom Font )
  4. Font Weight - Choose font weight
  5. Font Size - Choose font size
  6. Line height - Choose font line height
  7. Text color - Choose font color
  8. Vertical text align - Choose vertical text alignment
  9. Horizontal text align - Choose horizontal text alignment
  10. Text transform - - Choose text transform
  11. Letter spacing - Choose letter spacing
  12. CSS box - With this option you can add margins, paddings, border and backgrounds
WPBakery Row Tab Fancy text background
Fig. 29

5.2.2 Column

With this block you can customize your row grid and divide it into how many columns you desire as seen on Fig. 30

To edit a column settings click on Edit this column as seen on Fig. 31. Options available:

WPBakery Column(s)
Fig. 30
 Edit Column
Fig. 31
1 . Tab General as seen on Fig. 32
  1. Use video background? - If checked, video will be used as row background
  2. YouTube link - Add YouTube link
  3. Parallax - Add parallax type background for row
  4. Parallax speed - Enter parallax speed ratio (Note: Default value is 1.5, min value is 1)
  5. CSS Animation - Select type of animation for element to be animated when it "enters" the browsers viewport (Note: works only in modern browsers)
  6. Element ID - Enter element ID (Note: make sure it is unique and valid according to w3c specification )
  7. Extra class name - Style particular content element differently - add a class name and refer to it in custom CSS.
Column General tab
Fig. 32
2 . Tab Design Options as seen on Fig. 33
  1. CSS box - With this option you can add margins, paddings, border and backgrounds
Column Design options tab
Fig. 33
3 . Tab Responsive as seen on Fig. 34 - you can customzie responsive options.
  1. Width - Select column width
  2. Responsiveness - Adjust column for different screen sizes. Control width, offset and visibility settings.
  3. Css Boxes - Allow you to add custom margin/paddings on responsive devices
Column Responsive tab
Fig. 34

5.2.3 Banners

With this block you can add some cool banners in your pages/posts

Options available as seen on Fig. 35

  1. General tab - Customize banner general settings
  2. First title tab - Customize banner first title
  3. Second title tab - Customize banner second title
  4. Counter tab - Customize banner counter
  5. Paragraph tab - Customize banner paragraph
  6. Button tab - Customize banner button
  7. Animations tab - You can animate the banner
  8. Presets tab - Allows you to add theme banner predefined presets with 1 simple click as seen on Fig. 36. To load a preset click on the picture, click Yes, wait for the preset to load, edit your desired settings, and click Save Changes
Banners options
Fig. 35
 Banners presets
Fig. 36

5.2.4 Simple list

With this block you can add a simple list with icon in your pages/posts

Options available as seen on Fig. 37

  1. General - Add text, second text, icon, and icon color. You can add a new list by pressing the + button, and remove it by pressing the - button
  2. Settings - Change list settings
  3. Typography - Change typography options for simple list
  4. Animations - You can animate the simple list
Simple list options
Fig. 37

5.2.5 Google Maps

With this block you can add a nice Google Maps in any page/post.

Options available as seen on Fig. 38

  1. General - Add your map coordinates
  2. Template - Choose map template
  3. Settings - Change various settings such as height, map marker, zoom, language etc.

  • Important Note - In order to be able to search for your desired location, you need to add a google maps API Key. More info here

    • Google Maps options
    Fig. 38

    5.2.6 Heading

    With this block you can add some cool headings in your pages/posts

    Options available as seen on Fig. 39

    1. General tab - Customize heading general settings
    2. Heading 1 tab - Customize heading first heading
    3. Heading 2 tab - Customize heading second heading
    4. Paragraph tab - Customize heading paragraph
    5. Animations tab - You can animate the heading
    6. Presets tab - Allows you to add theme headings predefined presets with 1 simple click as seen on Fig. 40. To load a preset click on the picture, click Yes, wait for the preset to load, edit your desired settings, and click Save Changes
    Heading options
    Fig. 39
     Heading presets
    Fig. 40

    5.2.7 Simple heading

    With this block you can add a simple heading in your pages/posts

    Options available as seen on Fig. 41

    1. General tab - Customize heading general settings
    2. Heading options tab - Customize heading text
    3. Animations tab - You can animate the heading
    Simple heading options
    Fig. 41

    5.2.8 Portfolio

    With this block you can add a portfolio block anywhere in your pages/posts

    Options available as seen on Fig. 42

    1. General tab - Customize portfolio general settings
    2. Filter tab - Customize portfolio filter ( only appears when Show Filter it's checked in the General tab) - Filter buttons are generated from portfolio categories
    3. Options tab - Customize portfolio options
    4. Templates tab - Choose what template you want to use for portfolio display
    5. Design tab - Customize various design options for portfolio
    6. Typography tab - Customize font options for portfolio
    7. Responsive tab - Allow you to make responsive customizations
    8. Animations tab - You can animate the portfolio(s)
    Portfolio options
    Fig. 42

    5.2.9 List

    With this block you can add a nice list with icon and button in your pages/posts

    Options available as seen on Fig. 43

    1. General tab - Customize list general settings
    2. Font icon tab - Customize font icon ( only appears when Font Icon it's selected from the General tab option Font Icon / Image )
    3. Image tab - Customize image icon ( only appears when Image it's selected from the General tab option Font Icon / Image )
    4. Heading tab - Customize list heading
    5. Paragraph tab - Customize list paragraph text
    6. Button tab - Customize list button
    7. Animations tab - You can animate the the list
    8. Presets tab - Allows you to add theme list predefined presets with 1 simple click as seen on Fig. 44. To load a preset click on the picture, click Yes, wait for the preset to load, edit your desired settings, and click Save Changes
    List options
    Fig. 43
     List presets
    Fig. 44

    5.2.10 Team

    With this block you can team members in your pages/posts

    Options available as seen on Fig. 45

    1. General tab - Customize team general settings
    2. Details tab - Customize details for team
    3. Options tab - Customize options for team
    4. Styling tab - Style team details
    5. Animations tab - You can animate the the team
    6. Settings tab - Varoius settings for team
    Team options
    Fig. 45

    5.2.11 Facts

    With this block you can add nice facts in your pages/posts

    Options available as seen on Fig. 46

    1. General tab - Customize facts general settings
    2. Icon tab - Customize font icon ( only appears when Icon it's selected from the General tab option Font Icon / Image )
    3. Image tab - Customize image icon ( only appears when Image it's selected from the General tab option Font Icon / Image )
    4. Number tab - Customize facts number
    5. Heading tab - Customize facts heading
    6. Paragraph tab - Customize facts paragraph text
    7. Animations tab - You can animate the the list
    Facts options
    Fig. 46

    5.2.12 Pricing tables

    With this block you can add pricing tables in your pages/posts

    Options available as seen on Fig. 47

    1. General tab - Customize pricing tables general settings
    2. Template tab - Customize pricing tables display template
    3. Title tab - Customize pricing tables title
    4. Description tab - Customize pricing tables description
    5. Price tab - Customize pricing tables price
    6. Button tab - Customize pricing tables button
    7. Animations tab - You can animate the the pricing table
    Pricing tables options
    Fig. 47

    5.2.13 Social

    With this block you can add social info in your pages/posts

    Options available as seen on Fig. 48

    1. General tab - Customize social general settings
    2. Options tab - Customize social options

    3. If you choose your social values to be pulled from Theme Options in the General tab, as seen on Fig. 48 go to admin menu Infinito > Theme Options > Social and enter your social URLs

    Social options
    Fig. 48

    5.2.14 Button

    With this block you can add nice button(s) in your pages/posts

    Options available as seen on Fig. 49

    1. General tab - Customize button general settings
    2. Design options tab - Customize button design options
    3. Animations tab - You can animate the the button
    4. Presets tab - Allows you to add theme button predefined presets with 1 simple click as seen on Fig. 50. To load a preset click on the picture, click Yes, wait for the preset to load, edit your desired settings, and click Save Changes
    Button options
    Fig. 49
     Button presets
    Fig. 50

    5.2.15 Testimonials

    With this block you can add nice testimonials in your pages/posts

    Options available as seen on Fig. 51

    1. General tab - Customize testimonials general settings
    2. Design options tab - Customize testimonials design options
    3. Animations tab - You can animate the the testimonials
    Testimonials options
    Fig. 51

    5.2.16 Icon

    With this block you can add a simple icon in your pages/posts

    Options available as seen on Fig. 52

    1. General tab - Customize icon general settings
    2. Design options tab - Customize icon design options
    3. Animations tab - You can animate the the icon
    Icon options
    Fig. 52

    5.2.17 Toggle

    With this block you can add toggle(s) in your pages/posts

    Options available as seen on Fig. 53

    1. General tab - Customize toggle general settings
    2. Animations tab - You can animate the the toggle
    Toggle options
    Fig. 53

    5.2.18 Countdown

    With this block you can add countdowns in your pages/posts

    Options available as seen on Fig. 54

    1. General tab - Customize countdown general settings
    2. Numbers tab - Customize countdown numbers
    3. Paragraph tab - Customize countdown paragraph
    Countdown options
    Fig. 54

    5.2.19 Woo Tabbed Products

    With this block you can add WooCommerce tabbed products in your pages/posts

    Note: Please note that in order for this block to appear in WPBakery Blocks you need to install the WooCommerce plugin first and start adding products

    Options available as seen on Fig. 55

    1. General tab - Customize Woo Tabbed Products general settings
    2. Product background - Customzie product backgroud
    3. Title - Customzie title
    4. Price - Customzie price
    5. Category - Customzie category
    6. Add to cart button - Customzie add to cart button
    7. Product URL - Customzie product URL ( displayed near the "Add to cart" button )
    8. Tabs buttons - Customzie tab(s) buttons
    9. Responsive tab - Allow you to make responsive customizations
    Woo Tabbed Products options
    Fig. 55

    5.2.20 Contact form 7

    With this block you can add Contact Forms in your pages/posts

    Note: Please note that in order for this block to appear in WPBakery Blocks you need to install the Contact form 7 plugin first

    Options available as seen on Fig. 56

    1. General tab - Customize Contact form general settings
    2. Labels tab - Customize Contact form labels
    3. Inputs & text tab - Customize Contact form input fields and text
    4. Button tab - Customize Contact form submit button
    5. Animations tab - You can animate the the contact form
    6. Presets tab - Allows you to add theme contact form predefined presets with 1 simple click as seen on Fig. 57. To load a preset click on the picture, click Yes, wait for the preset to load, edit your desired settings, and click Save Changes
    Contact form 7 options
    Fig. 56
     Contact form 7 presets
    Fig. 57

    5.2.21 Posts

    With this block you can add posts block(s) anywhere in your pages/posts

    Options available as seen on Fig. 58

    1. General tab - Customize posts general settings
    2. Options tab - Customize posts options
    3. Templates tab - Choose what template you want to use for posts display
    4. Design tab - Customize various design options for posts
    5. Typography tab - Customize font options for posts
    6. Responsive tab - Allow you to make responsive customizations
    7. Animations tab - You can animate the posts
    Posts options
    Fig. 58

    5.2.22 WOW Masonry

    With this block you can add any post type in a masonry style anywhere in your pages/posts

    Options available as seen on Fig. 59

    1. General tab - Customize WOW Masonry general settings
    2. Options tab - Customize WOW Masonry options
    3. Templates tab - Choose what template you want to use for WOW Masonry display
    4. Typography tab - Customize font options for WOW Masonry
    5. Animations tab - You can animate the WOW Masonry
    WOW Masonry options
    Fig. 59

    5.2.23 Simple banner

    With this block you can add nice simple banner(s) onto your pages/post etc.

    Options available as seen on Fig. 59 B

    1. General tab - Add title, description, url to banner
    2. Icon tab - Customize banner icon
    3. Image tab - Choose banner image
    4. Heading tab - Customize banner heading
    5. Paragraph tab - Customize banner paragraph
    6. Animations tab - You can animate the banner
    Simple banner
    Fig. 59 B

    5.3 Portfolio page

    This is the page that will display all your portfolio posts.To create your portfolio page:

    1. Navigate to Pages > Add New
    2. Select the Portfolio template as seen on Fig. 60
    3. Click Publish and you are all set.
    Portfolio template
    Fig. 60

    5.3.1 Portfolio page options

    This options allow you to change various portfolio options, such as how many portfolio per page, colors, typography etc.

    To access this options navigate to admin menu Infinito > Theme Options > Portfolio as seen on Fig. 61

    All portfolio options are explained bellow:

    Portfolio options
    Fig. 61

    5.3.1.1 General

    This options are located in admin menu Infinito > Theme Options > Portfolio > General as seen on Fig. 61. Options available

    1 . Portfolio posts page - this options apply to portfolio posts page
    1. Select your portfolio page - For breacrumb purposes so the breadcrumb will link to your portfolio page
    2. Slug for portfolio item - This slug is displayed in URL. If you want other slug than the actual one ( portfolio_item ) enter it here. Do not forget to go to Settings->Permalinks, and hit save in order for the changes to take effect and work.
    3. Slug for portfolio category - This slug is displayed in URL. If you want other slug than the actual one ( portfolio_category ) enter it here. Do not forget to go to Settings->Permalinks, and hit save in order for the changes to take effect and work.
    4. Where to display portfolio page content? - If you add extra content to the portfolio page via wordpress editor or visual composer, select where you want to display it.
    5. Page width - Select your portfolio page width - Full Width/Container
    6. Grid width - Enter portfolio grid width - Units are pixels

      7. Important Note: Grid width is calculated like this:
      1.If you enter a grid - over 1200 - ( for example 1210 ) that width will apply only from 1280px resolution and above. ( 1210 + 70 ) > ( 70 is required for content padding and browsers scroll bar )
      2.If you enter a grid - under 1200 - that width will apply only from 1201px above. ( Under 1200 website falls under responsive breakpoint rules )
      3.Default container / grid width is 1090px

    7. Page background - Add a background to your portfolio posts page
    8. Padding - Padding of portfolio posts page
    2 . Portfolio single page - this options apply to portfolio single page
    1. Grid width - Enter portfolio single grid width - Units are pixels

      2. Important Note: Grid width is calculated like this:
      1.If you enter a grid - over 1200 - ( for example 1210 ) that width will apply only from 1280px resolution and above. ( 1210 + 70 ) > ( 70 is required for content padding and browsers scroll bar )
      2.If you enter a grid - under 1200 - that width will apply only from 1201px above. ( Under 1200 website falls under responsive breakpoint rules )
      3.Default container / grid width is 1090px

    2. Background - Add a background to your portfolio single post page
    3. Padding - Padding of portfolio single page
    Portfolio general options
    Fig. 61

    5.3.1.2 Options

    This options are located in admin menu Infinito > Theme Options > Portfolio > Options as seen on Fig. 62. Options available

    1 . Options
    1. How many portfolio per page? - Enter number of desired portfolio posts per page
    2. How many portfolio per row? - Selct how many portfolio items should be displayed per row
    3. Add gap between portfolio items? - You can add a gap between portfolio items here
    4. Order - How to order portfolio posts
    5. Order by - You can order portfolio posts by options defined there
    6. Show dot? - If checked it will show a theme color dot at the end of portfolio title
    7. Show filter - It will display a filter on portfolio page, above all posts, where you can sort portfolio posts by category - Filter buttons are generated from portfolio categories

    8. Important Note: If filter is enabled, portfolio animations are not supported on portfolio page, and will not be displayed.

    2 . Portfolio details - This options allow you to change the portfolio details name such as client, type, started, finished and difficulty to suit your needs. This will be displayed in the backend ( Portfolio > Add New / Edit > Portfolio Options > Details ), and frontend on every single portfolio page.
    1. Portfolio details 1 - Change text for portfolio detail 1: default - Client
    2. Select icon for portfolio details 1 - Change icon for portfolio detail 1
    3. Portfolio details 2 - Change text for portfolio detail 2: default - Type
    4. Select icon for portfolio details 2 - Change icon for portfolio detail 2
    5. Portfolio details 3 - Change text for portfolio detail 3: default - Started
    6. Select icon for portfolio details 3 - Change icon for portfolio detail 3
    7. Portfolio details 4 - Change text for portfolio detail 4: default - Finished
    8. Select icon for portfolio details 4 - Change icon for portfolio detail 4
    9. Portfolio details 5 - Change text for portfolio detail 5: default - Difficulty
    10. Select icon for portfolio details 5 - Change icon for portfolio detail 5
    Portfolio options
    Fig. 62

    5.3.1.3 Template

    This options are located in admin menu Infinito > Theme Options > Portfolio > Template as seen on Fig. 63. Options available

    1. Portfolio list template - Select your desired portfolio list template. To see it in action create a page, and use the portfolio template.
    2. Portfolio single page template - Select your desired single portfolio template. This can also be overriden for each portfolio post, in portfolio posts page.
    Portfolio template options
    Fig. 63

    5.3.1.4 Styling

    This options are located in admin menu Infinito > Theme Options > Portfolio > Styling as seen on Fig. 64. Options available

    1 . Posts - this options apply to portfolio posts page
    1. Title color - Change title color
    2. Category color - Change category color
    3. Overlay text color - Change overlay text color. This is the text that is displayed when you hover over a portfolio item
    4. Date background - Change date background
    5. Date color - Change date color
    6. Month color - Change month color
    7. Overlay background - Change overlay background color. This is the background that is displayed when you hover over a portfolio item
    8. Title margin - Add a margin to portfolio item
    9. Category margin - Add a margin to portfolio category
    10. Overlay icon - Change overlay icon. This is the icon that is displayed when you hover over a portfolio item

    11. Note: Please note that some options may not appear, as they are dependent to other options. ( Example: A option may not appear if a certain portfolio template is selected )

    2 . Portfolio single styling - this options apply to portfolio single page
    1. 1.Single template 1 - Options for portfolio single template 1
      1. Overlay background - Change overlay background color. This is the background that is displayed when you hover over a portfolio item
      2. Title color - Change title color
      3. Button text color - Change button text color. This is the live demo button above title
      4. Button background - Change button background color. This is the live demo button above title
      5. Button text hover color - Change button text hover color. This is the live demo button above title
      6. Button hover background - Change hover button background color. This is the live demo button above title
      7. Details small title color - Change small title color. This is the color of the small details text (i.e category, client, date)
      8. Details big title color - Change big title color. This is the color of the big details text (i.e Awesomeness, Amazing Inc, 17 Jun 2017 etc)
      9. Icon color - Change icon(s) color
      10. Separators color - Change separators color
    2. 2.Single template 2 - Options for portfolio single template 2
      1. Title color - Change title color
      2. Title background color - Change title background color
      3. Small category color - Change small category color. This are the categories displayed above title
      4. Small category background - Change small category background color. This are the categories displayed above title
      5. Button text color - Change button text color. This is the live demo button above title
      6. Button background - Change button background color. This is the live demo button above title
      7. Button text hover color - Change button text hover color. This is the live demo button above title
      8. Button hover background - Change hover button background color. This is the live demo button above title
      9. Details small title color - Change small title color. This is the color of the small details text (i.e category, client, date)
      10. Details big title color - Change big title color. This is the color of the big details text (i.e Awesomeness, Amazing Inc, 17 Jun 2017 etc)
      11. Icon color - Change icon(s) color
      12. Icon hover color - Change icon(s) hover color
      13. Squares background - This are the squares of details holders
    3. 3.Single template 3 - Options for portfolio single template 3
      1. Overlay background - Change overlay background color. This is the big color covering the picture
      2. Title color - Change title color
      3. Secondary title color - Change secondary title color
      4. Category color - Change category color. This are the categories displayed above title
      5. Category background - Change category background color. This are the categories displayed above title
      6. Details small title color - Change small title color. This is the color of the small details text (i.e category, client, date)
      7. Details big title color - Change big title color. This is the color of the big details text (i.e Awesomeness, Amazing Inc, 17 Jun 2017 etc)
      8. Details big title background - Change big title background color. This is the background of the big details text (i.e Awesomeness, Amazing Inc, 17 Jun 2017 etc)
      9. Details big title hover color - Change big title hover color. This is the color of the big details text (i.e Awesomeness, Amazing Inc, 17 Jun 2017 etc)
      10. Details big title hover background - Change big title hover background color. This is the background of the big details text (i.e Awesomeness, Amazing Inc, 17 Jun 2017 etc)
      11. Separators color - Change separators color
    4. 4.Single template 4 - Options for portfolio single template 4
      1. Title color - Change title color
      2. Category color - Change category color
      3. Button text color - Change live demo button color
      4. Button background - Change live demo button background
      5. Button text hover color - Change live demo hover button color
      6. Button hover background - Change live demo hover button background
      7. Details background - Change the background of details on the right side.
      8. Details small title color - This is the color of the small details text (i.e category, client, date)
      9. Details big title color - This is the color of the big details text (i.e Awesomeness, Amazing Inc, 17 Jun 2017 etc)
      10. Icon color - This is the icon color
      11. Separators color - This is the color of separators
    Portfolio styling options
    Fig. 64

    5.3.1.5 Typography

    This options are located in admin menu Infinito > Theme Options > Portfolio > Typography as seen on Fig. 65. Options available

    1 . Portfolio typography - this options apply to portfolio posts page
    1. Title font - Change title typography such as font size, color, line height etc
    2 . Portfolio single typography - this options apply to portfolio single page
    1. Title font - Change title typography such as font size, color, line height etc
    2. Other details font - This font applies to all of the details on portfolio single, such as buttons, category, date etc.
    Portfolio typography options
    Fig. 65

    5.3.1.6 Animations

    This options are located in admin menu Infinito > Theme Options > Portfolio > Animations as seen on Fig. 66. Options available

    1 . Portfolio animations - this options apply to portfolio posts page
    1. Enable portfolio animations? - If checked it will enable animations on each portfolio item

    2. Important Note: If filter is enabled, animations are not supported on portfolio page, and will not be displayed.

    3. Select animation - Select your portfolio animation
    4. Animation Duration - Select your portfolio animation duration. Units are in seconds.
    5. Animation Delay - - Select your portfolio animation delay. Units are in seconds.
    2 . Portfolio animations single - this options apply to portfolio single page
    1. Enable portfolio animations? - If checked it will enable animations on each portfolio item
    2. Select animation - Select your portfolio animation
    3. Animation Duration - Select your portfolio animation duration. Units are in seconds.
    4. Animation Delay - Select your portfolio animation delay. Units are in seconds.
    Portfolio animations options
    Fig. 66

    5.3.1.7 Portfolio Related

    This options are located in admin menu Infinito > Theme Options > Portfolio > Portfolio Related as seen on Fig. 66 A. - Portfolio related is displayed bellow single portfolio post page. Options available

    1. Portfolio related width - Choose width of portfolio related - Full Width/Boxed
    2. How many portfolio per page on related? - This is the maximum number of portfolio posts that are displayed bellow single portfolio post page. Enter only numbers.
    3. How many portfolio per row on related? - This is the number of per row portfolio posts that are displayed bellow single portfolio post page. Enter only numbers.
    4. Related text - Enter heading text to be displayed on related portfolio posts. This text is displayed bellow the single portfolio content.
    Portfolio related options
    Fig. 66 A

    5.3.1.8 Responsive

    This options are located in admin menu Infinito > Theme Options > Portfolio > Responsive as seen on Fig. 66 B. - This options allow you to customize how many portfolio posts to be displayed per row, on different responsive devices. Options available

    1. 480px - How many portfolio items per row to be displayed up to 480px resolution
    2. 768px - How many portfolio items per row to be displayed up to 768px resolution
    3. 992px - How many portfolio items per row to be displayed up to 992px resolution
    4. 1200px - How many portfolio items per row to be displayed up to 1200px resolution
    5. 1600px - How many portfolio items per row to be displayed up to 1600px resolution
    Portfolio responsive options
    Fig. 66 B

    5.3.2 Add new portfolio item

    To add a new portfolio post follow this simple steps:

    1. Navigate to Portfolio > Add New as seen on Fig. 67
    2. Add your title,category and set a featured image
    3. In the editor you can add extra portfolio details using any block from WPBakery Page Builder as seen on Fig. 68
    4. In the Portfolio Options bellow the editor you can add extra details such as youtube/vimeo video, client, date added, seo title, seo description, etc as seen on Fig. 69
    5. Click Publish and you are all set.


      6. Portfolio options as seen on Fig. 69 - From here you can add extra details to your portfolio page. All options are explained bellow
      1. Gallery Image(s) - Add / remove image(s) to your single portfolio gallery.
      2. Details - Allow you to add portfolio details such as:
        • Client - Add client name
        • Start date - Enter start date of your project
        • End date - Enter end date of your project
        • Project type - Enter your project type
        • Project difficulty - Enter your project difficulty
        • 1st Button text - Enter primary text on your live demo button ( Displayed only in some single layouts -> See Theme Options -> Portfolio -> Portfolio single layout)
        • 2nd Button text - Enter second text on your live demo button ( Displayed only in some single layouts -> See Theme Options -> Portfolio -> Portfolio single layout)
        • Button URL - Enter live demo button URL. Do not forget the http://
      3. Single portfolio template - Choose a template for displaying this portfolio ( This will override the theme options settings for this portfolio only)
      4. Video ID - Enter Youtube or Vimeo Video ID. i.e MoHnffhBwqs (youtube), or 181612110 (vimeo)
      5. Image repeat - If you are using a single image, and it is smaller in size we recommend using the repeat option. This option only works when a single image is added via Set featured image option, and for style 1,2 and 3.
      6. Header layout - Allow you to change header layout for that specific portfolio only
      7. Other options - Some extra portfolio options
        • Different menu? - Allow you to add another menu in that specific portfolio. Does not work with Center logo - two menus header layout.
        • Disable header - Disable header for that specific portfolio
        • Disable footer - Disable footer for that specific portfolio
      8. Sub-Header Options - Change sub header background for that specific portfolio
      9. Page title & breadcrumb display ? - You can select for that specific portfolio what you want to display - the title and breadcrumb are being displayed right bellow the header on each portfolio post.
        • Theme Default - Theme will display the default options that are defined here
        • Both (title and breadcrumb) - Theme will display title and breadcrumb navigation
        • Breadcrumb - Theme will display breadcrumb navigation only
        • Title - Theme will display title only
        • None - Theme will display nothing
      10. SEO - Allow you to add title, description, and keywords to that specific portfolio
      11. Custom CSS Code - Allow you to add custom CSS Code to that portfolio
    Add new portfolio item
    Fig. 67
     Portfolio second edtitor
    Fig. 68
     Portfolio options
    Fig. 69

    5.4 Blog page

    Note: Please ignore the bellow steps, if you want your blog posts to show on homepage. You only need to add posts, and wordpress will do the rest.
    If you want your blog posts to be displayed on other page, read the instructions bellow.

    To create your blog page:

    1. Navigate to Pages > Add New
    2. Select the Default template as seen on Fig. 70 - step 1 & 2 - and name your page
    3. Click Publish
    4. Go to Settings > Reading > Your homepage displays > A static page select Posts page and add the page you just created as your Posts page as seen on Fig. 70 - step 3
    Blog page
    Fig. 70

    5.4.1 Blog page options

    This options allow you to change various posts options, such as colors, how many per row, typography etc.

    To access this options navigate to admin menu Infinito > Theme Options > Blog as seen on Fig. 71

    All blog options are explained bellow:

    Blog options
    Fig. 71

    5.4.1.1 General

    This options are located in admin menu Infinito > Theme Options > Blog > General as seen on Fig. 71. Options available

    1 . Blog page - this options apply to posts page
    1. Select your blog page - For breacrumb purposes so the breadcrumb will link to your blog page. Works only if front page display a static page as the posts page. See Settings -> Reading
    2. Blog page width - Select your blog page width - Full Width/Container
    3. Grid width - Enter blog grid width - Units are pixels

      4. Important Note: Grid width is calculated like this:
      1.If you enter a grid - over 1200 - ( for example 1210 ) that width will apply only from 1280px resolution and above. ( 1210 + 70 ) > ( 70 is required for content padding and browsers scroll bar )
      2.If you enter a grid - under 1200 - that width will apply only from 1201px above. ( Under 1200 website falls under responsive breakpoint rules )
      3.Default container / grid width is 1090px

    4. Blog page background - Add a background to your posts page
    5. Padding of blog page - Padding of posts page
    2 . Blog single page - this options apply to posts single page
    1. Single page width - Select your single blog page width - Full Width/Container
    2. Grid width - Enter blog single grid width - Units are pixels

      3. Important Note: Grid width is calculated like this:
      1.If you enter a grid - over 1200 - ( for example 1210 ) that width will apply only from 1280px resolution and above. ( 1210 + 70 ) > ( 70 is required for content padding and browsers scroll bar )
      2.If you enter a grid - under 1200 - that width will apply only from 1201px above. ( Under 1200 website falls under responsive breakpoint rules )
      3.Default container / grid width is 1090px

    3. Single post background - Add a background to your single post page
    4. Padding of single blog page - Padding of posts single page
    Blog general options
    Fig. 71

    5.4.1.2 Options

    This options are located in admin menu Infinito > Theme Options > Blog > Options as seen on Fig. 72. Options available

    1. How many blog posts per row? - Selct how many blog posts should be displayed per row
    2. Add gap between posts? - You can add a gap between posts here. Units are pixels I.e 15px. Enter 0 for no gap, or leave blank for theme default
    3. Limit excerpt - How many words should be displayed on each post. Enter numbers only
    4. Show dot? - If checked it will show a theme color dot at the end of post title
    Blog options
    Fig. 72

    5.4.1.3 Template

    This options are located in admin menu Infinito > Theme Options > Blog > Template as seen on Fig. 73. Options available

    1. Blog Template - Select your desired posts template.
    2. Blog page layout - Select your desired posts page layout.
    3. Blog single page template - Select your desired single posts template. This can also be overriden for each post - No sidebar / Left Sidebar / Right Sidebar / Both Sidebars
    4. Blog single page layout - Select your desired single posts layout. This can also be overriden for each post
    Blog template options
    Fig. 73

    5.4.1.4 Styling

    This options are located in admin menu Infinito > Theme Options > Blog > Styling as seen on Fig. 74. Options available

    1 . Background - this options apply to posts background
    1. Background color - Choose background color of posts
    2. Background hover color - Choose background hover color of posts
    2 . Title - this options apply to posts title
    1. Color - Choose title color of posts
    2. Hover color - Choose title hover color of posts
    3. Margin - Add margin to the post title
    3 . Excerpt - this options apply to posts except
    1. Color - Choose color of excerpt ( Usually this is the text displayed under the post title )
    2. Hover color - Choose color of excerpt on hover
    3. Margin - Add margin to the post excerpt
    4 . Date & comments - this options apply to blog date and comments
    1. Comments color - Choose color of comments
    2. Date color - Choose color of date
    5 . Category - this options apply to blog category
    1. Color - Choose color of category
    2. Hover color - Choose hover color of category
    3. Background - Choose background of category
    4. Hover background - Choose hover background of comments
    6 . Blog single - this options apply to blog single page
    1. Headings color - Change color for headings in blog single
    2. Text color - Change color for text in blog single
    3. Other text color - Change color for other text in blog single (such as comments text, category and author text for related posts, comment form placeholder text)
    4. Background of elements - Change background of elements in blog single (such as comments, blockquote, comment form etc.)
    Blog styling options
    Fig. 74

    5.4.1.5 Typography

    This options are located in admin menu Infinito > Theme Options > Blog > Typography as seen on Fig. 75. Options available

    1. Post title font - Change title typography such as font size, color, line height etc
    2. Post excerpt - Change post excerpt typography such as font size, color, line height etc
    3. Date and comments - Change date and comments font
    Blog typography options
    Fig. 75

    5.4.1.6 Fancy sidebar

    This will tranform the regular sidebar into a fancy nice looking one.
    This options are located in admin menu Infinito > Theme Options > Blog > Fancy Sidebar as seen on Fig. 76. Options available

    1 . Fancy sidebar
    1. Enable fancy sidebar? - This will move the sidebar on the header and add some nice corners to left and right. Only works with left or right sidebar, but not with both at once.
    2. Fancy sidebar background - Add a background to fancy sidebar
    2 . Left fancy sidebar corners for blog page - Change left sidebar corners for blog page
    1. Left corner color - Change left corner color for fancy sidebar
    2. Right corner color - Change right corner color for fancy sidebar
    3 . Right fancy sidebar corners for blog page - Change right sidebar corners for blog page
    1. Left corner color - Change left corner color for fancy sidebar
    2. Right corner color - Change right corner color for fancy sidebar
    4 . Left fancy sidebar corners for blog single - Change left sidebar corners for blog single
    1. Left corner color - Change left corner color for fancy sidebar
    2. Right corner color - Change right corner color for fancy sidebar
    5 . Right fancy sidebar corners for blog single - Change right sidebar corners for blog single
    1. Left corner color - Change left corner color for fancy sidebar
    2. Right corner color - Change right corner color for fancy sidebar
    Blog fancy sidebar options
    Fig. 76

    5.4.1.7 Animations

    This options are located in admin menu Infinito > Theme Options > Blog > Animations as seen on Fig. 77. Options available

    1. Enable blog posts animations? - If checked it will enable animations on each post
    2. Select animation - Select your post animation
    3. Animation Duration - Select your post animation duration. Units are in seconds
    4. Animation Delay - Select your post animation delay. Units are in seconds
    Blog animations options
    Fig. 77

    5.4.1.8 Related posts

    This options are located in admin menu Infinito > Theme Options > Blog > Related posts as seen on Fig. 78. Options available

    1. Display related posts? - If checked it will display related posts under the single blog post
    2. Number of related posts to display? - Choose number of related posts to display. This can also be overriden for each post, when you add/edit them
    3. How many related blog posts per row? - Choose how many related blog posts per row. This can also be overriden for each post, when you add/edit them
    4. Related post background - Add related post background
    5. Blog related heading color -Change blog related heading color
    6. Blog related text color - Change blog related text color
    Related posts options
    Fig. 78

    5.4.1.9 Author bio

    This options are located in admin menu Infinito > Theme Options > Blog > Author bio as seen on Fig. 79. Options available

    1. Display author bio and info? - If checked it will display the author bio and info bellow the single post content. To add this info go to Users -> Your Profile and fill in the details.
    2. Author bio background - Change background of author bio
    Author bio options
    Fig. 79

    5.4.1.10 Article share

    This options are located in admin menu Infinito > Theme Options > Blog > Article share as seen on Fig. 80. Options available

    1. Display share article section? - If checked it will display the share buttons bellow each single post
    Article share options
    Fig. 80

    5.4.1.11 Responsive

    This options are located in admin menu Infinito > Theme Options > Blog > Responsive as seen on Fig. 80 B. - This options allow you to customize how many posts to be displayed per row, on different responsive devices. Options available

    1. 480px - How many portfolio items per row to be displayed up to 480px resolution
    2. 768px - How many portfolio items per row to be displayed up to 768px resolution
    3. 992px - How many portfolio items per row to be displayed up to 992px resolution
    4. 1200px - How many portfolio items per row to be displayed up to 1200px resolution
    5. 1600px - How many portfolio items per row to be displayed up to 1600px resolution
    Blog responsive options
    Fig. 80 B

    5.4.2 Add new blog post

    To add a new blog post follow this simple steps:

    1. Navigate to Posts > Add New as seen on Fig. 81
    2. Add your title, content, category and keywords
    3. In the Post Options bellow the editor you can add extra details such as youtube/vimeo video, soundcloud id, quote, seo title, seo description, etc as seen on Fig. 82
    4. Click Publish and you are all set.


      5. Post types - This theme support 5 post types as seen on Fig. 81
      1. Standard - Which is the standard post format
      2. Quote - Add a quote post - You must choose quote post format, and add a quote text and author in post options
      3. Video - Add a video post - You must choose video post format, and add a video ID in post options
      4. Audio - Add an audio post - You must choose audio post format, and add an audio ID in post options
      5. Gallery - Add a gallery post format

      6. Note: Audio, video and quote post formats only work with Blog Template 1,2 and 3. See: Infinito > Theme Options > Blog > Template



      Post options as seen on Fig. 82 - From here you can add extra details to your post. All options are explained bellow:
      1. Details - Add details to your post such as:
        • Youtube / Vimeo Video ID - Enter Youtube or Vimeo Video ID. i.e MoHnffhBwqs (youtube), or 181612110 (vimeo) - used for video posts type
        • Soundcloud ID - Enter Soundcloud ID - for example: 337499778 - used for audio posts type
        • Quote text - Add your quote text here - used for quote posts type
        • Quote author - Add your quote author here - used for quote posts type
      2. Blog single page layout - Choose a layout for displaying this post ( This will override the theme options settings for this post only)
      3. Related posts - Change related post arguments for that post only:
        • How many related posts to display? - Choose how many related posts to display. This will override the number of related posts from theme options for this post only.
        • How many related posts per row? - Choose how many related posts per row. This will override the number of related posts from theme options for this post only.
      4. Header layout - Allow you to change header layout for that specific post only
      5. Other options - Some extra post options
        • Different menu? - Allow you to add another menu in that specific post. Does not work with Center logo - two menus header layout.
        • Disable header - Disable header for that specific post
        • Disable footer - Disable footer for that specific post
      6. Sub-Header Options - Change sub header background for that specific post
      7. Page title & breadcrumb display ? - You can select for that specific post what you want to display - the title and breadcrumb are being displayed right bellow the header on each post.
        • Theme Default - Theme will display the default options that are defined here
        • Both (title and breadcrumb) - Theme will display title and breadcrumb navigation
        • Breadcrumb - Theme will display breadcrumb navigation only
        • Title - Theme will display title only
        • None - Theme will display nothing
      8. SEO - Allow you to add title, description, and keywords to that specific post
      9. Custom CSS Code - Allow you to add custom CSS Code to that post
    Add new blog post
    Fig. 81
     Post options
    Fig. 82

    5.5 One page

    To create one page designs:

    1. Edit any row from WPbakery Visual Composer
    2. Locate the option Div ID as seen on Fig. 83
    3. Add a name - i.e example
    4. Go to Appearance > Menus, create a custom link, and in the URL input, add the same ID you just added here with a # in front I.e #example. Then add it to the menu. Do not forget to add a link text also.
    5. See the video tutorial for even a better understanding.
    One page
    Fig. 83

    5.6 Full page

    To create a full page from each section/row of a page, read here

    5.7 WooCommerce page

    WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

    Instruction on how to setup your pages, and other options are all explained bellow:

    Note: All WooCommerce docs can be found here

    5.7.1 WooCommerce page integration

    After successful installation of WooCommerce plugin you will have 2 options on how to setup your pages and other shop options:

    1 WooCommerce Setup Wizard - Immediately after activating the plugin, you are taken to the Setup Wizard. You can use the wizard which will create all shop pages automatically, or skip it and set up everything manually.

    2 Set up pages manually - You can create everything manually

    Tip: You can also use the WPBakery Woo Tabbed Products to add products in any page/post you desire.

    5.7.2 WooCommerce page options

    This options allow you to change various woocommerce options, such as colors, how many products per page, typography, shop page layout, etc.

    To access this options navigate to admin menu Infinito > Theme Options > WooCommerce as seen on Fig. 84

    All WooCommerce options are explained bellow:

    WooCommerce page options
    Fig. 84

    5.7.2.1 General

    This options are located in admin menu Infinito > Theme Options > WooCommerce > General as seen on Fig. 84. Options available

    1. Products per page - How many products per page should be displayed
    2. Products per row - How many products per row should be displayed?
    3. Page width - Page width of the WooCommerce shop, and archive products pages
    4. Grid width - Enter woocommerce grid width - Units are pixels

      5. Important Note: Grid width is calculated like this:
      1.If you enter a grid - over 1200 - ( for example 1210 ) that width will apply only from 1280px resolution and above. ( 1210 + 70 ) > ( 70 is required for content padding and browsers scroll bar )
      2.If you enter a grid - under 1200 - that width will apply only from 1201px above. ( Under 1200 website falls under responsive breakpoint rules )
      3.Default container / grid width is 1090px

    5. Page background - Add a background to your woocommerce shop page
    6. Padding - Padding of woocommerce shop pages
    7. Add to cart text - Enter text that will be displayed on the add to cart button
    8. Add to cart text when product has variations - Enter text that will be displayed on the add to cart button when the product has variations
    9. Show breadcrumb navigation and page title on shop homepage? - The title and breadcrumb are being displayed right bellow the header on each woocommerce page.
    10. Show cart icon in menu? - If checked it will display cart and contents in navigation menu
    11. Display related products? - It will display related products on single product page, if any. Can be overridden on each product. More info here
    12. Display Up-Sells products? - It will display Up-Sells products on single product page, if any. Can be overridden on each product. here
    WooCommerce general options
    Fig. 84

    5.7.2.2 Layout

    This options are located in admin menu Infinito > Theme Options > WooCommerce > Layout as seen on Fig. 85. Options available

    1. WooCommerce Layout - Choose your WooCommerce layout - No Sidebar / Left Sidebar / Right Sidebar

    2. Note: The WooCommerce sidebar is located in Appearance -> Widgets ( WooCommerce Sidebar )

    WooCommerce layout options
    Fig. 85

    5.7.2.3 Typography

    This options are located in admin menu Infinito > Theme Options > WooCommerce > Typography as seen on Fig. 86. Options available

    1. Headings font family - Change the font family for headings and price
    2. Body font family - Change the font family for body font in woocommerce pages
    WooCommerce typography options
    Fig. 86

    5.7.2.4 Buttons styling

    This options are located in admin menu Infinito > Theme Options > WooCommerce > Styling > Buttons as seen on Fig. 87. Options available

    1. Add to cart button font family - Change the font family for Add to cart button
    2. Buttons text color - Choose text color of buttons
    3. Buttons text hover color - Choose text hover color of buttons.
    4. Buttons background - Choose background of buttons
    5. Buttons hover background - Choose background of hover buttons.
    6. Border radius of buttons - Change the border radius of all buttons

    7. Note: This options apply to all WooCommerce buttons, except the Add to cart button. To style Add to cart button go here

    WooCommerce buttons styling options
    Fig. 87

    5.7.2.5 Headings styling

    This options are located in admin menu Infinito > Theme Options > WooCommerce > Styling > Headings as seen on Fig. 88. Options available

    1. Headings color - Change the color of WooCommerce headings
    WooCommerce headings styling options
    Fig. 88

    5.7.2.6 Product styling

    This options are located in admin menu Infinito > Theme Options > WooCommerce > Styling > Product as seen on Fig. 89. Options available

    1 . Product styling
    1. Display style - Choose how the product will be displayed in shop page, archive page, category page etc. With or without background
    2. Product background - Choose background of product
    3. Product background border radius - Change the border radius of product background
    4. Product title - Choose typography options for product list title. Note: When you select a text alignment this will move all the elements inside the product in that direction.
    5. Product price - Choose typography options for product list price
    6. Product category - Choose product category typography
    7. Link to product color - Choose color of link to product. This is displayed near the Add to cart button.
    8. Link to product hover color - Choose hover color of link to product. This is displayed near the Add to cart button.
    2 . Add to cart button
    1. Button text color - Choose text color of button
    2. Button text hover color - Choose text hover color of button
    3. Button background - Choose background of button
    4. Button hover background - Choose background of hover button
    WooCommerce product styling options
    Fig. 89

    5.7.2.7 Sale tag styling

    This options are located in admin menu Infinito > Theme Options > WooCommerce > Styling > Sale tag as seen on Fig. 90. Options available

    1. Product sale tag - Choose product sale tag typography
    2. Product sale tag background 1 - Choose product sale tag background. This is the background for products with a discount up to 30%
    3. Product sale tag background 2 - Choose product sale tag background. This is the background for products with a discount up to 60%
    4. Product sale tag background 3 - Choose product sale tag background. This is the background for products with a discount above 60%

    5. Note: The sale tag it's displayed on top of each product, if the product it's on sale

    WooCommerce sale tag options
    Fig. 90

    5.7.2.8 Top info bar

    This options are located in admin menu Infinito > Theme Options > WooCommerce > Top info bar as seen on Fig. 90 A. This allow you to add a top bar above header, in all show pages, where you can put a WooCommerce specific menu. To populate the menu, go to Appearance > Menus > Woocommerce Top. Options available

    1. Width - Choose bar width
    2. Background - Choose bar background
    3. Links - Choose links typography
    4. Hover text color - Choose links hover text color
    WooCommerce Top Info Bar
    Fig. 90 A

    5.7.2.9 Responsive

    This options are located in admin menu Infinito > Theme Options > WooCommerce > Responsive as seen on Fig. 90 B. - This options allow you to customize how many shop products to be displayed per row, on different responsive devices. Options available

    1. 480px - How many shop products per row to be displayed up to 480px resolution
    2. 768px - How many shop products per row to be displayed up to 768px resolution
    3. 992px - How many shop products per row to be displayed up to 992px resolution
    4. 1200px - How many shop products per row to be displayed up to 1200px resolution
    5. 1600px - How many shop products per row to be displayed up to 1600px resolution
    WooCommerce responsive options
    Fig. 90 B

    5.7.3 Add new woocommerce product

    To add a new product follow this link

    5.7.4 Product options

    Product options as seen on Fig. 90C - From here you can control extra options of your woocommerce products. To access this options Add/Edit any product, and scroll down to Product options. All options are explained bellow:
    1. Show Related Products? -It will display related products, if any. This will override the theme options settings for that product only. More info here
    2. Show Up-Sells Products? -It will display up-sells products, if any. This will override the theme options settings for that product only. More info here
    3. Header layout - Allow you to change header layout for that specific product only
    4. Other options - Some extra product options
      • Different menu? - Allow you to add another menu in that specific product. Does not work with Center logo - two menus header layout.
      • Disable header - Disable header for that specific product
      • Disable footer - Disable footer for that specific product
    5. Sub-Header Options - Change sub header background for that specific product
    6. Page title & breadcrumb display ? - You can select for that specific product what you want to display - the title and breadcrumb are being displayed right bellow the header on each product post.
      • Theme Default - Theme will display the default options that are defined here
      • Both (title and breadcrumb) - Theme will display title and breadcrumb navigation
      • Breadcrumb - Theme will display breadcrumb navigation only
      • Title - Theme will display title only
      • None - Theme will display nothing
    7. SEO - Allow you to add title, description, and keywords to that specific product
    8. Custom CSS Code - Allow you to add custom CSS Code to that product
    Product Options
    Fig. 90 C

    5.8 Contact page

    To create a contact page follow thise simple steps:

    1. First make sure that Contact form 7 plugin is installed and active
    2. Go to Pages > Add New
    3. Use the default template as seen on Fig. 91
    4. Add anywhere in the page the WPBakery block Contact Form 7
    5. Choose your desired contact shortcode from the list. This shortcodes can be edited in Contact > Contact Forms
    6. Edit your desired settings
    7. Save Changes and Publish the page

    Note: To edit your sender email and other contact related stuff go to Contact > Contact Forms > Add/Edit and edit the options in the tabs : Form / Mail / Messages / Additional Settings as seen on Fig. 92

    Tip: You can also add Google Maps WPBakery block in the contact page, anywhere you desire

    Contact page
    Fig. 91
     Contact page settings
    Fig. 92

    5.9 Typography

    Typography allows you to change theme font colors, size, line height, define main theme font(s) etc.
    This options are located in admin menu Infinito > Theme Options > Typography as seen on Fig. 94. Options available:

    1.Main - Change theme main fonts
    1. Theme main font - This will add all the font weights off the font family selected to the theme. This options is mostly used for WPBakery Blocks, so you can identify font(s) fast when you are editing a font. You will see that on each font dropdown select, there will be an option Theme Main Font ( Font name ) as seen on Fig. 95
    2. Theme main font 2 - This will add all the font weights off the font family selected to the theme. This options is mostly used for WPBakery Blocks, so you can identify font(s) fast when you are editing a font. You will see that on each font dropdown select, there will be an option Theme Main Font 2 ( Font name ) as seen on Fig. 95
    3. Headings font family - Change all headings font family
    4. Body font family - Change body font family
    2.Headings - Change headings typography for each heading
    1. H1 - Change typography for H1 (heading) font. This will override theme styles but not styles defined in Visual Composer elements, or other styles that are already defined in the theme main CSS file, or in theme options
    2. H2 - Change typography for H2 (heading) font. This will override theme styles but not styles defined in Visual Composer elements, or other styles that are already defined in the theme main CSS file, or in theme options
    3. H3 - Change typography for H3 (heading) font. This will override theme styles but not styles defined in Visual Composer elements, or other styles that are already defined in the theme main CSS file, or in theme options
    4. H4 - Change typography for H4 (heading) font. This will override theme styles but not styles defined in Visual Composer elements, or other styles that are already defined in the theme main CSS file, or in theme options
    5. H5 - Change typography for H5 (heading) font. This will override theme styles but not styles defined in Visual Composer elements, or other styles that are already defined in the theme main CSS file, or in theme options
    6. H6 - Change typography for H6 (heading) font. This will override theme styles but not styles defined in Visual Composer elements, or other styles that are already defined in the theme main CSS file, or in theme options
    3.Body fonts - Change body fonts
    1. Paragraph font - Change typography of paragraph font
    Typography options
    Fig. 94
     Theme main font 1 & 2 in WPBakery Blocks
    Fig. 95

    5.11 Set Homepage & Blog page

    To set your homepage and blog page follow this simple steps as seen on Fig. 96

    1. Navigate to Settings > Reading > Your homepage displays > A static page
    2. Choose your Homepage
    3. Choose your Posts page
    4. Click Save Changes
    Set Homepage & Blog page
    Fig. 96

    6.Footer

    Footer it's the last section of your website and it's displayed on very page after the page content.
    To access your footer options go to admin menu Infinito > Theme Options > Footer as seen on Fig. 97
    All footer options are explained bellow

    1.General - Here are all the footer options
    1. Width - Select your footer width - Full width / Boxed
    2. Footer Sidebar(s) - Select how many sidebar(s) footer will have: 1, 2, 3 or 4
    3. 1st Footer Sidebar: Select your footer sidebar layout - This will generate the number of widget areas according to layout selected. To see this in action go to Appearance > Widgets > 1st Footer Sidebar
    4. 2nd Footer Sidebar: Select your footer sidebar layout - This will generate the number of widget areas according to layout selected. To see this in action go to Appearance > Widgets > 2nd Footer Sidebar
    5. 3rd Footer Sidebar: Select your footer sidebar layout - This will generate the number of widget areas according to layout selected. To see this in action go to Appearance > Widgets > 3rd Footer Sidebar
    6. 4th Footer Sidebar: Select your footer sidebar layout - This will generate the number of widget areas according to layout selected. To see this in action go to Appearance > Widgets > 4th Footer Sidebar
    7. Footer Padding - Add padding to footer
    8. Footer Background - Add background to footer
    9. Add border to widgets? - This will add a border right to all footer widgets (except the last one(s) in the row(s). It will also add a border bottom to the Infinito Info Widget (if placed above all widgets, in a single row)
    10. Widgets Border Color - Choose color of widgets border
    2.Copyright - Here are the footer copyright text options which is displayed bellow the footer
    1. Copyright text - Add footer copyright text. Leave blank for no copyright. HTML Characters Allowed
    2. Copyright color - Choose cpyright color text
    3. Copyright Width - Select your footer copyright width - Full width / Boxed
    4. Show social? - If checked it will show the social icons near the copyright.

    5. Note:When show social is checked, copyright alignment is always left.

    6. Social Margin - Add margin top/bottom to social
    7. Social Font - Font size for social icons.
    8. Social icons color - Change color icon for social
    9. Social icons hover color - Change hover color icon for social
    10. Social Style - Change social icons style: simple, square, rounded, circle
    11. Copyright Background - Add background to footer copyright
    12. Copyright Padding - Add padding to footer copyright
    13. Copyright margin - Add margin to footer copyright
    14. Copyright Alignment - Select footer copyright alignment
    15. Add top separator to copyright? - If checked, it will add a border top to the copyright text. The color is the one from Footer -> General > Widgets Border Color
    Footer options
    Fig. 97

    7.Sidebar & Widgets

    A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
    All theme sidebar(s) and widget(s) are explained bellow:

    7.1 Left Sidebar

    Left sidebar is located Appearance > Widgets as seen on Fig. 98

    This sidebar is beying displayed on blog pages and other pages that have the left sidebar or both sidebars layout selected.

    Left sidebar
    Fig. 98

    7.2 Right Sidebar

    Right sidebar is located Appearance > Widgets as seen on Fig. 99

    This sidebar is beying displayed on blog pages and other pages that have the left sidebar or both sidebars layout selected.

    Right sidebar
    Fig. 99

    7.3 Footer Sidebar(s)

    Footer sidebar(s) is/are located Appearance > Widgets as seen on Fig. 100 - bottom part
    This sidebar(s) is/are beying displayed on footer.
    You can add up to 4 footer sidebars.
    To do this follow this simple steps:

    1. Navigate to admin menu Infinito > Theme Options > Footer > General > Footer Sidebar(s)
    2. Select how many sidebar(s) footer will have ( up to 4 sidebars ) as seen on Fig. 100 - top part
    3. Choose your desired layout for each sidebar
    4. Save Changes and go to Appearance > Widgets and locate your footer sidebars as seen on Fig. 100 - bottom part
    5. Add content to each footer widget area.

    6. Tip: You can also use the Custom widget layout option and add your desired layout. The grid is divided in 12 parts, so the sum of entered digits must be 12. I.e (3+5+4) or (2+2+5+3)

    Footer sidebar(s)
    Fig. 100

    7.4 WooCommerce Sidebar

    WooCommerce sidebar is located Appearance > Widgets as seen on Fig. 101

    This sidebar is beying displayed on woocommerce pages if a layout with sidebar is selected.

    Note: Please note that in order for this sidebar to appear you need to install and activate the WooCommerce plugin first

    WooCommerce Sidebar
    Fig. 101

    7.5 Theme widgets

    This theme comes with some specific widgets as seen on Fig. 102. All widgets are explained bellow:

    1. Infinito About us - Add a fancy description and details of your company.
    2. Infinito Editor - Allows you to add arbitrary text, HTML or rich text through the standard WordPress visual editor.
    3. Infinito Flickr widget - You can add your flikr feed photos.
    4. Infinito Info - Add info about your company.
    5. Infinito Portfolio posts - Latest portfolio posts.
    6. Infinito Recent posts - Display Recent Posts in a nice style.
    7. Infinito Shortcode - Paste any shortcode and display it
    8. Infinito Twitter Feed - Add your twitter feed
    Theme widgets
    Fig. 102

    7.6 Regular widgets options

    From this options you can change the blog and pages widgets visual appearance, typography etc.
    To locate this options go to admin menu Infinito > Theme Options > Widgets > Regular widgets as seen on Fig. 103. All widgets options are explained bellow:

    1.Widget headings
    1. Widget heading - Change widget heading typography. This applies to all widgets.
    2. Widgets heading background - Add a background to widgets heading
    3. Widgets heading padding - Add padding to widgets heading
    4. Widget heading icon - Add an icon to the widget headings( This apply to both: regular and footer widgets).
    5. Widget heading icon color - Change color for widget icon heading
    2.Widget links
    1. Widget links - This applies to the following widgets: Text widget links, meta, pages, recent comments, archives, categories, latest posts, latest news, calendar(colors only) ,WooCommerce product widgets and WooCommerce category widgets ( colors only )
    2. Links decoration normal state - Change links decoration normal state. This applies to all links in the widgets
    3. Links decoration hover state - Change links decoration hover state. This applies to all links in the widgets
    4. Custom links icon - This will add an icon to all your custom links - the one added via the text/html widget
    3.Widget text
    1. Widget text - This applies to the following widgets: Text widget, twitter widget, about us widget,comments widget (color only), categories widget (color only), latest posts widget (color only), calendar widget (color only), search widget (color only) and Woocommerce text in all widgets ( for some woocommerce widgets some options may not work - like size, line height etc )
    2. Secondary text color - Change color for secondary text such as tweets date, posts date and tags icon color
    4.Info widget colors - change the Infinito Info widget options
    1. Social icons color - Change the social icons color
    2. Social icons border color - Change the social icons border color
    5.Other widget options
    1. Borders and others - Change color of separators for twitter widget, news widget and also border color for search widget and tags
    Regular widgets options
    Fig. 103

    7.7 Footer widgets options

    From this options you can change the footer widgets visual appearance, typography etc.
    To locate this options go to admin menu Infinito > Theme Options > Widgets > Footer widgets as seen on Fig. 104. All widgets options are explained bellow:

    1.Widget headings
    1. Widget heading - Change widget heading typography. This applies to all widgets.
    2. Widgets heading background - Add a background to widgets heading
    3. Widgets heading padding - Add padding to widgets heading
    4. Widget heading icon - Add an icon to the widget headings( This apply to both: regular and footer widgets).
    5. Widget heading icon color - Change color for widget icon heading
    2.Widget links
    1. Widget links - This applies to the following widgets: Text widget links, meta, pages, recent comments, archives, categories, latest posts, latest news, calendar(colors only) ,WooCommerce product widgets and WooCommerce category widgets ( colors only )
    2. Links decoration normal state - Change links decoration normal state. This applies to all links in the widgets
    3. Links decoration hover state - Change links decoration hover state. This applies to all links in the widgets
    4. Custom links icon - This will add an icon to all your custom links - the one added via the text/html widget
    3.Widget text
    1. Widget text - This applies to the following widgets: Text widget, twitter widget, about us widget,comments widget (color only), categories widget (color only), latest posts widget (color only), calendar widget (color only), search widget (color only) and Woocommerce text in all widgets ( for some woocommerce widgets some options may not work - like size, line height etc )
    2. Secondary text color - Change color for secondary text such as tweets date, posts date and tags icon color
    4.Info widget colors - change the Infinito Info widget options
    1. Social icons color - Change the social icons color
    2. Social icons border color - Change the social icons border color
    5.Other widget options
    1. Borders and others - Change color of separators for twitter widget, news widget and also border color for search widget and tags
    Footer widgets options
    Fig. 104

    8.Theme options

    From here you can change almost every aspect of your theme such as logo, typography, colors, social icons, layout(s) etc. All theme options are located in admin menu Infinito > Theme Options as seen on Fig. 105. All options are explained bellow:

    Theme options
    Fig. 105

    8.1 General

    General options are located in admin menu Infinito > Theme Options > General as seen on Fig. 105. Options available:

    1 . General
    1. Layout - Define your theme main layout - Full Width or Boxed
    2. Container / Grid Width - Add a grid width to the main layout. Units are pixels. If layout is full - width applies to container, else width applies to grid

      3. Important Note: Grid width is calculated like this:
      1.If you enter a grid - over 1200 - ( for example 1210 ) that width will apply only from 1280px resolution and above. ( 1210 + 70 ) > ( 70 is required for content padding and browsers scroll bar )
      2.If you enter a grid - under 1200 - that width will apply only from 1201px above. ( Under 1200 website falls under responsive breakpoint rules )
      3.Default container / grid width is 1090px

    3. Favicon - Upload a favicon
    4. Enable Smooth Scroll? - When scrolling through pages, they run smoother.
    5. Enable Page Preloader? - Display a preloader image until the page it's loaded
    6. Preloader effect - Choose a preloader effect. This is shown until website images and data are loaded completely
    7. Preloader page background - Choose a preloader background
    8. Enable retina - Enable retina images on logo only, or across all websitte images. If you enable retina, please make sure you add @2x images via Media Upload or FTP upload, and place them in the same folder as the original image. More info here
    9. Background selection - This is the background color when you click and drag the mouse across text.
    10. Text color selection - This is the text color when you click and drag the mouse across text.
    11. Google Maps API key - Enter here Google Maps key. This is used in Google Maps WpBakery element only. Without it you won't be able to search for your desired location. More info here
    12. Enable Gutenberg editor? - If you want to use the default wordpress editor across all website, here is where you can disable the Gutenberg Editor
    2 . Main Colors
    1. Theme color 1 - Define a theme color 1 - this color will also be visible on each WPbakery block that has a color field
    2. Theme color 2 - Define a theme color 2 - this color will also be visible on each WPbakery block that has a color field
    3. Theme color 3 - Define a theme color 3 - this color will also be visible on each WPbakery block that has a color field
    4. Body background - Add a body background. This option can be overridden in each page / portfolio
    3 . Site Info - Details entered here are used all across your website. I.e In Header top bar, widgets etc
    1. Phone - Add your phone number
    2. Address - Add your physical address
    3. Email - Add your email
    Theme options
    Fig. 105

    8.2 Header

    All of header options are explained here

    8.3 Blog

    All of blog options are explained here

    8.4 Portfolio

    All of portfolio options are explained here

    8.5 Typography

    All of typography options are explained here

    8.6 Breadcrumb & Page Title

    All of Breadcrumb & Page Title options are explained here

    8.7 Widgets

    All of widgets options are explained here

    8.8 Custom font

    This option will help you to upload and use up to 3 custom fonts in your theme.
    After adding the font(s) name, uploading them, and save changes, refresh the page, and the font will be visible in fonts list, on each typography option, and also on each WPBakery block on font option selector as seen on Fig. 107 - bottom part
    Custom font options are located in admin menu Infinito > Theme Options > Custom Font as seen on Fig. 107 - top part. Options available:

    Custom font options
    Fig. 107

    8.9 Custom CSS | JS

    This option allow you to add custom CSS Code and custom js in your theme without having to modify the core style.css or javascript file(s)
    Custom CSS | JS are located in admin menu Infinito > Theme Options > Custom CSS | JS as seen on Fig. 108

    Custom CSS | JS options
    Fig. 108

    8.10 Footer

    All of footer options are explained here

    8.11 Social

    This option allow you to add social URLs and display them in the header top bar or in the WPBakery Social Block
    Social options are located in admin menu Infinito > Theme Options > Social as seen on Fig. 109

    Note: When adding URLs do not forget the http://

    Social options
    Fig. 109

    8.12 Pagination

    From here you can customize your pagination for all post types. Pagination it's displayed on blog posts page, portfolio page, woocommerce page etc.
    Pagination options are located in admin menu Infinito > Theme Options > Pagination as seen on Fig. 110. Options available:

    1. Pagination padding - Add padding to pagination
    2. Pagination alignment - Select pagination alignment
    3. Links padding - Add padding to the links
    4. Links margin - Add margin to the links
    5. Links font size - Choose links font size
    6. Links background - Choose links background
    7. Links hover background - Choose links hover background
    8. Links color - Choose links color
    9. Links hover color - Choose links hover color
    10. Border color - Choose links border color
    11. Border hover color - Choose links border hover color
    12. Border radius of links - Choose border radius of links
    Pagination options
    Fig. 110

    8.13 WooCommerce

    All of WooCommerce options are explained here

    8.14 Import / Export options

    From here you can Import/Export your theme options and re-use them.
    The Import/Export offers the ability to back up and restore theme options data in one of three ways: raw data, file and URL.
    Import/Export options are located in admin menu Infinito > Theme Options > Import/Export as seen on Fig. 111

    Import/Export options
    Fig. 111

    9.Revolution slider

    All help on how to use Revolution Slider it's located here

    You can also add Revolution Slider anywhere in your pages/post by using the WPBakery Core Revolution Slider 5 Block as seen on Fig. 112
    WPBakery Core Revolution Slider 5 Block
    Fig. 112

    10.Translation & WPML

    Translate website into your language

    You can translate the theme in your language very easy.
    Navigate to the the theme languages folder and you will see 2 files called en_US.po and en_US.mo
    First of all, copy the files elsewhere, and rename them to your WordPress Locale Code. You can find all that info in the table bellow.
    Example: If you want to translate to Dutch, according to the WordPress Locale Code table, your files will be renamed nl_NL.po and nl_NL.mo
    Now copy the renamed files to your languages folder, and follow this simple steps:

    1. Download and install PoEdit, then run it.
    2. Select Edit a Translation ( Open an existion PO file and edit the translation )
    3. Browse the PO file you just renamed and open it.
    4. If you see this message Language of the translation is the same as source language click Fix Language on the right side, and select the language that you want to translate in.
    5. Start translating by clicking on any phrase and enter it's translation in the translation field, right at the bottom of the software window.
    6. When you are done click Save. That's it.
    7. Now when you change the wordpress language ( to your language ) from admin menu Settings > Site Language, the translation files will be loaded and all your website will be translated

    Making your website multilingual

    Infinito is fully tested and compatible with popular wordpress WPML plugin , so if you need a multilingual website, this is the best way to do it.
    Please note that this is a premium plugin, and you need to purchase it first. Here are some useful links on how to use WPML plugin:

    1. WPML Documentation
    2. WPML Support Forum
    Language Name Language Code WordPress Locale Code
    Afrikaans af af
    Akan ak ak
    Albanian sq sq
    Amharic am am
    Arabic ar ar
    Armenian hy hy
    Aromanian rup rup_MK
    Assamese as as
    Azerbaijani az az
    Azerbaijani (Turkey) az-tr az_TR
    Bashkir ba ba
    Basque eu eu
    Belarusian bel bel
    Bengali bn bn_BD
    Bosnian bs bs_BA
    Bulgarian bg bg_BG
    Burmese mya my_MM
    Catalan ca ca
    Catalan (Balear) bal bal
    Chinese (China) zh-cn zh_CN
    Chinese (Hong Kong) zh-hk zh_HK
    Chinese (Taiwan) zh-tw zh_TW
    Corsican co co
    Croatian hr hr
    Czech cs cs_CZ
    Danish da da_DK
    Dhivehi dv dv
    Dutch nl nl_NL
    Dutch (Belgium) nl-be nl_BE
    English en en_US
    English (Australia) en-au en_AU
    English (Canada) en-ca en_CA
    English (UK) en-gb en_GB
    Esperanto eo eo
    Estonian et et
    Faroese fo fo
    Finnish fi fi
    French (Belgium) fr-be fr_BE
    French (France) fr fr_FR
    Frisian fy fy
    Fulah fuc fuc
    Galician gl gl_ES
    Georgian ka ka_GE
    German de de_DE
    German (Switzerland) de-ch de_CH
    Greek el el
    Guaraní gn gn
    Gujarati gu gu_IN
    Hawaiian haw haw_US
    Hazaragi haz haz
    Hebrew he he_IL
    Hindi hi hi_IN
    Hungarian hu hu_HU
    Icelandic is is_IS
    Ido ido ido
    Indonesian id id_ID
    Irish ga ga
    Italian it it_IT
    Japanese ja ja
    Javanese jv jv_ID
    Kannada kn kn
    Kazakh kk kk
    Khmer km km
    Kinyarwanda kin kin
    Kirghiz ky ky_KY
    Korean ko ko_KR
    Kurdish (Sorani) ckb ckb
    Lao lo lo
    Latvian lv lv
    Limburgish li li
    Lingala lin lin
    Lithuanian lt lt_LT
    Luxembourgish lb lb_LU
    Macedonian mk mk_MK
    Malagasy mg mg_MG
    Malay ms ms_MY
    Malayalam ml ml_IN
    Marathi mr mr
    Mingrelian xmf xmf
    Mongolian mn mn
    Montenegrin me me_ME
    Nepali ne ne_NP
    Norwegian (Bokmål) nb nb_NO
    Norwegian (Nynorsk) nn nn_NO
    Oriya ory ory
    Ossetic os os
    Pashto ps ps
    Persian fa fa_IR
    Persian (Afghanistan) fa-af fa_AF
    Polish pl pl_PL
    Portuguese (Brazil) pt-br pt_BR
    Portuguese (Portugal) pt pt_PT
    Punjabi pa pa_IN
    Rohingya rhg rhg
    Romanian ro ro_RO
    Russian ru ru_RU
    Russian (Ukraine) ru-ua ru_UA
    Rusyn rue rue
    Sakha sah sah
    Sanskrit sa-in sa_IN
    Sardinian srd srd
    Scottish Gaelic gd gd
    Serbian sr sr_RS
    Sindhi sd sd_PK
    Sinhala si si_LK
    Slovak sk sk_SK
    Slovenian sl sl_SI
    Somali so so_SO
    South Azerbaijani azb azb
    Spanish (Argentina) es-ar es_AR
    Spanish (Chile) es-cl es_CL
    Spanish (Colombia) es-co es_CO
    Spanish (Mexico) es-mx es_MX
    Spanish (Peru) es-pe es_PE
    Spanish (Puerto Rico) es-pr es_PR
    Spanish (Spain) es es_ES
    Spanish (Venezuela) es-ve es_VE
    Sundanese su su_ID
    Swahili sw sw
    Swedish sv sv_SE
    Swiss German gsw gsw
    Tagalog tl tl
    Tajik tg tg
    Tamazight (Central Atlas) tzm tzm
    Tamil ta ta_IN
    Tamil (Sri Lanka) ta-lk ta_LK
    Tatar tt tt_RU
    Telugu te te
    Thai th th
    Tibetan bo bo
    Tigrinya tir tir
    Turkish tr tr_TR
    Turkmen tuk tuk
    Uighur ug ug_CN
    Ukrainian uk uk
    Urdu ur ur
    Uzbek uz uz_UZ
    Vietnamese vi vi
    Walloon wa wa
    Welsh cy cy
    Yoruba yor yor