{"id":1413,"date":"2017-05-02T12:44:50","date_gmt":"2017-05-02T12:44:50","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=1413"},"modified":"2017-11-26T14:24:37","modified_gmt":"2017-11-26T14:24:37","slug":"layout-tools","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/shortcodes\/layout-tools\/","title":{"rendered":"Layout tools"},"content":{"rendered":"<p>The <strong><em>Shortcode Layout Tools<\/em><\/strong>\u00a0were designed to help you to achieve exquisite and unique layouts in so\u00a0easy ways. There are two layout shortcodes: <strong><em>Columns\u00a0<\/em><\/strong>and\u00a0<strong><em>Row<\/em><\/strong>.<\/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 <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>Put the content you need where <em>&#8220;Content goes here&#8221; <\/em>text appears and your are almost done.<\/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=\"#columns\">Columns<\/a><br \/>\n<a href=\"#row\">Row<\/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<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 The both layout shortcodes \u2014 Columns and Row \u2014 are <strong><em>container elements<\/em><\/strong>. It means they accept any other shortcode to be inserted in.<\/p><\/div>\n<p>A powerful advantage of\u00a0<em>Layout shortcodes<\/em> is that you can insert any type of shortcode inside them and you can\u00a0embellish the content inside them with any tool WordPress Editor offers.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2819\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/WP_editor_tools.png\" alt=\"\" width=\"600\" height=\"202\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/WP_editor_tools.png 1215w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/WP_editor_tools-300x101.png 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/WP_editor_tools-768x259.png 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/WP_editor_tools-1024x345.png 1024w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/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 <em>The layout shortcodes will always take the width of their container elements. In case they are inside other shortcode, they take its width.<\/em><\/p><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2821\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sh_in.png\" alt=\"\" width=\"500\" height=\"478\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sh_in.png 770w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sh_in-300x287.png 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sh_in-768x734.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n\n<div id=\"columns\"\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\/grid-systems\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Columns<\/span><\/a><\/p><\/div>\n<p>Columns represents a Layout shortocode that helps display easily the content, by creating vertical sections. It\u00a0is a <strong><em>container element<\/em><\/strong>\u00a0you can add other elements in, including different types of shortcodes. Columns shortcode has the following options:<\/p>\n<ul>\n<li><strong>Number\u00a0<\/strong>\u2014 number of columns the content layout is divided in: <em>2, 3, 4, 6 or 12 columns<\/em><\/li>\n<li><strong>Size\u00a0<\/strong>\u2014\u00a0size of each column is changeable via a simple and intuitive slider interface.\u00a0Simply choose how many columns you want and then drag the sliders to select the proportions of each column<\/li>\n<li><strong>Spacing\u00a0<\/strong>\u2014\u00a0the space between columns measured <em>in pixels<\/em><\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014 if it&#8217;s necessary\u00a0to add more style rules<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2822\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sh_spacing.png\" alt=\"\" width=\"500\" height=\"497\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sh_spacing.png 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sh_spacing-150x150.png 150w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sh_spacing-300x298.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/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\n\n<div id=\"row\"\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\/row-shortcode\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Row<\/span><\/a><\/p><\/div>\n<p>Row represents a Layout shortocode that helps display easily the content, by creating horizontal sections.\u00a0It\u00a0is a <strong><em>container element<\/em><\/strong>\u00a0you can add other elements in, including different types of shortcodes. Its options are classified in three main groups:<\/p>\n<ul>\n<li><em><strong>General Properties<\/strong>\u00a0\u2014 affect Row shortcode as whole item<\/em><\/li>\n<li><em><strong>Background\u00a0<\/strong><strong>Properties<\/strong><\/em><em>\u00a0\u2014 affect background image and\/or color<\/em><\/li>\n<li><em><strong>Content\u00a0Properties<\/strong><\/em><strong>\u00a0<\/strong><em>\u2014<\/em><strong>\u00a0<\/strong>affect<em>\u00a0any text element, any image or shortcode inserted here<\/em><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2823\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_layout.png\" alt=\"\" width=\"500\" height=\"460\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_layout.png 748w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_layout-300x276.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>General Properties<\/p><\/div>\n<ul>\n<li><strong>Anchor ID<\/strong>\u00a0\u2014\u00a0useful when you want to scroll to Row element by clicking on another link from the same page. For example, if the <em>Anchor ID<\/em> is &#8220;ombra&#8221;, then you could add the following expression &#8220;#ombra&#8221; to any link href, including the URL of Site Header menu items. <strong><em>You could also use it in order to build One Page sites.<\/em><\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2824\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_anchorId.png\" alt=\"\" width=\"350\" height=\"549\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_anchorId.png 439w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_anchorId-191x300.png 191w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/p>\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 Row.<\/li>\n<li><strong>Margins\u00a0<\/strong>\u2014 are used to generate space around Row <strong><em>outside Paddings<\/em>.\u00a0<\/strong>You could also use negative values in order to get the Row out of default\u00a0layout.<\/li>\n<li><strong>Borders\u00a0<\/strong>\u2014 are used to generate boundaries, with different widths, around Row,<strong><em> between Paddings and Margins<\/em><\/strong>.<\/li>\n<li><strong>Borders color\u00a0<\/strong>\u2014\u00a0choose a specific color for borders<\/li>\n<\/ul>\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 40px;\"><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 <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/miscellaneous\/faq\/#insert-margins\" target=\"_blank\" rel=\"noopener\">Find out more<\/a>\u00a0about the way\u00a0Paddings, Margins\u00a0and\u00a0Borders are displayed and how to add their values\u00a0correctly.<\/p><\/div><\/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: 12px -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><\/div><\/div>\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>Position\u00a0<\/strong>\u2014\u00a0useful when you want to position Row element above\u00a0other elements.\u00a0If <em>Enabled<\/em>, the following options are available:\n<ul>\n<li>Z-index<\/li>\n<li>Top<\/li>\n<li>Right<\/li>\n<li>Bottom<\/li>\n<li>Left<\/li>\n<\/ul>\n<\/li>\n<\/ul>\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 40px;\"><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\u00a0If two Rows,\u00a0added one after another in the page and both having the position <em>Enabled<\/em>, the Row introduced last in the page will\u00a0be above, <em>in case they have the same Z-index and intersect each other<\/em>.<\/p><\/div>\n<ul>\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--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: -36px -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. It includes values from <strong>-90<\/strong>\u00a0to<strong> 90.<\/strong><\/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: 24px -36px 0px 0px; background-color: #f1f1f1;\"><p>Feel free to move Row anywhere you want: <strong><em>Top<\/em><\/strong>, <strong><em>Right<\/em><\/strong>, <strong><em>Bottom<\/em><\/strong> or <strong><em>Left<\/em><\/strong> side. You could also use negative values to get the Row out of normal layout. <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/miscellaneous\/faq\/#margins-vs-position\" target=\"_blank\" rel=\"noopener\">Find out more<\/a> about the differences between Margins and Position values and how they act.<\/p><\/div><\/div><\/div>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Background Properties<\/p><\/div>\n<p>Background\u00a0Properties applies just when a\u00a0background image is set up or a background color is chosen. Otherwise, the option like<em>\u00a0Parallax<\/em>,\u00a0will have no effect.<\/p>\n<ul>\n<li><strong>Image\u00a0<\/strong>\u2014\u00a0set up an image as Row\u00a0background<\/li>\n<li><strong>Color<\/strong>\u00a0\u2014 color layer that covers the Row background. If the image is also setup, it\u00a0covers the image. Make the image below visible by adding transparency to color<\/li>\n<li><strong>Color transparency<\/strong>\u00a0\u2014\u00a0background color layer transparency (100% means the color is transparent)<\/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>Height<\/strong>\u00a0\u2014\u00a0choose they way you want to add the Height to Row background\n<ul>\n<li><strong>Auto\u00a0<\/strong>\u2014\u00a0the height of Row background (implicitly\u00a0of Row shortcode) will be given by the height of Row content. If no content\u00a0is added to Row, then <strong><em>the height of Row will be 0<\/em><\/strong>.<\/li>\n<li><strong>Fixed values<\/strong>\u00a0\u2014\u00a0the height of Row background (implicitly\u00a0of Row shortcode) is calculated as <strong><em>percentage from Screen height<\/em><\/strong>. So, <strong><em>One Third<\/em><\/strong> means\u00a0the Row shortcode will have\u00a0a-third-from-screen-height. It admits the following values: <strong><em>One third<\/em><\/strong>, <strong><em>Half<\/em><\/strong>, <strong><em>Two thirds<\/em><\/strong>, <strong><em>Full-height<\/em><\/strong>.<\/li>\n<li><strong>Custom<\/strong>\u00a0\u2014\u00a0you are able to add your own\u00a0height values\u00a0<em>in pixels<\/em>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Parallax<\/strong>\u00a0\u2014 smooth scrolling effect\u00a0applied to\u00a0slider images. It works just when the <em>background image<\/em> is set up<\/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: 12px -36px 0px 0px; background-color: #f1f1f1;\"><p><strong>Fixed values Height<\/strong>\u00a0is useful mainly when you want to <strong><em>preserve the same proportions<\/em><\/strong> of Row shortcode also on other devices, like <em>Tablet<\/em> or <em>Mobile<\/em>.<\/p>\n<p>If comparing to <em>Fixed values<\/em>, <strong>Custom Height<\/strong> will change the proportions of Row shortcode depending on Screen size, while <strong><em>preserving Height<\/em><\/strong>.<\/p><\/div><\/div><\/div>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Content Properties<\/p><\/div>\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>Width<\/strong>\u00a0\u2014 choose they way you want to add the Width to Row content.\n<ul>\n<li><strong>Auto\u00a0<\/strong>\u2014 the width of Row content will fill the Row background as much as possible<\/li>\n<li><strong>Custom<\/strong>\u00a0\u2014\u00a0you are able to add your own width values\u00a0<em>in pixels<\/em>. It is actually\u00a0the <strong><em>maximum width<\/em><\/strong> Row content could take.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Horizontal position\u00a0<\/strong>\u2014\u00a0content could be positioned relative to its background, at the <strong><em>Left<\/em><\/strong>,<strong> <em>Center<\/em><\/strong>\u00a0or <strong><em>Right<\/em>\u00a0<\/strong>side of\u00a0Row<\/li>\n<li><strong>Vertical position<\/strong>\u00a0\u2014 content could be positioned relative to its background, at the <strong><em>Top<\/em><\/strong>, <strong><em>Middle<\/em> <\/strong>or <strong><em>Bottom<\/em> <\/strong>side of\u00a0Row<\/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>If <strong><em>Height is Auto\u00a0<\/em><\/strong>and <strong><em>Parallax is disabled<\/em><\/strong>, then you can\u00a0exceed the Row limits, both width and\u00a0height, by adding negative margins to Row content.<\/p>\n<p>In case <strong><em>Width is Custom<\/em><\/strong>, then try to add a largely enough value to exceed Row width limits.<\/p><\/div><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2825\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_limits.png\" alt=\"\" width=\"500\" height=\"438\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_limits.png 862w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_limits-300x263.png 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Row_sh_limits-768x673.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<ul>\n<li><strong>Color skin<\/strong>\u00a0\u2014 changes the color of text elements in <em>light (white color) <\/em>or\u00a0<em>dark (almost black color). <\/em>It helps\u00a0when trying to make a contrast between\u00a0Row background and Row text content<\/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>Animation\u00a0<\/strong>\u2014\u00a0set an entering animation of the elements inside Row<\/li>\n<li><strong>Animation delay\u00a0<\/strong>\u2014\u00a0set a delay time for animation, in <em>seconds\u00a0\u2014\u00a0<strong>Minimum<\/strong>: 0 seconds, <strong>Maximum<\/strong>: 3 seconds<\/em><\/li>\n<li><strong>Paddings<\/strong>\u00a0\u2014 are used to generate space around Row.<\/li>\n<li><strong>Margins\u00a0<\/strong>\u2014 are used to generate space around Row <strong><em>outside Paddings<\/em><\/strong>.<\/li>\n<li><strong>Borders\u00a0<\/strong>\u2014 are used to generate boundaries, with different widths, around Row,<strong><em> between Paddings and Margins<\/em><\/strong>.<\/li>\n<li><strong>Borders color<\/strong>\u00a0\u2014 choose a specific color for borders<\/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: 12px -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 <strong><em>Row<\/em><\/strong><strong><em>\u00a0content<\/em><\/strong>:\u00a0top, right, bottom or left.\u00a0They are measured in <em>pixels<\/em>.<\/p><\/div><\/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","protected":false},"excerpt":{"rendered":"<p>The Shortcode Layout Tools\u00a0were designed to help you to achieve exquisite and unique layouts in so\u00a0easy ways. There are two layout shortcodes: Columns\u00a0and\u00a0Row. A powerful advantage of\u00a0Layout shortcodes is that you can insert any type of shortcode inside them and you can\u00a0embellish the content inside them with any tool WordPress Editor offers.<\/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-1413","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1413","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=1413"}],"version-history":[{"count":14,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1413\/revisions"}],"predecessor-version":[{"id":3514,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1413\/revisions\/3514"}],"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=1413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}