Services

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

Services

Adding Services

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. logo

  • 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.
  • Font Awesome Icon: Select a font awesome icon that will appear in your service shape.
  • SVG Icon: Select a svg icon that will appear in your service shape.

Header Options

You can find out how to setup the Header Options in the Pages section here.

  • 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 Template

  • Service Page Template: select a page template to use for this service.
  • Categories: Services can be grouped into categories.
  • Featured image: featured image of the service.
Take a look at the video on how to create a new service : How to create a new service

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

  • press the Add element button of the Visual Composer and choose the Services element. Now you can edit the services

logo

  • 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.
  • 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.
  • Hover effect: change the icon/background colors on hover.
  • 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.
  • Link Font Size: choose the size of the font to use in the title.
  • Title font Weight: choose the weight of the font to use in the title.
  • Underline: underline the title.
  • Underline Size: size of the underline.
  • 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 ).
Take a look at the video on how to add a list of services to a page : How to add a service to a page

Single Service Shortcode

Follow these steps to create a single-service view.

  1. Choose which service you want to display.
  2. Pick the image shape and the shape size of the image.
  3. Choose a color for the font awesome or SVG icon of the service.
  4. Set an animation for the icon.
  5. Decide whether you want to have a hover effect.
  6. Set a background color for the service shape.
  7. Add a grid pattern to the shape background.
  8. Decide whether you want to show an image and if that image is linkable.
  9. Decide whether you want to show a title and if that title is linkable.
  10. Set the font size, font weight of the title.
  11. Decide if you want the title to be underlined and how big the underline will be.
  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 global options as described here.