[dfd_spacer screen_wide_spacer_size=”80″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”70″ screen_tablet_spacer_size=”60″ screen_mobile_spacer_size=”50″]
[dfd_heading subtitle=”Stylish way to present imformation. Hotspot shortcode is a perfect way to show a lot of details on custom image.” content_alignment=”text-left” module_animation=”transition.slideLeftBigIn” enable_delimiter=”” title_font_options=”tag:h3|font_size:41|line_height:41|letter_spacing:0″ subtitle_font_options=”tag:div|font_size:15|color:%234c4c4c|line_height:32″ subheading_margin=”margin-top:20″ undefined=”” title_responsive=”font_size_desktop:37|line_height_desktop:37|font_size_tablet:36|line_height_tablet:36|font_size_mobile:36|line_height_mobile:36″]Hotspot
shortcode[/dfd_heading][dfd_spacer screen_wide_spacer_size=”20″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”20″ screen_tablet_spacer_size=”20″ screen_mobile_spacer_size=”20″][dfd_button button_text=”Read documentation” alignment=”text-left” module_animation=”transition.slideLeftBigIn” select_icon=”dfd_icons” border=”border_style:dashed|border_width:1|border_radius:50|border_color:%23d3d3d3″ main_style=”style-3″ buttom_link_src=”url:http%3A%2F%2Fnativewptheme.net%2Fsupport%2Fvisual-composer%2Fhotspot||target:%20_blank|” box_shadow=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)” hover_box_shadow=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)” padding_top=”17″ padding_bottom=”17″ ic_dfd_icons=”dfd-socicon-paper” text_color=”#2d2d2d” ic_color=”#232323″ background=”rgba(255,255,255,0.01)” hover_text_color=”#ffffff” hover_ic_color=”#333333″ hover_background=”#3498db” undefined=”” tutorials=””][dfd_spacer screen_wide_spacer_size=”60″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”40″ screen_tablet_spacer_size=”40″ screen_mobile_spacer_size=”40″][dfd_progressbar percent=”76″ title=”Usage frequency” height_progress_line=”36″ back_line_border=”border_style:none” main_layout=”layout-3″ font_options=”tag:div|font_size:13″ number_font_options=”tag:div” back_line_background=”rgba(255,255,255,0.01)” progress_background_color=”#6ac3ff” animate_progress=”anim_progress” undefined=””][dfd_progressbar percent=”79″ title=”Preset amount” height_progress_line=”36″ back_line_border=”border_style:none” main_layout=”layout-3″ font_options=”tag:div|font_size:13″ number_font_options=”tag:div” back_line_background=”rgba(255,255,255,0.01)” progress_background_color=”#49a9e9″ animate_progress=”anim_progress” undefined=””][dfd_progressbar percent=”93″ title=”Customizability” height_progress_line=”36″ back_line_border=”border_style:none” background_style=”gradient_background” main_layout=”layout-3″ font_options=”tag:div|font_size:13″ number_font_options=”tag:div” back_line_background=”rgba(255,255,255,0.01)” animate_progress=”anim_progress” progress_background_gradient=”gradient_style:left|gradient_css:background%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojMzQ5OERCOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNFRTM2NTg7IiAvPjwvbGluZWFyR3JhZGllbnQ%2BPC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg%3D%3D)%3B%0Abackground%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20left%20bottom%2C%20color-stop(0%25%2C%20%233498DB)%2C%20color-stop(100%25%2C%20%23EE3658))%3B%0Abackground%3A%20-moz-linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B%0Abackground%3A%20-webkit-linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B%0Abackground%3A%20-o-linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B%0Abackground%3A%20-ms-linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B%0Abackground%3A%20linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B|gradient_value:0%25%20%233498DB%2C100%25%20%23EE3658″ undefined=””][dfd_spacer screen_wide_spacer_size=”0″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”0″ screen_tablet_spacer_size=”60″ screen_mobile_spacer_size=”60″]
shortcode[/dfd_heading][dfd_spacer screen_wide_spacer_size=”20″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”20″ screen_tablet_spacer_size=”20″ screen_mobile_spacer_size=”20″][dfd_button button_text=”Read documentation” alignment=”text-left” module_animation=”transition.slideLeftBigIn” select_icon=”dfd_icons” border=”border_style:dashed|border_width:1|border_radius:50|border_color:%23d3d3d3″ main_style=”style-3″ buttom_link_src=”url:http%3A%2F%2Fnativewptheme.net%2Fsupport%2Fvisual-composer%2Fhotspot||target:%20_blank|” box_shadow=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)” hover_box_shadow=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)” padding_top=”17″ padding_bottom=”17″ ic_dfd_icons=”dfd-socicon-paper” text_color=”#2d2d2d” ic_color=”#232323″ background=”rgba(255,255,255,0.01)” hover_text_color=”#ffffff” hover_ic_color=”#333333″ hover_background=”#3498db” undefined=”” tutorials=””][dfd_spacer screen_wide_spacer_size=”60″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”40″ screen_tablet_spacer_size=”40″ screen_mobile_spacer_size=”40″][dfd_progressbar percent=”76″ title=”Usage frequency” height_progress_line=”36″ back_line_border=”border_style:none” main_layout=”layout-3″ font_options=”tag:div|font_size:13″ number_font_options=”tag:div” back_line_background=”rgba(255,255,255,0.01)” progress_background_color=”#6ac3ff” animate_progress=”anim_progress” undefined=””][dfd_progressbar percent=”79″ title=”Preset amount” height_progress_line=”36″ back_line_border=”border_style:none” main_layout=”layout-3″ font_options=”tag:div|font_size:13″ number_font_options=”tag:div” back_line_background=”rgba(255,255,255,0.01)” progress_background_color=”#49a9e9″ animate_progress=”anim_progress” undefined=””][dfd_progressbar percent=”93″ title=”Customizability” height_progress_line=”36″ back_line_border=”border_style:none” background_style=”gradient_background” main_layout=”layout-3″ font_options=”tag:div|font_size:13″ number_font_options=”tag:div” back_line_background=”rgba(255,255,255,0.01)” animate_progress=”anim_progress” progress_background_gradient=”gradient_style:left|gradient_css:background%3A%20url(data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojMzQ5OERCOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNFRTM2NTg7IiAvPjwvbGluZWFyR3JhZGllbnQ%2BPC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg%3D%3D)%3B%0Abackground%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20left%20bottom%2C%20color-stop(0%25%2C%20%233498DB)%2C%20color-stop(100%25%2C%20%23EE3658))%3B%0Abackground%3A%20-moz-linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B%0Abackground%3A%20-webkit-linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B%0Abackground%3A%20-o-linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B%0Abackground%3A%20-ms-linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B%0Abackground%3A%20linear-gradient(left%2C%233498DB%200%25%2C%23EE3658%20100%25)%3B|gradient_value:0%25%20%233498DB%2C100%25%20%23EE3658″ undefined=””][dfd_spacer screen_wide_spacer_size=”0″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”0″ screen_tablet_spacer_size=”60″ screen_mobile_spacer_size=”60″]
[dfd_heading style=”style_09″ subtitle=”” content_alignment=”text-left” module_animation=”transition.slideRightBigIn” enable_delimiter=”” title_font_options=”tag:h3|font_size:21″ subtitle_font_options=”tag:h6″ undefined=””]Available options[/dfd_heading][dfd_spacer screen_wide_spacer_size=”20″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”20″ screen_tablet_spacer_size=”20″ screen_mobile_spacer_size=”20″][dfd_announcement module_animation=”transition.slideRightBigIn” content_announcement=”Default code: `{`dfd_hotspot module_animation=““ tooltip_position=““ tooltip_width=“300“`}`” select_icon=”fontawesome” ic_fontawesome=”fa fa-code” main_border=”border_style:none” icon_size=”14″ main_style=”style-1″ full_width_background=”show” undefined=””][dfd_spacer screen_wide_spacer_size=”20″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”20″ screen_tablet_spacer_size=”20″ screen_mobile_spacer_size=”20″]
Image – Upload the image from the media library;
Tooltip action– Define the action the hotspot tooltip will be displayed on;
Animation – Choose between 14 preset animation effects;
Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;
Marker settings – Specify the marker style, background and decoration background color;
Tooltip settings – Select the tooltip position, content alignment, tooltip min width and backgtound color;
Border style – Allows you to set style, color, radius and width for the border;
Typography – Select letter spacing, font size and element tag. You can also choose the custom font family.
[dfd_spacer screen_wide_spacer_size=”120″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”80″ screen_tablet_spacer_size=”60″ screen_mobile_spacer_size=”60″][dfd_heading subtitle=”Sample of preset style without custom changes” module_animation=”transition.expandIn” enable_delimiter=”” title_font_options=”tag:h3″ subtitle_font_options=”tag:div|font_size:14|color:%23606060|line_height:30″ subheading_margin=”margin-bottom:25″ undefined=”” title_responsive=”font_size_tablet:26|font_size_mobile:24″ subtitle_responsive=”font_size_mobile:13|line_height_mobile:26″]Default style[/dfd_heading][dfd_delimiter delimiter_style=”dfd-delimiter-with-text” text_delimiter=”Simple style” undefined=””][dfd_spacer screen_wide_spacer_size=”40″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”40″ screen_tablet_spacer_size=”40″ screen_mobile_spacer_size=”40″][dfd_spacer screen_wide_spacer_size=”80″ screen_normal_resolution=”1280″ screen_tablet_resolution=”1024″ screen_mobile_resolution=”800″ screen_wide_resolution=”1280″ screen_normal_spacer_size=”70″ screen_tablet_spacer_size=”60″ screen_mobile_spacer_size=”50″]
[dfd_hotspot module_animation=”transition.slideUpBigIn” tooltip_position=”dfd-button-tooltip-bottom” tooltip_width=”300″ image=”23953″ box_shadow=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)” hotspot_data=”%5B%7B%22index%22%3A2%2C%22x%22%3A12.811426116838486%2C%22y%22%3A45.54455445544555%2C%22Title%22%3A%22Radiator%20replacement%22%2C%22Message%22%3A%22Pellentesque%20sit%20amet%20dignissim%20dolor.%20Cras%20in%20dolor%20gravida%2C%20feugiat%20velit%20ac%2C%20condimentum%20dolor.%22%7D%2C%7B%22index%22%3A3%2C%22x%22%3A18.82517182130584%2C%22y%22%3A31.353135313531354%2C%22Title%22%3A%22Car%20battery%20services%22%2C%22Message%22%3A%22Mauris%20aliquet%20dui%20vitae%20ante%20scelerisque%2C%20ac%20malesuada%20mauris%20pharetra.%20Praesent%20placerat%20ultrices.%22%7D%2C%7B%22index%22%3A4%2C%22x%22%3A25.869845360824744%2C%22y%22%3A50.165016501650165%2C%22Title%22%3A%22Headlights%20replacement%20%22%2C%22Message%22%3A%22Ut%20sed%20nunc%20sit%20amet%20elit%20tempor%20ornare%20accumsan%20quis%20orci.%20Vivamus%20ac%20elementum%20lacus.%22%7D%2C%7B%22index%22%3A5%2C%22x%22%3A42.02104810996563%2C%22y%22%3A32.67326732673268%2C%22Title%22%3A%22Brake%20system%20flush%22%2C%22Message%22%3A%22Pellentesque%20habitant%20morbi%20tristique%20senectus%20et%20netus%20et%20malesuada%20fames%20ac%20turpis%20egestas..%22%7D%2C%7B%22index%22%3A6%2C%22x%22%3A46.144759450171826%2C%22y%22%3A11.55115511551155%2C%22Title%22%3A%22Windshield%20repair%22%2C%22Message%22%3A%22Nullam%20congue%20odio%20non%20libero%20suscipit%2C%20ac%20tristique%20nibh%20ultrices.%20Cras%20quis%20leo%20at%20augue%20feugiat%20auctor%20ut%20in%20tellus.%22%7D%2C%7B%22index%22%3A8%2C%22x%22%3A67.89897798742139%2C%22y%22%3A34.93357487922705%2C%22Title%22%3A%22Door%20latch%20replacement%22%2C%22Message%22%3A%22Sed%20in%20eros%20in%20nunc%20luctus%20laoreet%20nec%20sit%20amet%20orci.%20Donec%20id%20rutrum%20felis%2C%20eget%20feugiat%20urna.%20%22%7D%2C%7B%22index%22%3A9%2C%22x%22%3A68.481529209622%2C%22y%22%3A13.861386138613863%2C%22Title%22%3A%22Lubricate%20doors%22%2C%22Message%22%3A%22Morbi%20ligula%20nibh%2C%20rutrum%20quis%20tortor%20vel%2C%20posuere%20dapibus%20ligula.%20Mauris%20euismod%20enim%20nunc.%22%7D%2C%7B%22index%22%3A10%2C%22x%22%3A81.84551886792453%2C%22y%22%3A38.82095410628019%2C%22Title%22%3A%22Brake%20pad%20replacement%22%2C%22Message%22%3A%22Quisque%20ut%20nisl%20lobortis%2C%20egestas%20magna%20in%2C%20facilisis%20diam.%20Integer%20pharetra%20nunc%20in%20pellentesque.%22%7D%2C%7B%22index%22%3A11%2C%22x%22%3A48.343160377358494%2C%22y%22%3A53.864734299516904%2C%22Title%22%3A%22Wheel%20balancing%22%2C%22Message%22%3A%22Suspendisse%20eget%20sem%20odio.%20Cras%20magna%20mi%2C%20ullamcorper%20in%20egestas%20sit%20amet%2C%20iaculis%20dapibus%20felis.%22%7D%2C%7B%22index%22%3A12%2C%22x%22%3A78.87382075471699%2C%22y%22%3A13.035929951690822%2C%22Title%22%3A%22Lubricate%20trunk%22%2C%22Message%22%3A%22In%20lectus%20ante%2C%20dignissim%20a%20tincidunt%20sit%20amet%2C%20efficitur%20eu%20est.%20Nulla%20gravida%20pretium%20lectus%20quis%20imperdiet.%22%7D%5D”]