{"id":1410,"date":"2017-05-02T12:42:51","date_gmt":"2017-05-02T12:42:51","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=1410"},"modified":"2017-10-21T12:32:49","modified_gmt":"2017-10-21T12:32:49","slug":"basic-items","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/shortcodes\/basic-items\/","title":{"rendered":"Basic Items"},"content":{"rendered":"<p>The <strong><em>Shortcode Basic Items<\/em><\/strong> are conceived to stand as independent design elements <strong><em>or<\/em> <\/strong>to enhance the existing page content <strong><em>or<\/em> <\/strong>to be a part of other\u00a0shortcodes, like\u00a0<em>Custom Font, Accordion,\u00a0<\/em><em>Row<\/em>.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>This type of shortcodes\u00a0have the specific feature for allowing <strong>no content<\/strong> to be embellished inside them.<\/p>\n<p>Their\u00a0close tag always looks like this \u2013\u00a0<strong>\/]<\/strong>\u00a0\u2013 the sign tells that you cannot embellish the\u00a0content inside the shortcode.<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: 0px 0px 18px 6px;\"><p><span class=\"pikode pikode--highlight highlight--fill\" style=\"background-color: #4b917d;  color: #ffffff;  box-shadow: 0.21em 0px 0px #4b917d, -0.21em 0px 0px #4b917d;\" >Keep in mind<\/span> \u00a0\u00a0By embellishing content, we mean the use of any WordPress Editor tools or the insertion\u00a0inside the same shortcode of any other shortcodes.<\/p><\/div>\n<p>For example, a Button shortcode <em>does not allow<\/em> a Map or a Team Member shortcode <em>to be inserted inside itself<\/em>.<\/p>\n<p>There are nine shortcodes of this type:\u00a0<em>Button, Dropcap, Highlight, Icon, Map, Progress bar, Quote, Separator<\/em>\u00a0and <em>Team member<\/em>.<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\">\n<div \t\tclass=\"pikode pikode--row  summary-box\" style=\"padding: 0px 0px 36px 0px; margin: 0px -36px 0px 0px;\" >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t\t<div class=\"pikode--row__background\">\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"color-overlay\" style=\"opacity: 1; background-color: #4b917d;\" ><\/div>\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-light\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\" style=\"padding: 0px 30px 0px 30px;\" >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; line-height: 1.0; text-decoration: none; color: #ffffff; padding: 36px 0px 0px 0px;\"><p>Summary<\/p><\/div>\n<p><a href=\"#button\">Button<\/a><br \/>\n<a href=\"#dropcap\">Dropcap<\/a><br \/>\n<a href=\"#highlight\">Highlight<\/a><br \/>\n<a href=\"#icon\">Icon<\/a><br \/>\n<a href=\"#map\">Map<\/a><br \/>\n<a href=\"#progress-bar\">Progress Bar<\/a><br \/>\n<a href=\"#quote\">Quote<\/a><br \/>\n<a href=\"#separator\">Separator<\/a><br \/>\n<a href=\"#team-member\">Team Member<\/a><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n\n<div id=\"button\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/buttons\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Button<\/span><\/a><\/p><\/div>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 36px;\"><p>Buttons are widely used elements on the web and can be used for multiple purposes. The Button has the following options:<\/p>\n<ul>\n<li><strong>Label\u00a0<\/strong>\u2014 insert here <em>button text label<\/em><\/li>\n<li><strong>Size\u00a0<\/strong>\u2014\u00a0vertical and horizontal spacing between <em>button text label<\/em> and <em>button box<\/em><\/li>\n<li><strong>Text size\u00a0<\/strong>\u2014 font size of text label<\/li>\n<li><strong>Link<\/strong>\u00a0\u2014\u00a0enter full URL\u00a0in order to link the button<\/li>\n<li><strong>New tab\u00a0<\/strong>\u2014 if enabled, the button link &#8211; when clicked &#8211; opens in a new tab of browser window<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014 if it&#8217;s necessary\u00a0to add more style rules<\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 36px;\"><p>The options below are tied to Button color style:<\/p>\n<ul>\n<li><strong>Text\u00a0<\/strong>\u2014\u00a0color of\u00a0button text<\/li>\n<li><strong>Text hover\u00a0<\/strong>\u2014 color of\u00a0button text <em>while hovered by mouse<\/em><\/li>\n<li><strong>Background<\/strong>\u00a0\u2014 color of\u00a0button\u00a0box background<\/li>\n<li><strong>Background\u00a0hover\u00a0<\/strong>\u2014 color of button\u00a0box background <em>while hovered by mouse<\/em><\/li>\n<li><strong>Border\u00a0<\/strong>\u2014 color of\u00a0button\u00a0box\u00a0border<\/li>\n<li><strong>Border hover<\/strong> \u2014 color of\u00a0button\u00a0box\u00a0border\u00a0<em>while hovered by mouse<\/em><\/li>\n<\/ul><\/div><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"dropcap\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/dropcap-collection\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Dropcap<\/span><\/a><\/p><\/div>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 36px;\"><p>Dropcap is a large initial letter (or letters) that is\u00a0usually used at the beginning of paragaph. The Dropcap has the following options:<\/p>\n<ul>\n<li><strong>Character\/Text<\/strong>\u2014 insert here\u00a0the letter or the characters you want to emphasize<\/li>\n<li><strong>Type\u00a0<\/strong>\u2014\u00a0the way dropcap is showcased\n<ul>\n<li>normal<strong>\u00a0<\/strong>\u2014 simple letter<\/li>\n<li>square<strong>\u00a0<\/strong>\u2014 letter is wrapped in a square box<\/li>\n<\/ul>\n<\/li>\n<li><strong>Font size\u00a0<\/strong>\u2014 font size of letter\/characters in <em>pixels<\/em><\/li>\n<li><strong>Font weight<\/strong>\u00a0\u2014 how light or bold the dropcap looks<\/li>\n<li><strong>Text color\u00a0<\/strong>\u2014 color of\u00a0letter\/characters<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014 if it&#8217;s necessary\u00a0to add more style rules<\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 36px;\"><p>The following options are tied just to <em>Square Type<\/em> of dropcap:<\/p>\n<ul>\n<li><strong>Square size\u00a0<\/strong>\u2014\u00a0size of square the letter\u00a0fits in, measured in <em>pixels<\/em><\/li>\n<li><strong>Background color<\/strong>\u00a0\u2014 color of square\u00a0box background<\/li>\n<li><strong>Border color\u00a0<\/strong>\u2014 color of square\u00a0box\u00a0border<\/li>\n<\/ul><\/div><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"highlight\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/highlights\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Highlight<\/span><\/a><\/p><\/div>\n<p>Highlight represents\u00a0exaggeration of words in a text with the use of color, in order to emphasize these words\u00a0from the rest of the text. The Highligt\u00a0has the following options:<\/p>\n<ul>\n<li><strong>Type\u00a0<\/strong>\u2014\u00a0the way highlight is showcased\n<ul>\n<li>Fill \u2014 background of words is filled up with color<\/li>\n<li>Shadow<strong>\u00a0<\/strong>\u2014 colored bold line at the bottom of words<\/li>\n<\/ul>\n<\/li>\n<li><strong>Text color\u00a0<\/strong>\u2014 color of\u00a0emphasized words<\/li>\n<li><strong>Background color<\/strong>\u00a0\u2014 depending on <em>Type<\/em>, color of emphasized words background<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014\u00a0in case there is a need\u00a0to add more style rules<\/li>\n<\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"icon\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/icons\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Icon<\/span><\/a><\/p><\/div>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 36px;\"><p>Icons are widely used elements on the web, being\u00a0great for communicating all sorts of information. The Icon has the following options:<\/p>\n<ul>\n<li><strong>Type\u00a0<\/strong>\u2014\u00a0the way icon is showcased\n<ul>\n<li>Basic \u2014\u00a0simple icon<\/li>\n<li>Square<strong>\u00a0<\/strong>\u2014\u00a0icon is wrapped in a square box<\/li>\n<li>Circle \u2014 icon is wrapped in a circular shape<\/li>\n<\/ul>\n<\/li>\n<li><strong>Size\u00a0<\/strong>\u2014 choose from one of the predefined icon sizes<\/li>\n<li><strong>Position\u00a0<\/strong>\u2014\u00a0choose\u00a0how to align the icon: <em>Left<\/em>, <em>Center<\/em> or <em>Right<\/em><\/li>\n<li><strong>Flip\u00a0<\/strong>\u2014\u00a0turn icon over\u00a0relative to<em> X or Y axis<\/em><\/li>\n<li><strong>Link<\/strong>\u00a0\u2014\u00a0enter full URL\u00a0in order to link the button<\/li>\n<li><strong>New tab\u00a0<\/strong>\u2014 if enabled, the button link &#8211; when clicked &#8211; opens in a new tab of browser window<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014\u00a0in case there is a need\u00a0to add more style rules<\/li>\n<li><strong>Icon List\u00a0<\/strong>\u2014 choose an icon to be displayed<\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 36px;\"><p>The following options are tied to Icon color style:<\/p>\n<ul>\n<li><strong>Text\u00a0<\/strong>\u2014\u00a0color of\u00a0icon<\/li>\n<li><strong>Text hover\u00a0<\/strong>\u2014 color of icon\u00a0<em>while hovered by mouse<\/em><\/li>\n<\/ul>\n<p>The following options are also tied to Icon color style, but this time specific just for <em>Square<\/em> and <em>Circle Types<\/em>:<\/p>\n<ul>\n<li><strong>Background<\/strong>\u00a0\u2014 color of icon box background<\/li>\n<li><strong>Background\u00a0hover\u00a0<\/strong>\u2014 color of icon box background <em>while hovered by mouse<\/em><\/li>\n<li><strong>Border\u00a0<\/strong>\u2014 color of icon box\u00a0border<\/li>\n<li><strong>Border hover<\/strong> \u2014 color of icon box\u00a0border\u00a0<em>while hovered by mouse<\/em><\/li>\n<\/ul><\/div><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"map\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/google-maps\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Map<\/span><\/a><\/p><\/div>\n<p>Map is a shortcode that interacts with Google Maps in order to showcase a carefully stylized and interactive topographical element. The Map has the following options:<\/p>\n<ul>\n<li><strong>Locations\u00a0<\/strong>\u2014 add how many locations you want to the map\n<ul>\n<li>Latitude from GMaps\u00a0\u2014 get latitude data from Google Maps<\/li>\n<li>Longitude from GMaps\u00a0\u2014\u00a0get longitude data from Google Maps<\/li>\n<li>Title\u00a0\u2014\u00a0appears when the map pins are <em>hovered by mouse<\/em><\/li>\n<li>Description\u00a0\u2014\u00a0appears in a tooltip when the map pins are clicked<\/li>\n<\/ul>\n<\/li>\n<li><strong>Map height\u00a0<\/strong>\u2014\u00a0measured in <em>pixels<\/em><\/li>\n<li><strong>Map zoom<\/strong>\u00a0\u2014\u00a0set up a zoom level for the map, from 0 (whole world) to 20\u00a0(individual buildings).<\/li>\n<li><strong>Parallax effect<\/strong>\u00a0\u2014 smooth scrolling effect\u00a0applied to\u00a0the map<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014\u00a0in case there is a need\u00a0to add more style rules<\/li>\n<\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"progress-bar\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/progress-bar\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Progress Bar<\/span><\/a><\/p><\/div>\n<p>Progress Bar\u00a0is a graphical control element used to visualize the evolution of a fact or operation, such as creative skill or learning progression. The Progress Bar has the following options:<\/p>\n<ul>\n<li><strong>Title\u00a0<\/strong>\u2014 title label for progress-bar\u00a0heading section<\/li>\n<li><strong>Progress<\/strong>\u00a0\u2014\u00a0enter a value the progress reaches from the total of 100% (which is maximum)<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014\u00a0in case there is a need\u00a0to add more style rules<\/li>\n<\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"quote\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/quotes\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Quote<\/span><\/a><\/p><\/div>\n<p>Quote is a shortcode that let you add a nice formatted blockquote with author and author link. It is an enhanced alternative to WordPress default quote. The Quote has the following options:<\/p>\n<ul>\n<li><strong>Text size<\/strong>\u2014 choose from one of the\u00a0predefined font sizes for\u00a0quote text<\/li>\n<li><strong>Author\u00a0<\/strong>\u2014\u00a0enter the author of quote<\/li>\n<li><strong>Author link<\/strong> \u2014 enter the URL for author quote<\/li>\n<li><strong>New tab\u00a0<\/strong>\u2014 if enabled, the button link &#8211; when clicked &#8211; opens in a new tab of browser window<\/li>\n<li><strong>Text alignment\u00a0<\/strong>\u2014\u00a0choose from left, center or right alignmnet of whole content of quote (comma, quote text and author)<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014\u00a0in case there is a need\u00a0to add more style rules<\/li>\n<\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"separator\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/separators\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Separator<\/span><\/a><\/p><\/div>\n<p>Separator, as the name says,\u00a0add a graphic element to separate different types of content. The Separator has the following options:<\/p>\n<ul>\n<li><strong>Type<\/strong>\u00a0\u2014\u00a0the way seprators are showcased (<em>Up<\/em> or <em>Down<\/em>)<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014\u00a0in case there is a need\u00a0to add more style rules<\/li>\n<\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"team-member\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/team-members\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Team Member<\/span><\/a><\/p><\/div>\n<p>Team Member\u00a0helps you to add a team member information in a structured way. You simply add the Name, Title, Description, an image and an optional image link, and you are good to go.<\/p>\n<p>If you or your team members are socially engaged (who is not these days) you can also add the links to the main social networks: Facebook, LinkedIn, Twitter and Pinterest.<\/p>\n<p>The Team Member has the following options:<\/p>\n<ul>\n<li><strong>Name\u00a0<\/strong>\u2014\u00a0name of\u00a0Team Member<\/li>\n<li><strong>Title\u00a0<\/strong>\u2014\u00a0title or positioned of Team Member inside company<\/li>\n<li><strong>Description\u00a0<\/strong>\u2014\u00a0little information about Team Member<\/li>\n<li><strong>Image\u00a0<\/strong>\u2014\u00a0choose an image for Team Member<\/li>\n<li><strong>Image link\u00a0<\/strong>\u2014 eventually,\u00a0link the image<\/li>\n<li><strong>New tab\u00a0<\/strong>\u2014 if enabled, the button link &#8211; when clicked &#8211; opens in a new tab of browser window<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014\u00a0in case there is a need\u00a0to add more style rules<\/li>\n<li><strong>Social Links <\/strong>(<em>Facebook, LinkedIn, Twitter<\/em> and <em>Pinterest<\/em>)<\/li>\n<\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>The Shortcode Basic Items are conceived to stand as independent design elements or to enhance the existing page content or to be a part of other\u00a0shortcodes, like\u00a0Custom Font, Accordion,\u00a0Row.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1399,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1410","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/comments?post=1410"}],"version-history":[{"count":4,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1410\/revisions"}],"predecessor-version":[{"id":3447,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1410\/revisions\/3447"}],"up":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1399"}],"wp:attachment":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=1410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}