{"id":1924,"date":"2015-05-31T05:25:44","date_gmt":"2015-05-31T05:25:44","guid":{"rendered":"http:\/\/stopdesign.cn\/demo\/?page_id=1924"},"modified":"2016-03-13T16:00:47","modified_gmt":"2016-03-13T16:00:47","slug":"gradient-box","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/demo\/gradient-box\/","title":{"rendered":"Gradient Box"},"content":{"rendered":"

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

<\/i><\/div>

Optional Avatar<\/h3>Optional avatar, avatar support icon or image.\u00a0Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo.<\/div><\/div><\/div><\/a>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]
<\/div>

Image Avatar Here<\/h3>Title align support left, center or right.\u00a0Content here support HTML, which mean you can add a link<\/a><\/span>, bold text<\/strong>, or italic text<\/em>\u00a0etc.<\/div><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]
<\/i><\/div>

Support customized color<\/h3>Optional background color for the content area, help you to make it looks like a gradient border box. Quisque aliquet mauris vitae mi faucibus fringilla. Aliquam efficitur, eros rutrum sagittis tempor.<\/div><\/div><\/div><\/a>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457884710449{margin-top: -42px !important;padding-top: 120px !important;padding-bottom: 160px !important;background-color: #f2f6fd !important;}”][vc_column width=”1\/3″]
<\/i><\/div>

Hello Location<\/h3>Support VC built-in Icon Picker<\/strong>.\u00a0Icon support optional background too, include square, rounded small, rounded large, or circle.<\/div><\/div><\/div><\/a>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]
<\/i><\/div>Without the title in this box. Circle icon background here.\u00a0Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo.<\/div><\/div><\/div><\/a>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]
<\/i><\/div>

Align right example<\/h3>The box can be in square or rounded, rounded small or large.\u00a0Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo.<\/div><\/div><\/div><\/a>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457884719560{margin-top: -42px !important;padding-top: 140px !important;padding-bottom: 180px !important;background-color: #3bafda !important;}”][vc_column width=”1\/3″]

Text only example<\/h3>You can add text only box, without the icon or image avatar.\u00a0Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo.<\/div><\/div><\/div><\/a>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]

Align Vertical Middle<\/h3>You can add text only box, without the icon or image avatar.\u00a0Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo.<\/div><\/div><\/div><\/a>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]

Text only example<\/h3><\/p>\n

You can add text only box, without the icon or image avatar. Text align center, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo.<\/p>\n

<\/div><\/div><\/div><\/a>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457884728376{margin-top: -42px !important;padding-top: 160px !important;padding-bottom: 200px !important;background-color: #222f46 !important;}”][vc_column width=”1\/3″]

<\/i><\/div>

Gradient Border Example<\/h3><\/p>\n

You can add background (same color as the row background) for the content area, make whole box look like a Gradient Border Box.<\/p>\n

<\/div><\/div><\/div><\/a>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]

<\/div>

Gradient Border Example<\/h3><\/p>\n

You can add background (same color as the row background) for the content area, make whole box look like a Gradient Border Box.<\/p>\n

<\/div><\/div><\/div><\/a>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]

<\/div>

Yet another example<\/h3><\/p>\n

You can add background (same color as the row background) for the content area, make whole box look like a Gradient Border Box.<\/p>\n

<\/div><\/div><\/div><\/a>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457884736776{margin-top: -42px !important;padding-top: 160px !important;padding-bottom: 200px !important;background-color: #37bc9b !important;}”][vc_column width=”1\/3″]

<\/i><\/div>

Basic Icon Box Example<\/h3><\/p>\n

Set the border color to blank, customize the content background color same as the row, make it looks like a basic icon box. Of course, it support a link<\/a><\/span>.<\/p>\n

<\/div><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]

<\/i><\/div>

Basic Icon Box Example<\/h3><\/p>\n

Set the border color to blank, customize the content background color same as the row, make it looks like a basic icon box. Of course, it support a link<\/a><\/span>.<\/p>\n

<\/div><\/div><\/div>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/3″]

<\/i><\/div>

Basic Icon Box Example<\/h3><\/p>\n

Set the border color to blank, customize the content background color same as the row, make it looks like a basic icon box. Of course, it support a link<\/a><\/span>.<\/p>\n

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

<\/div>

Hello there, bigger avatar<\/h3>Curabitur elementum dolor ut risus ullamcorper viverra. Nam imperdiet odio eros, eget volutpat urna maximus vel. Integer ut justo quam. Maecenas congue sed nulla sit amet varius.<\/div><\/div><\/div><\/a>[vc_empty_space height=”20px”][\/vc_column][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.<\/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.[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457884751022{margin-top: -42px !important;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″]

<\/i><\/div>

Hello there, optional title<\/h3>Curabitur elementum dolor ut risus ullamcorper viverra. Nam imperdiet odio eros, eget volutpat urna maximus vel. Integer ut justo quam. Maecenas congue sed nulla sit amet varius.<\/div><\/div><\/div><\/a>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457884843651{margin-top: -42px !important;padding-top: 100px !important;padding-bottom: 160px !important;background-color: #f5f7fa !important;}”][vc_column width=”1\/2″]
\"\"
<\/i><\/div><\/div><\/a>[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/2″][vc_column_text css_animation=”bottom-to-top”]<\/p>\n

Video Cover Demo<\/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.<\/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. Aliquam erat volutpat. Mauris dictum quam quis tortor imperdiet, eu pretium eros porta. Proin accumsan justo nibh, tristique pharetra est vestibulum sit amet. Suspendisse potenti. Donec sagittis, lacus eget pellentesque ultricies, risus ipsum gravida elit, eu imperdiet quam risus non mauris. Curabitur elementum dolor ut risus ullamcorper viverra. Nam imperdiet odio eros, eget volutpat urna maximus vel. Integer ut justo quam. Maecenas congue sed nulla sit amet varius.[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1457884818596{margin-top: -42px !important;padding-top: 100px !important;padding-bottom: 100px !important;background-color: #ccd1d9 !important;}”][vc_column width=”1\/2″]

<\/i><\/div>

Customized start and end color<\/h3>Curabitur elementum dolor ut risus ullamcorper viverra. Nam imperdiet odio eros, eget volutpat urna maximus vel. Integer ut justo quam. Maecenas congue sed nulla sit amet varius.<\/div><\/div><\/div><\/a>[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. Optional avatar, avatar support icon<\/strong> or image<\/strong>, icon with Visual Composer built-in Icon Picker<\/strong>.<\/li>\n
  2. Avatar (icon or image) can be in circle, rounded small, rounded large or square<\/strong>.<\/li>\n
  3. Whole box can be in square, rounded small, or rounded large.<\/li>\n
  4. Built-in gradient color style, also support customize color<\/strong>.<\/li>\n
  5. Content area can be align vertically center or with padding only.<\/li>\n
  6. Optional background color for the content area, help you make a gradient border looking.<\/li>\n
  7. Optional icon background.<\/li>\n
  8. Responsive<\/strong> and retina<\/strong> ready.<\/li>\n
  9. Optional link for whole box.<\/li>\n
  10. Add content easily via the WordPress built-in rich text editor, help you add any HTML (like a link) easily.<\/li>\n
  11. Optional tooltip for whole box.<\/li>\n
  12. Box title align can be in left, center or right.<\/li>\n
  13. 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_1457884701737{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_1457884710449{margin-top: -42px !important;padding-top: 120px !important;padding-bottom: 160px !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_1457884719560{margin-top: -42px !important;padding-top: 140px !important;padding-bottom: 180px !important;background-color: #3bafda !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_1457884728376{margin-top: -42px !important;padding-top: 160px !important;padding-bottom: 200px !important;background-color: #222f46 !important;}”][vc_column width=”1\/3″][vc_empty_space […]<\/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\/1924"}],"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=1924"}],"version-history":[{"count":66,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/1924\/revisions"}],"predecessor-version":[{"id":2330,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/1924\/revisions\/2330"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/media?parent=1924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}