WP SHORTCODE PRO USER'S GUIDE
Contents
1. WP SHORTCODE PRO USER S GUIDE WP Pop Up Documentation WP Shortcode Pro is a wordpress plugin that enables the user to make use of shortcodes to generate various content types to posts and pages It is a quick and easy tool to use in adding styles to your contents without any need of in depth programming knowledge or experience TABLE OF CONTENTS Title Page Introductory Page Table of Contents How to Use WP Shortcode Pro Headline Heading Frame Tabs Accordian Spoiler Service Box Button Devider Spacer Quote Pullquote Testimony Highlight Label Fancy Link Dropcap Note Message List Definition List Column Youtube GMap Tweets Slider OOOAnN A UU BWN How to Use WP Pop Up This guide assumes that you already have logged in to your wordpress admin area and that WP Shortcode Pro has been successfully installed in your wordpress site a Create or edit an existing page or post You should see the WP Shortcode Pro icon on the right side of the Add Media button See screenshot below for reference Add Media B I w ZE uza s E Heading2 U 2B Avi fw o b Click the icon in order to display the options to generate shortcodes for specific content types insert shortcode Headline Add headline image to your page Headline Heading Frame Add headline image to your page Styled heading Styled image frame Tabs Accordian Spoiler Create tabs menu to your page Create accordian to your p2. as follows a Style choose from 6 different tab styles according to your preference b Content For the contents of the tabs you must specify within html tag definition list like the following example where in between lt dt gt lt dt gt tags is the title of the tab menu and in between lt dd gt lt dd gt tags is the content of the tab lt dl gt lt dt gt Tab Menu 1 lt dt gt lt dd gt Tab Content 1 lt dd gt lt dt gt Tab Menu 2 lt dt gt lt dd gt Tab Content 2 lt dd gt lt dl gt V Accordian This will insert a styled accordion tab menu in your post or page See example below Accordian 1 Accordian 2 Accordian 3 In order to generate the shortcode for this content type you need to supply the settings which are as follows a Style choose from 3 different accordion styles according to your preference b Content For the contents of the accordion you must specify within html tag definition list like the following example where in between lt dt gt lt dt gt tags is the title of the accordian menu and in between lt dd gt lt dd gt tags is the content of the accordian lt dl gt lt dt gt Accordian Menu 1 lt dt gt lt dd gt Accordian Content 1 lt dd gt lt dt gt Accordian Menu 2 lt dt gt lt dd gt Accordian Content 2 lt dd gt lt dl gt VI Spoiler This will insert a dynamic spoiler section on your post or page which you can set to be open or close See examples below
3. image or permalink which can be the post or page as the source of the image s d Slider Size this defines how large will the slider be inside the post or page 23 e Number of Slides defines how many slides or images are to be displayed in the slider f Animation speed 1000 1 second determines how fast the animation is applied after every slider g Animation delay 1000 1 second determines the interval the slider changes or shifts to another image 24
4. lt dd gt lt dd gt tags is the content of it lt dl gt lt dt gt Definition List 1 lt dt gt lt dd gt Definition List Content 1 lt dd gt lt dt gt Definition List 2 lt dt gt lt dd gt Definition List Content 2 lt dd gt lt dl gt XXIII Column This generates a shortcode wherein depending on the settings will the size of the column shall appear on the posts or pages In order to generate the shortcode for this content type you need to supply the settings which are as follows a Column Size determines the size of the column that should appear on the post or page 19 b Last Column this checkbox when ticked will determine that the content added shall be the last column in a row c Content the contents that should be in every defined column XXIV Youtube This is used to render youtube videos to posts and pages via a shortcode See sample below In order to generate the shortcode for this content type you need to supply the settings which are as follows a Video URL enter the url of the youtube video in this field You may copy the url on the address bar or you may use the share link just below the video b Autostart Video this checkbox when ticked shall render the video to start automatically when the post or page loads c Width determines how wide will the video be in pixels d Height determines how tall the video will be in pixels XXV GMap This generates a
5. posts or pages Below are examples using this shortcode This Is Example For Heading This Is Example For Heading In order to generate the shortcode for this content type you need to supply the settings which are as follows b C d Title this is the title or the content of the heading to be displayed on the post or page Style choose from 4 different styles to design your headings HTML tag choose what type of heading it will be hi h2 h3 h4 h5 or h6 Text Align the alignment of text contents on your heading III Frame This content type generates a shortcode which renders frame to your page or post image Below is an example of a framed image In order to generate the shortcode for this content type you need to supply the settings which are as follows a Image Tag this tag is lt img src yourimage jpg gt Replace yourimage jpg with the actual image url The easiest way to do this is upload your image using the Add Media button and copy the image url without inserting the image on the page or post editor b Frame Align this determines the image alignment c Style 3 different frame styles you can choose from to apply to your image IV Tabs This will insert a styled tab to any post or page Below is an example of an inserted tab shortcode Tab Menu 1 Tab Menu 2 Tab Menu 3 In order to generate the shortcode for this content type you need to supply the settings which are
6. which is an alternative to the blockquote built in feature of the wordpress editor See example below In order to generate the shortcode for this content type you need to supply the Content which is the text content of your quote XIII Pullquote This works if you would like to insert citations which can be positioned according to your preferences Below is an example of a pullquote 12 it non tget malesuada sem vene tus 10n con Donec semper faucibus aliquet Mauris et t fringilla Ut condimentum sodales diam aliquam feugiat justo tempus Duis Donec ac dolor nunc Duis eget elit eget elit auctor volutpat tortor in augue auctor pulvinar nibh ut tempor massa ectus pulvinar sit amet lectus interdum Fi i ibendum dignissim nisl Ut egestas neque Vestibulum viverra lectus eget velit fring fermentum Nullam aliquam ornare tortor Vestibulum viverra lectus eget velit fermen tum ornare hendrerit elementum nulla venenatis neque iaculis Maecenas ullamcorper sque sagittis ornare elementum porttitor tellus ac vulputate eros accumsan nec Quisque s In order to generate the shortcode for this content type you need to supply the settings which are as follows a Content this would be the content inside the pullquote b Pullquote Alignment setting which would allow you to decide how you would like your pullquote to be positioned XIV Testimony This creates a shortcode that renders content for a testimonial See im
7. age below Iznyn suspeni sf Mat ortor ett on sodales me NE nO esent co et fringilla Ut condimentum sodales massa Donec ac dolor nunc Duis eget elit aucto OL tr tempo FUSCE CO L n i YOKE eugiat commodo mn sed eros net SEM SOHICITLC In order to generate the shortcode for this content type you need to supply the settings which are as follows a Author this is the name of author or writer of the testimonial b Content this is where the testimonial content should go c Style choose from 4 styles according to your preference to style your testimonials 13 XV Highlight This generates a shortcode that highlights contents setup See example below e mipit n jea a le i rA t diam Suspendisse mattis tortor ert non soaales metus SUSCIDIT NON Praesent convallis ut dia antum sodales massa Donec ac dolor nunc Suspendisse mattis tor et VUIS eget ert auctor pulvinar ninn ut tempor ta QUIS feugiat risus commodo Nuliam sed eros sit In order to generate the shortcode for this content type you need to supply the settings which are as follows a Background Color this will be the color of the highlight to your text You can choose the colors using the built in color picker or you may also manually enter the hexadecimal value of the color b Text Color this is the color of your text You can choose the colors using the built in color picker or you may also manually enter th
8. age Create hidden text E Service Box Button Service box with title Colored box with caption Styled button Devider Spacer Quote ig Content devider with optional TOP link Empty space with adjustable height Biockquote alternative Pullquote Testimony Highlight Pulkguote Box comment Highlighted text Label Fancy Link Dropcap Chelad taka Can we Unie Men maaan c Select from the list of content types you would like to generate shortcodes Define settings and click Insert Content Types Supported Listed below are content types supported by the plugin to generate shortcode I Headline This inserts a shortcode to design and use as a headline to your posts or pages Below are examples of the headline styles Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet con sectetur adipiscing elit In order to generate the shortcode for this content type you need to supply the settings which are as follows a Content this is the text content of your headline b Text color the color of the text content which you can configure according to your preference You can either use the built in color picker or enter the hexadecimal value of the color c Font size this would be the size of the text content of your headline d Background this is where you can add style to your headline by choosing from the 6 different styles available II Heading This will insert styled headings to your
9. e hexadecimal value of the color Always take note not to use the same color as with your background color else the text would just blend in to the highlight c Content this is where you will enter the text contents to be highlighted XVI Label This generates a shortcode that creates labels to your posts or pages Refer to the example below ir ig ae Aer ee a eTa ct e H T eve ok a TTT vat ba 7 P T e iz va nar sit amet lectus interdum bibendum dignissim nisl RUSSER E Vestibulum viverra lectus eget velit fermentum MAUFEL LEE UEA ae estibulum viverra g y S ornare erementt Aliquam porta quam mi m Mauris consectetur accumsan ipsum 14 In order to generate the shortcode for this content type you need to supply the settings which are as follows a Style this determines what label style will you be using for your contents You may choose from default info success warning error or inverse b Content this is where the content to be labeled should be entered XVII Fancy Link This generates a shortcode that adds style to your link making it fancy See below picture as an example In order to generate the shortcode for this content type you need to supply the settings which are as follows a Link Color this is the color of the text link Select a color using the built in color picker or manually enter the hexadecimal value of the color of your choice b Style c
10. hoose from 3 different styles available according to your preference c URL should be filled in with the destination of your link when clicked by the user d Content this is where will the anchor text of your link be added XVIII Dropcap This generates a shortcode for dropcaps in text contents of your posts and pages See example below for reference In order to generate the shortcode for this content type you need to supply the settings which are as follows 15 a Dropcap Size choose from the 3 available sizes of the dropcap small medium or large b Dropcap Style choose from the 3 dropcap styles of your choosing c Content should be the first letter of the product where you would like to apply dropcaps XIX Note This shorcode generates note styling to contents Basically it is applicable to emphasize important reminders or instructions on your posts or pages See sample below N ndisse mattis tortor elit non sodales metus suscipit non Praesent convallis ut diam D uw m SLI et fringilla Ut condimentum sodales massa Donec ac dolor nunc Duis eget elit auctor T h m og pulvinar nibh ut tempor massa Fusce convallis turpis vel arcu porta qu giat risus commodo Nullam sed eros sit amet sem sollicitudin fringilla In order to generate the shortcode for this content type you need to supply the settings which are as follows a Color select a color from the built in co
11. lor picker or manually enter the hexadecimal value of the color of your choice to be used as the background b Content this is where you will be placing the contents as notes XX Message This shortcode is quite similar to note except that it is intended to show 4 types of messages in your site which is info success warning or error See examples below 16 SLSDeN e Malt rorcor elt non sodaies Met S CIDIE NO Praesent ca Ef ro n conaimentum sogaies A ONEC ac GOO RA D ege efjii CTO h ut tempor n aecenas ncarpe OTE 0 Sa ege pipenc ne pree pace j opo nied OTE or j iO ere 2 en g a i et sempe ce S eci ece e rerme n O e vene i a i mnogo met a 1 rm eri eleme Bere OfFeetL sen re i elle nTesSi Sa MD Su PCr Hoe ma e torto Por l od i eiT ene Ne Onec Semper j Sa er i N TeL tO Lemp O Oreo In order to generate the shortcode for this content type you need to supply the settings which are as follows a Style choose from the list what type of message will the content be displayed on your post or page b Content this is where the contents or the message should be entered XXI List This generates a shortcode that displays fancy looking lists in your posts or pages See example below OF Cge sen ene ne onec semper Tau eT ef i i PLICI At ra temo 0 tLDalt Orto g e fect ner ect werc mmenc mt g L egest e e seq net e co ecel i Ct aC CU erat
12. on te est ul i te CID Note This is only applicable to unordered lists 17 In order to generate the shortcode for this content type you need to supply the settings which are as follows a Icon choose from the different icons in the dropdown the style you prefer using for your list items b Content you must specify within html tag unordered list as the following example where in between lt ul gt lt ul gt tags are the list items enclosed between lt li gt lt li gt lt ul gt lt li gt Item 1 lt li gt lt li gt Item 1 lt li gt lt ul gt XXII Definition List This shortcode is used to generate a definition list or to define certain terms inside a post or page See example below Sed dictum purus nec augue condimentum Suspendisse mattis tortor elit non sodales metus suscipit non Praesent convallis UT aiam et fringila Ut condimentum sodales massa Donec ac GOIOr arcu porta quis feugiat risus commodo Nullam sed eros sit amet sem sollicitudin In order to generate the shortcode for this content type you need to supply the settings which are as follows 18 a Style choose from 3 different definition list styles of your preference b Content are the contents to be defined where the definition style will be applied to The must be within html tag definition list like the following example where in between lt dt gt lt dt gt tags is the title of the definition list and in between
13. rr AA were m om gt vestibulum neque est id ipsum Quisque ut metus vitae orci molestie conval a Title the title or heading of your service b Icon URL the location of your icon that should start with http c Content this is the section where you can list down and describe your services VIII Box This inserts a styled box to your post or page See below sample for this content type In order to generate the shortcode for this content type you need to supply the settings which are as follows a Box Color this will be the theme color of the box You can choose from the built in color picker or you can manually enter the hexadecimal value of the color b Title this will be the title or the heading of the box content 10 c Content this field will be where you should be adding in the content inside the box IX Button This inserts different buttons coming in with different styles to be used on whatever it will serve best in your posts or pages See example below Ay Button 1 My Button 2 x My Button 3 My Button 4 M aD In order to generate the shortcode for this content type you need to supply the settings which are as follows a Button Label this is the text value of your button b Button URL this is the url destination of the link when clicked c Style choose from the 7 different buttons styles according to your preference d Button Size determines the size of yo
14. shortcode that displays google map in your post or page Just like the following example 20 ondonderry at Map satellite Duy sina 5 ci Je t Carlow Stoke on sacral Nott es x A Limerick Ry T Town Centre Leicester y oKilkenn h AY y Clonmel o Waterford Map data eats Apia emer ehon0y Google Terms of Use RAT a map error In order to generate the shortcode for this content type you need to supply the settings which are as follows a Map Latitude should be filled in with a numerical value that is the exact latitude of the location in the map b Map Longitude should be filled in with a numerical value that is the exact longitude of the location in the map c Width the width of the map in pixels d Height the height of the map in pixels XXVI Tweets This generates a shortcode that displays a specific number of tweets in a post or page See example below 21 Tweets W Follow Manutd Manchester United mManUic 3h Downtime Down Under mutour pic twitter com rSnHHgTroy Expand Manchester United mManUtc 5h In safe hands David De Gea trains with goalkeeping coach Chris Woods for the first time mutour pic twitter com v69sL1a3TT Expand Manchester United ManUtd Bh Join us for a live Twitter Q amp A with rioferdyS tomorrow 16 Jul at fpmin Sydney 10am BST Use AskRio to submit your questions mutour Expand Manchester United Manvic Sh Here in Australia
15. the first one is show to be open Spoiler 1 Lorem Ipsum GOlor SK amet consectetur adipiscing elt Z eu E ectet ege nperdiet Sed pharetra a nunc sit amet cursus Aene n phare dip Donec id tempor justo Vivamus non nibh sapien Praese z gue sit amet ipsun amcorper ut molestie mi accumsan Etiam tincic ho e vehi 0 dignissim ut Spoiler 2 Spoiler 3 In order to generate the shortcode for this content type you need to supply the settings which are as follows a Title the title heading of your spoiler content b Content the content below the title which contains the spoiler c Is Spoiler Open option to determine whether the content of a spoiler is displayed by default d Style choose from 3 different spoiler styles according to your preference VII Service This will insert a content containing the list of services that you have to offer to your clients or customers Please see example below i My Service 1 Dd Lorem ipsum dolor sit amet consectetur adipiscing elit Donec neque urna sodaies non condimentum vitae egestas eu velit Cum sociis natoaue penati DUS et magnis dis parturient monte ascetl GIC 5 mus Nam id torto sed id lorem id ieo pretium cursus My Service 2 a aN Pee A E Ps AAS Ep pee Sees Dobao all rai LERA EA aa Peta seems shel os wy usce aiquet nist Ut Diacerat tempor a di ante TiINCIGUNTE risus fraviGe m sym Tv te Eg j Mtie rai iiS wees a A
16. the players travel in style mutour pic twitter com 14UN1uLyCkK Expand Manchester United mManUtc Gh Robin van Persie gets into the swing of things in Sydney mutour pic twitter com dov3tvG 7 XT Expand TS fences EGAR O Pe ee weet TO icoManUta In order to generate the shortcode for this content type you need to supply the settings which are as follows a Twitter Username should be filled in with the username of your twitter account b Number of Tweets to Show determines how many of your latest tweets to be displayed in the post or page c Tweets Style choose from 2 styles light or dark available you would like your tweets to be showed in 22 XXVII Slider This generates a shortcode that displays a dynamic and beautiful slider in a post or page using the image gallery See sample below In order to generate the shortcode for this content type you need to supply the settings which are as follows a Source of Image this determines where the source of the images is accessible It can either be image s of the current post or image s of a specific post b Post when you select under source of image post this field will appear which prompts you to specify the post as the source of the image s c Image Link when the image s are clicked by the user this field defines where they will be redirected It can either be image default where the link is the actual image url of a specific
17. ur button You can either set it to be mini small medium large or very large e Text Color the color of the text content or the label of your button You can choose the color using the built in color picker or manually enter the hexadecimal value of your choice f Corner Radius this determines how round will be the corners of your button in pixels g Button Icon this dropdown contains various pre made button icons ready for use in your button h Icon Position this determines the position of your icon which can either be before the text or after the text i Link Target determines how the link should be opened Select self if you would like it to be opened on the same window or blank if you want it to be opened in a new tab or window X Devider This generates a shortcode for a divider that adds a division in between contents in posts or pages See example below 11 In order to generate the shortcode for this content type you need to supply the settings which are as follows a Show Top Link choose whether to show or hide the top link which when clicked takes the user to the top of the page b Style choose from the 4 devider styles available according to your preference XI Spacer This creates an empty space with adjustable height There is only one setting to configure for this content type which is spacer height in pixels The value should be an integer XII Quote This creates a quote
Download Pdf Manuals
Related Search