Shortcodes

Component structure:

get_component_with_params('ra-animated-block', array(array(slug,slug,...), int anim_duration=1000, int anim_delay=600, string anim_effect='fadeInDown excerpt=false, string class_name='col-sm-(2-12)'))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('ra-animated-block', array(array('index', 'index-1', 'index-2'), 2000, 800, 'bounceInLeft', false, 'col-xs-4')); ?>

insert Animated block with content from pages: index, index-1, index-2; set Animation duration to 2000ms; set Animation delay to 800ms; set Animation effect to bounceInLeft; outputs - full pages content; create 3 responsive columns.

2. <?php get_component_with_params('ra-animated-block', array(array('index', 'index-1'), false, false, 'slideInUp', 400, 'col-md-6')); ?>

insert Animated block with content from pages: index, index-1; default Animation duration 1000ms; default Animation delay 600ms; set Animation effect to slideInUp; outputs - pages excerpts 400 simbols lenght; create 2 responsive columns.

3. <?php get_component_with_params('ra-animated-block', array( 'index' )); ?>

insert Animated block with content from page: index; default Animation duration 1000ms; default Animation delay 600ms; default Animation effect fadeInDown; outputs - full page content; create 1 responsive column 100% width.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% ra-animated-block "index index-1" 2000 800 bounceInLeft false "col-xs-4" %}

Component structure:

get_component_with_params('ra-tabs', array( array(slug,slug,...), int active_tab_nr=1, excerpt=false, tabs_layout='horizontal'))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('ra-tabs', array( array('index', 'index-1', 'index-2'), 2, false, 'vertical')); ?>

insert 3 tabs with content from pages: index, index-1, index-2; make active second tab; outputs - full pages content; tabs layout - vertical.

2. <?php get_component_with_params('ra-tabs', array( array('index', 'index-1'), 1, 400)); ?>

insert 2 tabs with content from pages: index, index-1; make active first tab; outputs - pages excerpts 400 simbols lenght; tabs layout - horizontal.

3. <?php get_component_with_params('ra-tabs', array( 'index' )); ?>

insert 1 tab with content from page: index; outputs - full pages content; tabs layout - horizontal.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% ra-tabs "index index-1" 1 false vertical %}

Carousel slideshow with animated elements use Twitter Bootstrap script and free library Animate.CSS

Component structure:

get_component_with_params('ra-carousel', array(array(slug,slug,...)))

Component call - insert in your template next code example:

<?php get_component_with_params('ra-carousel', array(array('slide-1', 'slide-2', 'slide-3'))): ?>

Component logic is as follows - the content of the slide taken from specified page and searched between elements <p> ... </ p>. The content may have formatted texts and images. The first element must be the background. Background consists of either a photo (it is inserted using the graphical editor) or the background color (enter a few characters and apply background color for them). If background is the photo - styles are ignored (ie automatically charged width and height of 100%). All downstream elements are treated as the slide content. Element type of text can be customized with styles (graphic editors style application uses the <span> tag). Components can work with styles that bring together up to level 2 <span> elements. Animation effect settings must be apply to the element <p> and specify two values: effect name (field data-effect) and effect delay (field data-delay). Delay's value must be in milliseconds. To <p> elements must be apply styles to indicate its location on the slide (px;% or Viewport measuring units). Eg.:

< p data-delay="500" data-effect="fadeInDownBig" style="top:20%;left:20%">< span style="font-size:28px;">< span style="color:#FFF;">My text< /span>< /span>< /p>

If item is photo can be applied width and height dimensions styles (taken from graphic editor). Eg.:

< p data-delay="2000" data-effect="zoomInUp" style="top:2vh;left:-5vw">< img alt="" src="photo.png" style="width: 80px; height: 80px;" / > < /p>

If for <p> element(s) fields: data-effect, data-delay,  style values are not specified - they are generated using random numbers.

Animation effects preview and effects name you can see on theme settings administration page.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% ra-carousel "slider-1 slider-2 slider-3" %}

Generated photo gallery with magnifying effect (used prettyPhoto script).

Component structure:

get_component_with_params('ra-gallery', array(array(slug,slug,...), bool img_title=false, bool img_alt=false))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('ra-gallery', array(array('gallery-1', 'gallery-2', 'gallery-3'), true, true)); ?>

insert Gallery elements with content from pages:gallery-1, gallery-2, gallery-3; show image title tag field; show image alt tag field.

2. <?php get_component_with_params('ra-gallery', array(array('gallery-1', 'gallery-2'), false, true)); ?>

insert Gallery elements with content from pages:gallery-1, gallery-2; show only image alt tag field.

3. <?php get_component_with_params('ra-gallery', array('gallery-1')); ?>

insert Gallery elements with content from page:gallery-1; show image only.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% ra-gallery "gallery-1 gallery-2" true true %}