Shortcode – Modal Popups 2014-10-02T17:48:38+00:00

Modal Popups and Windows

 

Credence contains [sh_highlight choice=”foreground” color=”accentcolor”]advanced Modal Popups[/sh_highlight] which you can add to your content.  These can be made to load with the page or triggered by a button.  The Modal Popups or windows included in Credence have many options available.

[sh_modal openready=”enable” title=”A Modal that opens on page load” modalsize=”large” footer=”enable” modalbg=”#ffffff” modalborder=”rgba(0,0,0,0.2)” modalfont=”#555555″ buttontext=”Modal Button” buttoncolor=”#ffffff” buttonborder=”#555555″ buttontextcolor=”#555555″ buttonborderwidth=”2px” buttonborderradius=”4px”][sh_columns number=”2″]

 

[sh_column] [sh_imageframe style=”lifted” source=”http://vindeflame.wpengine.com/wp-content/uploads/2014/09/bird_11.png” bordersize=”1px” bordercolor=”#ccc” padding=”5px” action=”none”] [/sh_column]

 

[sh_column]

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitatione

[/sh_column]

 

[/sh_columns]

 

[sh_progress style=”striped” barcolor=”rgba(0,0,0,0.5)” textcolor=”#fff” background=”rgba(0,0,0,0.15)” percent=”85″ symbol=”%” text=”Add what you like”][/sh_modal]
[sh_headerdouble size=”h4″]Small or Large[/sh_headerdouble]

Have your modals open in small or large windows.

[sh_modal openready=”disable” title=”A Smaller Modal” modalsize=”small” footer=”disable” modalbg=”#ffffff” modalborder=”rgba(0,0,0,0.2)” modalfont=”#555555″ buttontext=”Small Modal Window” buttoncolor=”#ffffff” buttonborder=”#555555″ buttontextcolor=”#555555″ buttonborderwidth=”2px” buttonborderradius=”4px”]At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.[/sh_modal]
[sh_modal openready=”disable” title=”A Larger Modal” modalsize=”large” footer=”disable” modalbg=”#ffffff” modalborder=”rgba(0,0,0,0.2)” modalfont=”#555555″ buttontext=”Large Modal Window” buttoncolor=”#ffffff” buttonborder=”#555555″ buttontextcolor=”#555555″ buttonborderwidth=”2px” buttonborderradius=”4px”]At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.[/sh_modal]
[sh_headerdouble size=”h4″]Style Your Buttons and Modals[/sh_headerdouble]

With Credence, you can style the modal buttons with any color font, background and border color.  You can also set border size and radius.  You can also change the modal background, font, and border color.  Choose if you want to enable and disable the footer.

[sh_modal openready=”disable” title=”Styled Modals” modalsize=”small” footer=”disable” modalbg=”#34495e” modalborder=”rgba(0,0,0,0.2)” modalfont=”#efefef” buttontext=”Styled Button” buttoncolor=”#34495e” buttonborder=”#555555″ buttontextcolor=”#efefef” buttonborderwidth=”0px” buttonborderradius=”4px”]At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.[/sh_modal]
[sh_modal openready=”disable” title=”Styled Modals” modalsize=”small” footer=”enable” modalbg=”#f39c12″ modalborder=”rgba(0,0,0,0.2)” modalfont=”#efefef” buttontext=”Styled Button” buttoncolor=”#f39c12″ buttonborder=”#555555″ buttontextcolor=”#efefef” buttonborderwidth=”2px” buttonborderradius=”4px”]At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.[/sh_modal]
[sh_headerdouble size=”h4″]Include just about anything[/sh_headerdouble]

Add responsive videos and other shortcodes to your modals.  The possibilities are endless.

[sh_modal openready=”disable” title=”Modal with responsive youtube video” modalsize=”large” footer=”disable” modalbg=”#34495e” modalborder=”rgba(0,0,0,0.2)” modalfont=”#efefef” buttontext=”Youtube Video” buttoncolor=”#ffffff” buttonborder=”#555555″ buttontextcolor=”#555555″ buttonborderwidth=”2px” buttonborderradius=”4px”][sh_video height=”360″ width=”700″ id=”F5FEj9U-CJM”]

 

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.[/sh_modal]

[sh_modal openready=”disable” title=”Modal with responsive Vimeo Video” modalsize=”large” footer=”disable” modalbg=”#dd9323″ modalborder=”rgba(0,0,0,0.2)” modalfont=”#efefef” buttontext=”Vimeo Video” buttoncolor=”#ffffff” buttonborder=”#555555″ buttontextcolor=”#555555″ buttonborderwidth=”2px” buttonborderradius=”4px”][sh_video height=”350″ width=”700″ video=”vimeo” id=”103364847″]

 

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.[/sh_modal]

[sh_headerdouble size=”h4″]Options[/sh_headerdouble]
[shvc_checklist type=”unordered” icon=”fa fa-angle-right” background=”enable”][shvc_checklist_item]Use Large and Small sized modals[/shvc_checklist_item][shvc_checklist_item]Change button borders, text and colors[/shvc_checklist_item][shvc_checklist_item]Change Modal background colors[/shvc_checklist_item][shvc_checklist_item]Available in the shortcode generator and Visual Composer[/shvc_checklist_item][/shvc_checklist]
[shvc_checklist type=”unordered” icon=”fa fa-angle-right” background=”enable”][shvc_checklist_item]Enable or Disable the footer[/shvc_checklist_item][shvc_checklist_item]Change Modal text colors[/shvc_checklist_item][shvc_checklist_item]Change Modal border colors[/shvc_checklist_item][shvc_checklist_item]Add other shortcodes and elements to the modal[/shvc_checklist_item][/shvc_checklist]