{"id":1303701,"date":"2019-09-09T22:29:38","date_gmt":"2019-09-09T22:29:38","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&#038;p=1303701"},"modified":"2021-03-29T15:05:11","modified_gmt":"2021-03-29T15:05:11","slug":"container-blocks","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/container-blocks\/","title":{"rendered":"Advanced Styling with Container Blocks"},"content":{"rendered":"\n<p>You can use&nbsp;<strong>Container Blocks<\/strong>&nbsp;to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Add custom IDs and classes to allow styling with CSS<\/li><li>Apply styling, such as margins and paddings<\/li><li>Set a background (solid, image, gradient)<\/li><li>Control font options<\/li><li>Define the HTML tag for the container<\/li><\/ul>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"tb-youtube\" data-toolset-blocks-youtube=\"2b3709bdb19d0845b4f7ef50ab18244f\"><div><iframe data-src=\"https:\/\/www.youtube.com\/embed\/IghBZhd4p_Y?rel=0&#038;toolset=1\" frameBorder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to work with Container blocks<\/h2>\n\n\n\n<p>Add a&nbsp;<strong>Container<\/strong>&nbsp;block and then add other blocks inside it. These can be new blocks, existing blocks or even other container blocks for nested styling. You can change different style settings for any Container block. All blocks within that&nbsp;<strong>Container<\/strong>&nbsp;will then use those styles for their content. Keep in mind that if your theme has an explicit style for an element, it will overwrite the style set in the Container settings. To overwrite such theme styles you have to apply the change directly to the block that you\u2019re styling (like a Heading block).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding new blocks to a container<\/h3>\n\n\n\n<p>To add a new block inside an existing Container block, click the&nbsp;<strong>Add block<\/strong>&nbsp;button. When adding the first block into the Container the&nbsp;<strong>Add block<\/strong>&nbsp;button is on the right side of the Container.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"1d374250a6828dc5abdbf76d86388214\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-1-500x298.png\" alt=\"Adding a block inside a Container block\" class=\"wp-image-1335301\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Adding a block inside a Container block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>When there are already other blocks in a Container, the&nbsp;<strong>Add block<\/strong>&nbsp;button is at the top of a Container. Click on it to add more blocks.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"2e7580e76b3270dd095d19d954107f45\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-2.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-2-500x239.png\" alt=\"Adding a block to a Container that already has some content\" class=\"wp-image-1335313\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Adding a block to a Container that already has some content<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Dragging existing blocks into a container<\/h3>\n\n\n\n<p>You can drag-and-drop any existing block into a Container block. You can rearrange the order of blocks inside a Container in the same way. When you drag blocks, a blue line indicates the place where you are about to drop it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"96eb424471e23e440ba1976468352deb\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-3.png\"><img decoding=\"async\" width=\"1483\" height=\"897\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-3.png\" alt=\"Dragging an existing block into a Container\" class=\"wp-image-1335323\" srcset=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-3.png 1483w, https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-3-150x91.png 150w, https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-3-300x181.png 300w, https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-3-768x465.png 768w, https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-3-1024x619.png 1024w, https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-3-805x487.png 805w\" sizes=\"auto, (max-width: 1483px) 100vw, 1483px\" \/><\/a><div class=\"tb-image-caption\"><figcaption>Dragging an existing block into a Container<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Placing one Container block within another<\/h2>\n\n\n\n<p>You can place Container blocks within other Container blocks. This allows you to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Have complete control over the styling of nested elements<\/li><li>Adjust styling for multiple blocks inside one Container<\/li><li>Move whole groups of blocks at once<\/li><\/ul>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Let\u2019s take another look at our recipe example. This time, with each Container feature marked.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"4328892fd9afe3c7eb03f652f88c299d\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-4.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/09\/toolset-container-block-4-500x410.png\" alt=\"Recipe page using nested Container blocks to achieve custom styling and layout\" class=\"wp-image-1335343\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Recipe page using nested Container blocks to achieve custom styling and layout<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Reusing a Container block in multiple designs<\/h2>\n\n\n\n<p>WordPress allows you to reuse blocks on as many pages as needed. This allows you to avoid setting up the same blocks over and over again.<\/p>\n\n\n\n<p>You can also make Toolset Container blocks to be reusable. This can save you a lot of time because Container blocks can feature a number of other blocks and specific styling.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"46329a8e1dde7e2d29f1894ff103412a\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/10\/toolset-blocks-container-reusable-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/10\/toolset-blocks-container-reusable-1-500x418.png\" alt=\"An example of a Container block you could reuse in other designs\" class=\"wp-image-1369857\"\/><\/a><div class=\"tb-image-caption\"><figcaption>An example of a Container block you could reuse in other designs<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>To make a Container block reusable, first select it, then click the three dots icon for more block options. In the dropdown that appears, click the&nbsp;<strong>Add to Reusable Blocks<\/strong>&nbsp;option and give a name to your reusable block.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"9d528347fab85520db33d0c4be968f86\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/10\/toolset-blocks-container-reusable-action-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/10\/toolset-blocks-container-reusable-action-1-393x638.png\" alt=\"Making the Container block reusable\" class=\"wp-image-1369881\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Making the Container block reusable<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>You can now insert this reusable Container block in any design you create. Click to insert a new block and in the&nbsp;<strong>Reusable<\/strong>&nbsp;section click the one you want to insert.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"293751aa4c4bdabf1e98f85fc99ad329\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/10\/toolset-blocks-container-reusable-inserting.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/10\/toolset-blocks-container-reusable-inserting-500x497.png\" alt=\"Inserting a reusable Container block into another View\" class=\"wp-image-1369891\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Inserting a reusable Container block into another View<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Turn a whole Container into a link<\/h2>\n\n\n\n<p>When needed, you can turn the whole Container block&#8217;s area into a link. This is often handy when you use containers to build a grid of posts, sliders or hero sections.<\/p>\n\n\n\n<p>In the right sidebar, expand the <strong>Container as Link&nbsp;<\/strong>section and activate the option.<\/p>\n\n\n\n<figure class=\"wp-block-image tb-image tb-image-media\" data-toolset-blocks-image=\"53f3f5f9d6d854ceeccc44c672825288\"><img decoding=\"async\" width=\"1904\" height=\"899\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/11\/toolset-blocks-container-as-link.png\" alt=\"Turning a whole Container block into a link\" class=\"wp-image-1846909\" srcset=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/11\/toolset-blocks-container-as-link.png 1904w, https:\/\/toolset.com\/wp-content\/uploads\/2020\/11\/toolset-blocks-container-as-link-300x142.png 300w, https:\/\/toolset.com\/wp-content\/uploads\/2020\/11\/toolset-blocks-container-as-link-1024x483.png 1024w, https:\/\/toolset.com\/wp-content\/uploads\/2020\/11\/toolset-blocks-container-as-link-150x71.png 150w, https:\/\/toolset.com\/wp-content\/uploads\/2020\/11\/toolset-blocks-container-as-link-768x363.png 768w, https:\/\/toolset.com\/wp-content\/uploads\/2020\/11\/toolset-blocks-container-as-link-1536x725.png 1536w, https:\/\/toolset.com\/wp-content\/uploads\/2020\/11\/toolset-blocks-container-as-link-805x380.png 805w\" sizes=\"auto, (max-width: 1904px) 100vw, 1904px\" \/><\/figure>\n\n\n\n<p>You can type in the URL manually or use a dynamic URL coming from a standard or custom post field.<\/p>\n\n\n\n<p><strong>Important:<\/strong> don&#8217;t have any links inside the container that is a link itself. This will break the container output because links within links are not allowed in HTML.<\/p>\n","protected":false},"author":4341,"featured_media":1666161,"template":"","related-lesson":[8417],"class_list":["post-1303701","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-designing"],"_links":{"self":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1303701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":8,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1303701\/revisions"}],"predecessor-version":[{"id":2004331,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1303701\/revisions\/2004331"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media\/1666161"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media?parent=1303701"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/related-lesson?post=1303701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}