VisualPageBuilder inside Tabs/Accordion

Home Forums Jevelin Theme VisualPageBuilder inside Tabs/Accordion

Home Forums Jevelin Theme VisualPageBuilder inside Tabs/Accordion

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    RESOLVED Posts
  • 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 team

    hi 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?

    Attachments:
    You must be logged in to view attached files.

    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/

    http://docs.themefuse.com/exposure/your-theme/blog-posts/add-visual-builder-shortcodes-to-your-blog-posts

     

    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)