VisualPageBuilder inside Tabs/Accordion – Shufflehound Support Center

This topic has 6 replies, 2 voices, and was last updated 7 years, 11 months ago by Shufflehound Support.

Viewing 7 posts - 1 through 7 (of 7 total)

Author
RESOLVED Posts

Participant

How can i use the visual page builder to put elements (e.g. icon box, countdown, etc) inside a tab or accordion element?

Shufflehound Support

Moderator

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

cmurockstar

Participant

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?

cmurockstar

Participant

basically, how can i learn what to do to fully recreate the visual builder?

Attachments:

You must be logged in to view attached files.

Shufflehound Support

Moderator

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

cmurockstar

Participant

Is there any way to look at existing usages of a icon_box inside of a column and get the shortcode?

Shufflehound Support

Moderator

No we don’t find any way to do this.

Author
Posts

Viewing 7 posts - 1 through 7 (of 7 total)

Attachments:

Recent Replies

Recent Topics

Log In