{"id":1407,"date":"2017-05-02T12:47:40","date_gmt":"2017-05-02T12:47:40","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=1407"},"modified":"2018-05-28T07:34:38","modified_gmt":"2018-05-28T07:34:38","slug":"media-elements","status":"publish","type":"page","link":"https:\/\/nels.pikarthouse.com\/documentation\/shortcodes\/media-elements\/","title":{"rendered":"Media elements"},"content":{"rendered":"<p>The <strong><em>Shortcode Media Elements<\/em><\/strong>\u00a0are conceived to showcase your portfolio or other interactive items, like images or videos, in so many creative manners.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--\" style=\"border-left-width: 36px;\"><p>They stand as independent design elements,\u00a0enhancing the existing page content, but they could be\u00a0a part of other shortcodes, like\u00a0Columns\u00a0or\u00a0Row.<\/p>\n<p>As <strong><em>Shortcode Basic Items<\/em><\/strong>, this type of shortcodes\u00a0have the specific feature for allowing <strong>no content<\/strong> to be embellished inside them.\u00a0There are two shortcodes of this type:\u00a0<em><strong>Album<\/strong>\u00a0<\/em>and <em><strong>Projects<\/strong><\/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\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\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\t style=\"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--24\" 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=\"#album\">Album<\/a><br \/>\n<a href=\"#projects\">Projects<\/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-image: linear-gradient(to top, #4b917d 35%, rgba(0, 0, 0, 0) 35%);  color: #ffffff;  background-color: #4b917d; 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 offered by your Theme.<\/p><\/div>\n<p>Even if at first sight, these two shortcodes are similar in the matter of options and display, there are couple of important features that differentiate them. By knowing the distinctions between them, you will know better how and in which specific situations you need to use each of them.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -3px;\" ><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #e1e1e1;\"><p style=\"text-align: center;\">Album<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li>it extends the functionality of Album Post Type<\/li>\n<li>it creates <strong>custom entry points to any type of site content<\/strong>: Post, simple Page, Product, even a Project. You can also avoid linking Album Items at all (in case you just want to create a custom gallery)<\/li>\n<li>the Album Item could be either <strong>image or video<\/strong><\/li>\n<li>Album Item could stand as gallery item, without linking the item itself to a specific content<\/li>\n<li>you can visit the Album Item content <strong>just via a Button, not by clicking on image<\/strong><\/li>\n<li>it can display a list of\u00a0heterogeneous elements (Post, Page, Project, Product) in the same instance. The list is showcased as Masonry, Slider or Carousel<\/li>\n<\/ul><\/div><\/div><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #e1e1e1;\"><p style=\"text-align: center;\">Projects<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li>it extends the functionality of Projects Post Type<\/li>\n<li>it designates <strong>entry points just to Single Project page<\/strong>, where the project is described in more details. This is the only type of content you could link your Project Item to.<\/li>\n<li>Project Item is represented <strong>just by the featured image<\/strong><\/li>\n<li>Project Item always links to one type of site content\u00a0\u2014 a Single Project page<\/li>\n<li>you can visit the Project Item content<strong> just by clicking on the image<\/strong><\/li>\n<li>it can display just a list of\u00a0Projects in the same instance.\u00a0The list is showcased as Masonry, Slider or Carousel<\/li>\n<\/ul><\/div><\/div><\/div>\n\n<div id=\"album\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\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\t style=\"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--24\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><span style=\"color: #4b917d;\">Album<\/span><\/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><strong>Album<\/strong> is a powerful and flexible shortcode that allows you to\u00a0showcase creatively the content. It consists of two parts:<\/p>\n<ul>\n<li><strong>information data<\/strong> \u2014 it\u00a0is connected with\u00a0Album Post Type, where Album Shortcode\u00a0takes data from, like\u00a0Title, Subtitle, Description or Button label and link<\/li>\n<li><strong>display data<\/strong> \u2014 it\u00a0is composed of own options that allows to choose what type of content to\u00a0show and how to display it<\/li>\n<\/ul>\n\n<div id=\"data-structure\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\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\t style=\"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<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4040 size-full\" src=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/05\/Album_3d.jpg\" alt=\"\" width=\"800\" height=\"600\" srcset=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/05\/Album_3d.jpg 800w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/05\/Album_3d-300x225.jpg 300w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/05\/Album_3d-768x576.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/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<p>The Album\u00a0options are classified in two main groups:<\/p>\n<ul>\n<li><strong>General Properties<\/strong><em>\u00a0\u2014 <\/em>common for almost all types of Albums<\/li>\n<li><strong>Display\u00a0Typologies<\/strong><em> \u2014 <\/em>depending on Album type, these options are different<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--18\" 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>Album Categories<\/strong>\u00a0\u2014\u00a0filter items by categories; leave empty to select all items<\/li>\n<li><strong>Items\u00a0<\/strong>\u2014\u00a0you can choose specific items to display, by entering their ID&#8217;s, separated by comma. The ID could be taken from Album Item URL<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3408\" src=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/id_album.jpg\" alt=\"\" width=\"501\" height=\"237\" srcset=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/id_album.jpg 773w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/id_album-300x142.jpg 300w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/id_album-768x364.jpg 768w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/p>\n<ul>\n<li><strong>Order by<\/strong>\u00a0\u2014\u00a0items can be organized by\u00a0<em>Date<\/em>, <em>Title<\/em>, <em>Author<\/em>, <em>ID<\/em>, <em>Last modified date<\/em> and <em>Parent ID<\/em><\/li>\n<li><strong>Order\u00a0<\/strong>\u2014\u00a0choose between <em>Ascending<\/em> and <em>Descending<\/em> order<\/li>\n<li><strong>Number of items<\/strong>\u00a0\u2014\u00a0enter the number of items to display<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014 if it&#8217;s necessary\u00a0to add more style rules<\/li>\n<\/ul>\n\n<div id=\"display-typologies\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\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\t style=\"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--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Display Typologies<\/p><\/div>\n<p>There are three\u00a0ways the Album will showcase on a site page, depending on your needs:<\/p>\n<ul>\n<li><strong>Masonry<\/strong> \u2014\u00a0a grid with multiple columns<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2831\" src=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/Display_mason.png\" alt=\"\" width=\"400\" height=\"399\" srcset=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/Display_mason.png 604w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/Display_mason-150x150.png 150w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/Display_mason-300x300.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<ul>\n<li><strong>Carousel\u00a0<\/strong>\u2014 is able to showcase more than one items (image or video) at one\u00a0time. Read more about <a href=\"https:\/\/nels.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#carousels\" target=\"_blank\" rel=\"noopener\"><em>carousels<\/em><\/a>.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2833\" src=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/Display_carousel.png\" alt=\"\" width=\"399\" height=\"97\" srcset=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/Display_carousel.png 604w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/Display_carousel-300x73.png 300w\" sizes=\"auto, (max-width: 399px) 100vw, 399px\" \/><\/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<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Common Options<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Display<\/strong>\u00a0\u2014\u00a0the way items are displayed:\u00a0<em>Default, Fade, Pinned, Plain.<\/em><\/li>\n<li><strong>Columns<\/strong>\u00a0\u2014\u00a0how many\u00a0items columns are displayed (1, 2, 3, 4 or 6)<\/li>\n<li><strong>Columns spacing<\/strong> \u2014\u00a0spacing between columns (pixels)<\/li>\n<li><strong>Overlay color\u00a0<\/strong>\u2014\u00a0color layer that covers the item when possible (exceptions: Fade, Pinned cards)<\/li>\n<li><strong>Overlay color transparency<\/strong> \u2014\u00a0color layer transparency (100% means the color is transparent)<\/li>\n<li><strong>Text Color Skin\u00a0\u2014 <\/strong>choose between light and dark skin<\/li>\n<li><strong>Animation<\/strong>\u00a0\u2014\u00a0the way items appear on page while scrolling<\/li>\n<\/ul><\/div>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -3px;\" ><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Masonry<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Categories filter<\/strong>\u00a0\u2014\u00a0positioned inside <em>General Properties<\/em> panel because of technical reasons, it helps to sort items based on categories: <em>Main Categories<\/em> shows just the categories without its child-categories, if comparing to <em>All Categories<\/em><\/li>\n<li><strong>Filter position<\/strong>\u00a0\u2014 choose between left, center or right<\/li>\n<li><strong>Animation effect<\/strong>\u00a0\u2014 per unit or per whole content block<\/li>\n<li><strong>Progress delay<\/strong>\u00a0\u2014 set animation delay effect (seconds)<\/li>\n<\/ul><\/div><\/div><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Carousel<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Autoplay Checkbox<\/strong><\/li>\n<li><strong>Autoplay Speed<\/strong><\/li>\n<\/ul><\/div><\/div><\/div>\n\n<div id=\"projects\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\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\t style=\"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--24\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><span style=\"color: #4b917d;\">Projects<\/span><\/p><\/div>\n<p><strong>Projects\u00a0<\/strong>represent\u00a0a powerful and flexible shortcode that allows you to\u00a0showcase creatively the content, initialized before in Projects section. It consists of two parts <em>(as general principle, it is quite similar to <a href=\"#data-structure\">Album\u00a0structure<\/a>):<\/em><\/p>\n<ul>\n<li><strong>information data<\/strong> \u2014 it\u00a0is connected with Projects Post Type, where Projects Shortcode\u00a0takes data from, like\u00a0Title and Subtitle (represented by Taxonomies and Comments number)<\/li>\n<li><strong>display data<\/strong> \u2014 it\u00a0is composed of own options that allows to choose what type of content to\u00a0show and how to display it<\/li>\n<\/ul>\n<p>The Projects options are classified in two main groups:<\/p>\n<ul>\n<li><strong>General Properties<\/strong><em>\u00a0\u2014 <\/em>common for almost all types of\u00a0Projects<\/li>\n<li><strong>Display\u00a0Typologies<\/strong><em> \u2014 <\/em>depending on Projects type, these options are different<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--18\" 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>Projects Categories<\/strong>\u00a0\u2014\u00a0filter projects by categories; leave empty to select all projects<\/li>\n<li><strong>Projects Tags\u00a0<\/strong>\u2014\u00a0filter projects by tags<\/li>\n<li><b>Projects\u00a0<\/b>\u2014\u00a0you can choose specific projects to display, by entering their ID&#8217;s, separated by comma. The ID could be taken from Project\u00a0URL<\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3409\" src=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/id_projects.jpg\" alt=\"\" width=\"499\" height=\"238\" srcset=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/id_projects.jpg 768w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/05\/id_projects-300x143.jpg 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/p>\n<ul>\n<li><strong>Order by<\/strong>\u00a0\u2014 projects can be organized by\u00a0<em>Date<\/em>, <em>Title<\/em>, <em>Author<\/em>, <em>ID<\/em>, <em>Last modified date<\/em> and <em>Parent ID<\/em><\/li>\n<li><strong>Order\u00a0<\/strong>\u2014\u00a0choose between <em>Ascending<\/em> and <em>Descending<\/em> order<\/li>\n<li><strong>Number of items<\/strong>\u00a0\u2014\u00a0enter the number if projects to display<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014 in case there is a need\u00a0to add more style rules<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Display Typologies<\/p><\/div>\n<p>There are three\u00a0ways the Projects will showcase on a site page, depending on your needs <em>(for more visual details, please <a href=\"#display-typologies\">see<\/a>)<\/em>:<\/p>\n<ul>\n<li><strong>Masonry<\/strong> \u2014\u00a0a grid with multiple columns<\/li>\n<li><strong>Carousel\u00a0<\/strong>\u2014 similar to slider, but carousel is able to showcase more than one items at one time.\u00a0Read more about <a href=\"https:\/\/nels.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#carousels\" target=\"_blank\" rel=\"noopener\"><em>carousels<\/em><\/a>.<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Common Options<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Display<\/strong>\u00a0\u2014\u00a0the way projects are displayed:\u00a0<em>Default, Fade, Pinned<\/em><em>, Plain.<\/em><\/li>\n<li><strong>Columns<\/strong>\u00a0\u2014\u00a0how many projects columns are displayed (1, 2, 3, 4 or 6)<\/li>\n<li><strong>Columns spacing<\/strong> \u2014\u00a0spacing between columns (pixels)<\/li>\n<li><strong>Overlay color\u00a0<\/strong>\u2014\u00a0color layer that covers the\u00a0project when possible (exceptions: Default, Plain cards)<\/li>\n<li><strong>Overlay color transparency<\/strong> \u2014\u00a0color layer transparency (100% means the color is transparent)<\/li>\n<li><strong>Text Color Skin\u00a0\u2014 <\/strong>choose between light and dark skin<\/li>\n<li><strong>Animation<\/strong>\u00a0\u2014\u00a0the way items appear on page while scrolling<\/li>\n<\/ul><\/div>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -3px;\" ><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Masonry<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Categories filter<\/strong>\u00a0\u2014\u00a0positioned inside <em>General Properties<\/em> panel because of technical reasons, it helps to sort projects based on categories: <em>Main Categories<\/em> shows just the categories without its child-categories, if comparing to <em>All Categories<\/em><\/li>\n<li><strong>Filter position<\/strong>\u00a0\u2014 choose between left, center or right<\/li>\n<li><strong>Animation effect<\/strong>\u00a0\u2014 per unit or per whole content block<\/li>\n<li><strong>Progress delay<\/strong>\u00a0\u2014 set animation delay effect (seconds)<\/li>\n<\/ul><\/div><\/div><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Carousel<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Autoplay Checkbox<\/strong><\/li>\n<li><strong>Autoplay Speed<\/strong><\/li>\n<\/ul><\/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 Media Elements\u00a0are conceived to showcase your portfolio or other interactive items, like images or videos, in so many creative manners. Even if at first sight, these two shortcodes are similar in the matter of options and display, there are couple of important features that differentiate them. By knowing the distinctions between them, you [&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-1407","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/comments?post=1407"}],"version-history":[{"count":20,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1407\/revisions"}],"predecessor-version":[{"id":3929,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1407\/revisions\/3929"}],"up":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1399"}],"wp:attachment":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}