Creating services

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here


Creating a service

The Services menu option on the left is where you add services. To add a new service, select the Services > Add New option from the left hand WordPress menu. When you create a new service, you need to setup a few more options. Single Service

  • Title and main content the main service title and content as it will appear in the single service page.
  • Excerpt: the summary of your service's content that will be shown in the services list when you add it as content to your pages.
  • Service Icon: Select a font awesome or feather icon that will appear in your service shape.

Setting Single Service page header

You can find out how to setup the Header Optionsin the Pagessection here.

Linking service item to another page or url

You can link your service items to another page or an external url, by setting your options from the Linkmetabox, at the bottom of the service item page

  • Link Type: Your service item can link to a
    1. Default Link: the single service page.
    2. Page: a page that you have created.
    3. Post: a post that you have posted.
    4. Portfolio: a portfolio item that you have created.
    5. Category: a category of posts.
    6. URL: an external URL.
    7. No Link: the service item is not linkable.
  • Open Link In: Where the link will open.

Service Templates

When editing a service item, at the bottom of the page there is a Service Templatemetabox. From there you can pick the template that you want your page to be styled with. If you want to use a full-width template, the Default Templateis suitable. Choose Right Sidebaror Left Sidebar, if you have defined any widgets for the sidebar.

It is recommended to use the Default Template, if you do not plan to use sidebars.

Service categories

You can assign each service item to an existing category, or create a new one from the Categoriesmetabox located under the Updatebutton.

Single Service Page

Creating a service page

Creating a Service Page is exactly the same as creating a normal page. You can find out how to create a Service Pagein the Pagessection here.

Adding services to a page

If you wish to add a services section to your page, once you have created an empty row, follow these steps

Services Shortcode

  • press the Add element button of the Visual Composer and choose the Services element. Now you can edit the services
  • Choose a category: the category of the services that you wish to be shown.
  • Services Count: the number of services to show.
  • Columns (horizontal style): number of columns to show the services in.
  • Text Color: Set the text color of the heading.
  • Image Shape: the shape of the service's image.
  • Shape Size: the size of the service's shape.
  • Icon Color: set the color of the icon ( svg & font awesome icons ).
  • Icon Animation: icon animation that will occur when you hover over the service shape.
  • Shape Background Color: set the color shape background.
  • Shape Background Grid: adds a grid pattern to the shape background.
  • Show Image: show or hide the images.
  • Link Image: linkable images.
  • Show Titles: show or hide the services' titles.
  • Link Title: linkable titles.
  • Show Excerpt: show or hide the excerpts.
  • Excerpt & More Text Alignment: sets the text alignment of the excerpt text and the read more link.
  • Show Readmore Link: show or hide the readmore link.
  • Readmore Link Text: customize your readmore link.
  • Margin Top: Amount of space to add above this element.
  • Margin Bottom: Amount of space to add below this element.
  • Scroll Animation: Animation that will occur when the user scrolls onto the element.
  • Animation Delay: Delay after scrolling onto the element before animation starts.
  • Extra Classes: Add any extra classes you need to add to this element. ( space separated ).
  • Animation Timing: Will load all services at once or each one individually.

Adding a Single Service to a page

Follow these steps to create a single-service view.

  1. Press the Add element button of the Visual Composer and choose the Single Service element. Now you can edit the services.
  2. Choose which service you want to display.
  3. Set the text color of the single service.
  4. Pick the image shape and the shape size of the image.
  5. Choose a color for the font awesome/feather icon of the service.
  6. Set an animation for the icon.
  7. Decide whether you want to have a hover effect.
  8. Set a background color for the service shape.
  9. Add a grid pattern to the shape background.
  10. Decide whether you want to show an image and if that image is linkable.
  11. Decide whether you want to show a title and if that title is linkable.
  12. If you have added an excerpt text to the single service when you created it, now you can show or hide that excerpt. If you show it, pick your alignment.
  13. Show or hide a Readmore link, and set the text of that link.
  14. Set the top/bottom margins for the section.
  15. Set your animation options.
  16. Add any Extra Classes.