{"id":1404,"date":"2017-05-02T12:55:54","date_gmt":"2017-05-02T12:55:54","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=1404"},"modified":"2017-10-21T12:41:38","modified_gmt":"2017-10-21T12:41:38","slug":"complex-shortcodes","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/shortcodes\/complex-shortcodes\/","title":{"rendered":"Complex shortcodes"},"content":{"rendered":"<p>The <strong><em>Complex shortcodes<\/em><\/strong>\u00a0were named this way because they could stand both as independent design elements (as <em>Basic Items<\/em> are) and could also be involved in page layouts (as <em>Layout Tools<\/em> do).<\/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>As <strong><em>Layout Tools<\/em><\/strong>, this type of shortcodes\u00a0have the specific feature for allowing <em>any kind of content<\/em> to be added, edited and embellished inside them, <em>by using any tools the WordPress Editor comes with and any Shortcodes Ombra Theme offer<\/em>.<\/p>\n<p>There are three complex\u00a0shortcodes: <em><strong>Accordion<\/strong><\/em>, <strong><em>Custom Font<\/em><em>\u00a0<\/em><\/strong>and\u00a0<strong><em>Tabs<\/em><\/strong>.<\/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=\"#accordion\">Accordion<\/a><br \/>\n<a href=\"#custom-content\">Custom Content<\/a><br \/>\n<a href=\"#tabs\">Tabs<\/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=\"accordion\"\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\/tabs-accordions\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Accordion<\/span><\/a><\/p><\/div>\n<p>Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container. The Accordion has the following options:<\/p>\n<ul>\n<li><strong>Title<\/strong> \u2014\u00a0title label for accordion heading section<\/li>\n<li><strong>Content\u00a0<\/strong>\u2014 text for accordion content\u00a0section<\/li>\n<li><strong>Multi expand<\/strong>\u00a0\u2014\u00a0allows to open more than one accordion at a time. If disabled, just one accordion could be opened at a time<\/li>\n<li><strong>Allow all closed<\/strong>\u00a0\u2014\u00a0allows to close all the accordions. If disabled, there will be at least one accordion opened<\/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=\"custom-content\"\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\/custom-content\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Custom Content<\/span><\/a><\/p><\/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<p>Complex typography actions could be taken due to Custom Content shortcode, especially when you need to use text styling that no one of predefined headings or paragraph styles offer. Custom Content shortcode has the following options:<\/p>\n<ul>\n<li><strong>Font size\u00a0<\/strong>\u2014\u00a0font size <em>in pixels. <\/em>When font-size is set to <em>Inherit<\/em>, then Custom Content Shortcode inherits the font-size of parent containers, like <em>Body Text<\/em> is (which is set up in <em>Theme Options \u2192 Typography<\/em>)<\/li>\n<li><strong>Font weight\u00a0<\/strong>\u2014\u00a0how light or bold the font looks<\/li>\n<li><strong>Letter spacing\u00a0<\/strong>\u2014 the space between letters, measured <em>in pixels<\/em><\/li>\n<li><strong>Line height\u00a0<\/strong>\u2014\u00a0define the amount of space between lines of text<\/li>\n<li><strong>Text decoration\u00a0<\/strong>\u2014\u00a0decorate text with different positioned lines relative to text: <em>underline<\/em>, <em>overline<\/em> and <em>line-through<\/em><\/li>\n<li><strong>Text color\u00a0<\/strong>\u2014 color of\u00a0text<\/li>\n<\/ul>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><ul>\n<li><strong>Paddings\u00a0<\/strong>\u2014 are used to generate space around Custom Font.<\/li>\n<li><strong>Margins\u00a0<\/strong>\u2014 are used to generate space around Custom Font\u00a0<strong><em>outside Paddings<\/em>.\u00a0<\/strong>You could also use negative values in order to get the Row out of default\u00a0layout.<em>\u00a0<\/em><\/li>\n<li><strong>Borders\u00a0<\/strong>\u2014 are used to generate boundaries, with different widths, around Custom Font,<strong><em> between Paddings and Margins<\/em><\/strong>.<\/li>\n<li><strong>Borders color\u00a0<\/strong>\u2014 choose a specific color for borders<\/li>\n<li><strong>Background color\u00a0<\/strong>\u2014 choose a specific color for borders<\/li>\n<li><strong>Position\u00a0<\/strong>\u2014 useful when you want to position Row element above\u00a0other elements.\u00a0If\u00a0<em>Enabled<\/em>, the following options are available:\n<ul>\n<li><strong>Z-index<\/strong><\/li>\n<li><strong>Top<\/strong><\/li>\n<li><strong>Right<\/strong><\/li>\n<li><strong>Bottom<\/strong><\/li>\n<li><strong>Left<\/strong><\/li>\n<\/ul>\n<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014\u00a0if it&#8217;s necessary to add more style rules<\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 36px 36px 6px 36px; margin: 0px -36px 0px 0px; background-color: #f1f1f1;\"><p><strong>Paddings, Margins\u00a0<\/strong>and\u00a0<strong>Borders<\/strong> are used to generate custom spacing on all the sides of\u00a0<strong><em>Row shortcode<\/em><\/strong>:\u00a0top, right, bottom or left.\u00a0They are measured in <em>pixels<\/em>.<\/p><\/div>\n<div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 36px 36px 6px 36px; margin: 48px -36px 0px 0px; background-color: #f1f1f1;\"><p>Z-index helps you to decide which element stands above another. An element with higher Z-index will stay above another one with lower Z-index.\u00a0It includes values from\u00a0<strong>-90<\/strong>\u00a0to<strong>\u00a090.<\/strong><\/p><\/div><\/div><\/div>\n\n<div id=\"tabs\"\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\/tabs-accordions\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Tabs<\/span><\/a><\/p><\/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<p>Tabs are elements that help you organize and navigate multiple elements\u00a0in a single container. They can be used for switching between items in the container. The Tabs has the following options:<\/p>\n<ul>\n<li><strong>Title<\/strong> \u2014\u00a0title label for tab heading section<\/li>\n<li><strong>Content\u00a0<\/strong>\u2014 text for tab content\u00a0section<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014\u00a0in case there is a need\u00a0to add more style rules<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Complex shortcodes\u00a0were named this way because they could stand both as independent design elements (as Basic Items are) and could also be involved in page layouts (as Layout Tools do). Complex typography actions could be taken due to Custom Content shortcode, especially when you need to use text styling that no one of predefined [&hellip;]<\/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-1404","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1404","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=1404"}],"version-history":[{"count":13,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1404\/revisions"}],"predecessor-version":[{"id":3450,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1404\/revisions\/3450"}],"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=1404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}