Tabs & Slides

Creating a slide

  1. After you have logged into the backend, go to the article manager and open the article that you wish to add the slide into.
  2. The way in which a slide works is that you “wrap” the area of content that you wish to slide in “tags”. The way in which to do this is find the content that you wish to make slide in and out.
  3. At the start of the content type:
    code_sample_1
    <heading> is what will be displayed on your website for users to click on to activate the slide in effect. A good example is this webpage it utilises the effect. The tag is code_sample_2
  4. Once you have entered the start tag, you must also end the tag. Find the end of the content and enter:
    code_sample_3
    This ends the section that will have the slide effect on it.
  5. It is possible to have multiple slides on one page. Each time use the code_sample_4 and code_sample_5 tags for each section.
  6. Once you have finished, save the document and test it on the front end of your site.
    Example:
    code_sample_6
    Cakes are very good
    code_sample_7

Please note, that you cannot have a slide with in a slide.

Creating a tab

  1. Once you have logged into the back end of your website. Go to the article manager and open the article that you wish to add the tabs into.
  2. To create the tabs, enter in:
    code_sample_8
    <heading> represents the title of the tab. For example if the tab contained information about cakes, you could enter code_sample_9.
  3. The content that follows the tag will be placed into the tab that you just created. To add a second tab, enter:
    code_sample_10
    <heading2> represents the title of the second tab.
  4. Each new tab that you wish to create just type in the previous tag. Once you have finished with the tabs, enter in:
    code_sample_11
    Example:
    code_sample_12
    This is all in tab1!
    code_sample_13
    This is tab2
    code_sample_14

Combining tabs and slides

  1. It is possible to use tabs and slides together. To do this, open an article in the article manager.
  2. The way in which this works is using tabs first and then the content that is within those tabs we can apply the slide effect to. So, create your first tab using code_sample_15.
  3. Now you can sort the content in the tab using the code_sample_16 tag to create the slide and then remembering to end the slide using code_sample_17
  4. You can use as many slides as you want per tab. For the next tab, type in code_sample_18 and then you can continue to add slides.
  5. Once you have finished adding tabs, enter in code_sample_19
  6. Click on “Save” and check the effect on the front end.