- This topic has 6 replies, 2 voices, and was last updated 7 years, 1 month ago by
.
Viewing 7 posts - 1 through 7 (of 7 total)
How can i use the visual page builder to put elements (e.g. icon box, countdown, etc) inside a tab or accordion element?
Hi @cmurockstar,
I hope you are well today and thank you for your question.
You can use its shortcodes [countdown] and [icon_box] to display it.
These shortcodes have many arguments as following that you can use to configure them.
Countdown :
$options = array( 'id' => array( 'type' => 'unique' ), 'date' => array( 'label' => esc_html__('Date', 'jevelin'), 'desc' => esc_html__('Choose target date', 'jevelin'), 'type' => 'datetime-picker', 'value' => '', 'datetime-picker' => array( 'format' => 'Y/m/d H:i', 'maxDate' => false, 'minDate' => false, 'timepicker' => true, 'datepicker' => true, 'defaultTime' => '12:00', 'step' => 30 ), ), 'style' => array( 'label' => esc_html__('Style', 'jevelin'), 'desc' => esc_html__('Select main style', 'jevelin'), 'type' => 'radio', 'choices' => array( 'style1' => esc_html__('Style 1', 'jevelin'), 'style2' => esc_html__('Style 2', 'jevelin'), 'style3' => esc_html__('Style 3', 'jevelin'), ), 'value' => 'style1', ), 'size' => array( 'label' => esc_html__('Size', 'jevelin'), 'desc' => esc_html__('Select countdown number and text size', 'jevelin'), 'type' => 'select', 'choices' => array( 'small' => esc_html__('Small', 'jevelin'), 'medium' => esc_html__('Medium', 'jevelin'), 'large' => esc_html__('Large', 'jevelin'), ), 'value' => 'medium', ), 'alignment' => array( 'label' => esc_html__('Alignment', 'jevelin'), 'desc' => esc_html__('Select coundown alignment', 'jevelin'), 'type' => 'select', 'choices' => array( 'center' => esc_html__('Center', 'jevelin'), 'left' => esc_html__('Left', 'jevelin'), 'right' => esc_html__('Right', 'jevelin'), ), 'value' => 'center', ), 'number_color' => array( 'label' => esc_html__('Number Color', 'jevelin'), 'desc' => esc_html__('Select number color', 'jevelin'), 'type' => 'color-picker', ), 'title_color' => array( 'label' => esc_html__('Title Color', 'jevelin'), 'desc' => esc_html__('Select title color', 'jevelin'), 'type' => 'color-picker', ), 'border_color' => array( 'label' => esc_html__('Border Color', 'jevelin'), 'desc' => esc_html__('Select border color', 'jevelin'), 'type' => 'rgba-color-picker', 'value' => '' ), 'bold' => array( 'type' => 'switch', 'label' => esc_html__( 'Bold Numbers', 'jevelin' ), 'desc' => esc_html__( 'Switch between regular and bold numbers', 'jevelin' ), 'value' => 'regular', 'left-choice' => array( 'value' => 'regular', 'label' => esc_html__('Regular', 'jevelin'), ), 'right-choice' => array( 'value' => 'bold', 'label' => esc_html__('Bold', 'jevelin'), ), ), 'title_size' => array( 'type' => 'text', 'label' => esc_html__( 'Title Size', 'jevelin' ), 'desc' => wp_kses( __( 'Enter custom title size (with <b>px</b>)', 'jevelin' ), jevelin_allowed_html() ), 'help' => esc_html__( 'Example: 16px;', 'jevelin' ), ), );Icon_box :
$options = array( 'id' => array( 'type' => 'unique' ), 'general' => array( 'title' => esc_html__( 'General', 'jevelin' ), 'type' => 'tab', 'options' => array( 'icon' => array( 'type' => 'new-icon', 'label' => esc_html__('Icon', 'jevelin'), 'desc' => esc_html__( 'Select Icon', 'jevelin' ), 'set' => 'jevelin-icons', ), 'title' => array( 'type' => 'text', 'label' => esc_html__( 'Title', 'jevelin' ), 'desc' => esc_html__( 'Enter Title', 'jevelin' ), ), 'content' => array( 'type' => 'wp-editor', 'teeny' => false, //true 'reinit' => true, 'media_buttons' => false, 'size' => 'large', 'label' => esc_html__( 'Content', 'jevelin' ), 'desc' => esc_html__( 'Enter content', 'jevelin' ).' <script>jQuery(document).ready(function ($) { setTimeout(function(){ $("#textarea_dynamic_id-tmce").trigger("click"); }, 1); });</script>', 'editor_height' => 120 ), 'url' => array( 'type' => 'text', 'label' => esc_html__( 'URL', 'jevelin' ), 'desc' => esc_html__( 'Enter URL', 'jevelin' ), ), ), ), 'styling' => array( 'title' => esc_html__( 'Styling', 'jevelin' ), 'type' => 'tab', 'options' => array( 'style' => array( 'type' => 'multi-picker', 'label' => false, 'desc' => false, 'value' => array( 'style' => 'style1', 'style1' => array( 'icon' => 'icon-like', ), ), 'picker' => array( 'style' => array( 'label' => esc_html__('Style', 'jevelin'), 'type' => 'select', 'choices' => array( 'style1' => esc_html__('Double icons', 'jevelin'), 'style2' => esc_html__('Simple Iconbox 1', 'jevelin'), 'style12' => esc_html__('Simple Iconbox 2', 'jevelin'), 'style3' => esc_html__('Large Iconbox 1', 'jevelin'), 'style4' => esc_html__('Large Iconbox 2', 'jevelin'), 'style5' => esc_html__('Large Iconbox 3', 'jevelin'), 'style6' => esc_html__('Large Iconbox 4', 'jevelin'), 'style7' => esc_html__('Large Iconbox 5', 'jevelin'), 'style8' => esc_html__('Large Iconbox 6', 'jevelin'), 'style9' => esc_html__('Large Iconbox 7', 'jevelin'), 'style10' => esc_html__('Large Iconbox 8', 'jevelin'), 'style11' => esc_html__('Large Iconbox 9', 'jevelin'), ), 'desc' => esc_html__('Choose main style', 'jevelin'), ) ), 'choices' => array( 'style1' => array( 'icon' => array( 'type' => 'new-icon', 'label' => esc_html__('Icon', 'jevelin'), 'desc' => esc_html__( 'Select Icon', 'jevelin' ), 'set' => 'jevelin-icons', 'value' => 'icon-like' ), 'color_line' => array( 'label' => esc_html__( 'Line Color', 'jevelin' ), 'desc' => esc_html__( 'Select line color', 'jevelin' ), 'type' => 'color-picker', ), ), 'style4' => array( 'color_line' => array( 'label' => esc_html__( 'Line Color', 'jevelin' ), 'desc' => esc_html__( 'Select line color', 'jevelin' ), 'type' => 'color-picker', ), ), 'style5' => array( 'color_line' => array( 'label' => esc_html__( 'Line Color', 'jevelin' ), 'desc' => esc_html__( 'Select line color', 'jevelin' ), 'type' => 'color-picker', ), ), 'style7' => array( 'color_line' => array( 'label' => esc_html__( 'Line Color', 'jevelin' ), 'desc' => esc_html__( 'Select line color', 'jevelin' ), 'type' => 'color-picker', ), 'shape' => array( 'type' => 'select', 'label' => esc_html__('Shape', 'jevelin'), 'desc' => esc_html__('Select icon shape', 'jevelin'), 'value' => 'circle', 'choices' => array( 'circle' => esc_html__('Circle', 'jevelin'), 'square' => esc_html__('Square', 'jevelin'), 'rounded' => esc_html__('Rounded', 'jevelin'), 'rhombus' => esc_html__('Rhombus', 'jevelin'), ) ), ), 'style8' => array( 'background_color' => array( 'label' => esc_html__( 'Background Color', 'jevelin' ), 'desc' => esc_html__( 'Select background color', 'jevelin' ), 'type' => 'color-picker', ), 'shape' => array( 'type' => 'select', 'label' => esc_html__('Shape', 'jevelin'), 'desc' => esc_html__('Select icon shape', 'jevelin'), 'value' => 'circle', 'choices' => array( 'circle' => esc_html__('Circle', 'jevelin'), 'square' => esc_html__('Square', 'jevelin'), 'rounded' => esc_html__('Rounded', 'jevelin'), 'rhombus' => esc_html__('Rhombus', 'jevelin'), ) ), ), 'style9' => array( 'background_color' => array( 'label' => esc_html__( 'Background Color', 'jevelin' ), 'desc' => esc_html__( 'Select background color', 'jevelin' ), 'type' => 'color-picker', ), 'shape' => array( 'type' => 'select', 'label' => esc_html__('Shape', 'jevelin'), 'desc' => esc_html__('Select icon shape', 'jevelin'), 'value' => 'circle', 'choices' => array( 'circle' => esc_html__('Circle', 'jevelin'), 'square' => esc_html__('Square', 'jevelin'), 'rounded' => esc_html__('Rounded', 'jevelin'), 'rhombus' => esc_html__('Rhombus', 'jevelin'), ) ), ), 'style11' => array( /*'title' => array( 'type' => 'text', 'label' => esc_html__( 'Hover Title', 'jevelin' ), 'desc' => esc_html__( 'Enter hover title', 'jevelin' ), 'value' => 'Second title' ), 'descr' => array( 'type' => 'text', 'label' => esc_html__( 'Hover Description', 'jevelin' ), 'desc' => esc_html__( 'Enter hover description', 'jevelin' ), 'value' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' ), 'image_background' => array( 'label' => esc_html__( 'Background Image', 'jevelin' ), 'desc' => esc_html__( 'Upload background image', 'jevelin' ), 'type' => 'upload', ), 'background_color' => array( 'label' => esc_html__( 'Background Color', 'jevelin' ), 'desc' => esc_html__( 'Select background color', 'jevelin' ), 'type' => 'color-picker', ), 'active_hover_action' => array( 'type' => 'switch', 'label' => esc_html__( 'Active Hover Action', 'jevelin' ), 'desc' => esc_html__( 'Enable or disable active hover action', 'jevelin' ), 'value' => false, 'left-choice' => array( 'value' => false, 'label' => esc_html__('Off', 'jevelin'), ), 'right-choice' => array( 'value' => true, 'label' => esc_html__('On', 'jevelin'), ), ),*/ ), ), ), 'alignment' => array( 'label' => esc_html__('Alignment', 'jevelin'), 'desc' => esc_html__('Choose alignment', 'jevelin'), 'type' => 'radio', 'choices' => array( 'left' => esc_html__('Left', 'jevelin'), 'center' => esc_html__('Center', 'jevelin'), 'right' => esc_html__('Right', 'jevelin'), ), 'value' => 'center' ), 'color_title' => array( 'type' => 'color-picker', 'label' => esc_html__('Title Color', 'jevelin'), 'desc' => esc_html__('Select title color', 'jevelin'), 'value' => '', ), 'color_text' => array( 'type' => 'color-picker', 'value' => '', 'label' => esc_html__('Text Color', 'jevelin'), 'desc' => esc_html__('Select text color', 'jevelin'), ), 'color_icon' => array( 'type' => 'color-picker', 'value' => '', 'label' => esc_html__('Icon Color', 'jevelin'), 'desc' => esc_html__('Select icon color', 'jevelin'), ), 'color_text_hover' => array( 'type' => 'color-picker', 'value' => '', 'label' => esc_html__('Text Hover Color', 'jevelin'), 'desc' => esc_html__('Select text hover color', 'jevelin'), ), 'color_icon_hover' => array( 'type' => 'color-picker', 'value' => '', 'label' => esc_html__('Icon Hover Color', 'jevelin'), 'desc' => esc_html__('Select icon hover color', 'jevelin'), ), ), ), 'typography_options' => array( 'title' => esc_html__( 'Typography', 'jevelin' ), 'type' => 'tab', 'options' => array( 'font' => array( 'type' => 'select', 'label' => esc_html__('Title Font Famility', 'jevelin'), 'desc' => esc_html__( 'Select from theme options', 'jevelin' ), 'choices' => array( 'heading' => esc_html__( 'Heading', 'jevelin' ), 'body' => esc_html__( 'Body', 'jevelin' ), 'additional1' => esc_html__( 'Additional font 1', 'jevelin' ), 'additional2' => esc_html__( 'Additional font 2', 'jevelin' ), ), 'value' => 'heading', ), 'weight' => array( 'type' => 'select', 'label' => esc_html__('Title Weight', 'jevelin'), 'desc' => esc_html__( 'Select title weight', 'jevelin' ), 'choices' => array( 'default' => esc_html__( 'Default (from theme settings)', 'jevelin' ), 'normal' => esc_html__( 'Normal', 'jevelin' ), 'bold' => esc_html__( 'Bold', 'jevelin' ), ), 'value' => 'default', ), 'font_size' => array( 'type' => 'select', 'label' => esc_html__('Title Size', 'jevelin'), 'desc' => wp_kses( __( 'Enter title size (with <b>px</b>)', 'jevelin' ), jevelin_allowed_html() ), 'type' => 'text', 'value' => '16px' ), 'icon_size' => array( 'type' => 'select', 'label' => esc_html__('Icon Size', 'jevelin'), 'desc' => wp_kses( __( 'Enter icon size (with <b>px</b>)', 'jevelin' ), jevelin_allowed_html() ), 'type' => 'text', ), ), ), );Best regards,
Shufflehound teamhi shufflehound
How do i use these short codes with parameters?
How do i add columns with shortcodes?
Is there some documentation for all the other ones?
basically, how can i learn what to do to fully recreate the visual builder?
You can use shortcode parameters as following.
[countdown date='2017/05/05 12:02' style='style2' size='large'] [icon_box icon='fa fa-anchor']There are only following documentation of Unyson Visual Builder
http://manual.unyson.io/en/latest/extension/shortcodes/
To get more information about shortcodes, you can contact Unyson developer on http://support.themefuse.com/hc/en-us/requests/new
Is there any way to look at existing usages of a icon_box inside of a column and get the shortcode?
No we don’t find any way to do this.
Viewing 7 posts - 1 through 7 (of 7 total)