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

  • cmurockstar
    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)

Popular choice

Professional Developers At Your Fingertips!

If you need services beyond standard support, we've got your back!

Services we offer:

Demo setup
Advanced customization
Layout adjustment
Graphic work / visualizations
Custom coding
Full WordPress development and design

Services

What we can offer

  • Demo setup +

    If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.

  • Layout adjustment +

    We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.

  • Advanced customization +

    More complex styling changes, theme option modifications, and third-party integrations.

  • Custom coding +

    If you need something that's not included in the theme, we can code it for you.

  • Graphic work / visualizations +

    Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.

  • Full WordPress development and design +

    Full website builds, custom theme development, or plugin creation from scratch.

  • About pricing +

    We'll provide a clear quote based on what you need. No hidden fees.

Professional Developers At Your Fingertips!

Custom Work Form