{"id":2041,"date":"2015-09-01T12:47:31","date_gmt":"2015-09-01T12:47:31","guid":{"rendered":"http:\/\/stopdesign.cn\/demo\/?page_id=2041"},"modified":"2016-03-13T16:11:59","modified_gmt":"2016-03-13T16:11:59","slug":"avatar-with-popup","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/demo\/avatar-with-popup\/","title":{"rendered":"Avatar with Popup"},"content":{"rendered":"

[vc_row full_width=”stretch_row” css=”.vc_custom_1457885469153{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #656d78 !important;}”][vc_column width=”1\/3″]

Optional Title Here<\/h4><\/div>

The content here can be trigger by hover, click or auto delay slideshow.<\/p>\n

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n<\/div><\/div><\/div>

<\/i><\/div>
Hello Icon<\/h5><\/div>
Optional label here<\/span><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]

Avatar can be in Icon or Image<\/h4><\/div>

The avatar support link too. This one is always visible (page loaded).<\/p>\n

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n<\/div><\/div><\/div>

<\/div><\/a>
George Wade<\/h5><\/div>
Web Developer<\/span><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]
Yet a Vector Card demo here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/div><\/div>
<\/div><\/a>

Susan Pena
Web Developer<\/span><\/p><\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457885479275{padding-top: 120px !important;padding-bottom: 160px !important;background-color: #ccd1d9 !important;}”][vc_column width=”1\/2″]

Rich content, like a basic HotSpot element<\/h4><\/div>
\"\"
1<\/i><\/a><\/div>
2<\/i><\/a><\/div>
3<\/i><\/a><\/div>
4<\/i><\/a><\/div><\/div><\/div>[vc_empty_space height=”0px”]
\nQuisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n<\/div><\/div><\/div>
<\/i><\/div>
Location<\/span><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/2″]

Rich content, like image<\/h4><\/div>

\"HWijjF7RwOPGEJ1nb4Zb_IMG_3773\"<\/p>\n

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n

Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, expedita.<\/p>\n<\/div><\/div><\/div>

<\/i><\/div><\/a>
Preview<\/span><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457885489335{padding-top: 140px !important;padding-bottom: 180px !important;background-color: #f2f6fd !important;}”][vc_column width=”1\/3″]

Sarah Miller<\/h4><\/div>

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n<\/div><\/div><\/div>

<\/div>
Sarah Miller<\/h5><\/div>
Web Designer<\/span><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]

Sandra Rios<\/h4><\/div>

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n<\/div><\/div><\/div>

<\/div>
Sandra Rios<\/h5><\/div>
Photographer, Mother, Dreamer<\/span><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]

Willie Coleman<\/h4><\/div>

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n<\/div><\/div><\/div>

<\/div>
Willie Coleman<\/h5><\/div>
PHP Developer<\/span><\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457885499019{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #3bafda !important;}”][vc_column width=”1\/2″]

Trigger by clicking<\/h4><\/div>

Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n

\"field-flower-meadow-3948-4\"<\/p>\n

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n<\/div><\/div><\/div>

<\/i><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/2″][vc_column_text css_animation=”bottom-to-top”]<\/p>\n

Click the icon to see more information<\/span><\/h2>\n

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/span><\/p>\n

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl. Integer a egestas mauris. Nam id diam blandit, condimentum dolor ut, euismod arcu.<\/span><\/p>\n

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl. Integer a egestas mauris. Nam id diam blandit, condimentum dolor ut, euismod arcu.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457885507800{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #3d284b !important;}”][vc_column width=”1\/2″][vc_column_text css_animation=”bottom-to-top”]<\/p>\n

Yet Another Example<\/span><\/h2>\n

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/span><\/p>\n

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl. Integer a egestas mauris. Nam id diam blandit, condimentum dolor ut, euismod arcu.<\/span>[\/vc_column_text][vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/2″]

Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n<\/div><\/div><\/div>

<\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457885516546{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #ccd1d9 !important;}”][vc_column width=”1\/2″]

Click to download now<\/h4><\/div>

Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl.<\/p>\n<\/div><\/div><\/div>

<\/i><\/div><\/a>
DOWNLOAD<\/h5><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/2″][vc_column_text css_animation=”bottom-to-top”]<\/p>\n

Available Features:<\/span><\/h2>\n
    \n
  1. Avatar support icon<\/strong> or image<\/strong>, icon with Visual Composer built-in Icon Picker<\/strong>.<\/li>\n
  2. The popup content can be trigger by clicking, hover, auto delay slideshow or when page is loaded (always visible)<\/strong>. You can select to keep it visible or hidden after user mouse out too.<\/li>\n
  3. Optional link for the avatar.<\/li>\n
  4. Optional title and label under the avatar.<\/li>\n
  5. Optional shadow for the popup content.<\/li>\n
  6. Both avatar and popup content can be in square, rounded small, or rounded large. Avatar can be in circle too.<\/li>\n
  7. Built-in color style with custom color support, you can use color picker to select the avatar background and icon color.<\/li>\n
  8. Responsive<\/strong> and retina<\/strong> ready.<\/li>\n
  9. Add content easily via the WordPress built-in rich text editor, help you add any HTML (like a link or image) easily.<\/li>\n
  10. And more…<\/li>\n<\/ol>\n

    [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"

    [vc_row full_width=”stretch_row” css=”.vc_custom_1457885469153{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #656d78 !important;}”][vc_column width=”1\/3″][vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″][vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″][\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457885479275{padding-top: 120px !important;padding-bottom: 160px !important;background-color: #ccd1d9 !important;}”][vc_column width=”1\/2″][vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/2″][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457885489335{padding-top: 140px !important;padding-bottom: 180px !important;background-color: #f2f6fd !important;}”][vc_column width=”1\/3″][vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″][vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″][\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457885499019{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #3bafda !important;}”][vc_column width=”1\/2″][vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/2″][vc_column_text css_animation=”bottom-to-top”] Click the icon to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/2041"}],"collection":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/comments?post=2041"}],"version-history":[{"count":31,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/2041\/revisions"}],"predecessor-version":[{"id":2337,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/2041\/revisions\/2337"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/media?parent=2041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}