Blocks
Image Inset Block
This block displays an inset image on one side, and an overlapping content object with a Title and Nested content area on the other. In mobile mode the margins switch to keep an overlap in a mobile-friendly way.
Settings Overview
- Image Settings
- Image : Choose an image from your Media Library. [tutorial]
- Image Alignment : Display the image on the left or right side of the Content Wrapper.
- Image Width by % Percentage : Set the with of the image as a percentage % of the available area. This determines the mid-point where the image and Content Wrapper meet. In mobile mode this setting is ignored and the two objects become wider to fill the space while maintaining an inset overlap.
- Horizontal Inset : Distance in pixels to inset (overlap) the Content Wrapper over the image at the mid-point. In mobile mode this becomes the left margin for the Content Wrapper and the right margin for the image.
- Vertical Inset : Distance in pixels to inset the Content Wrapper from the top and bottom of the image.
- Border : Border color, style and corner rounding options to frame the image object. [tutorial]
- Box Shadow : Shadow color and options applied to the iamge object can create a hover or inset effect. [tutorial]
- Styled Nodes : Object nodes within the block DOM with styling settings. [tutorial]
- root object : Block Settings panel
- media object : Image Settings panel
- content wrapper : Content Wrapper panel
- title : Title panel
- subtitle : Subtitle panel
- content : Nested Content panel
- root object : Block Settings panel
Object Map (DOM)
- root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire block.
- internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are the block’s children.
- image object (div) targeted node from Image Settings panel : This is an empty object node to which we apply styles and a background image that crops vertically in response to the viewport and content object size.
- content wrapper (div) targeted node from Content Wrapper panel : This node contains the block title, subtitle and content area so it can be set side-by-side with the media object. Styles applied to this node will be inherited by all children, including nested children and will override the same style applied to the block at root level.
- title (div) targeted node from Title panel : Single text field, text is edited in the block not in the panel. Styles targeting this node only apply to the title, and will override the same style applied to the block and/or content wrapper.
- subtitle (div) targeted node from Subtitle panel : same as title
- content (div) targeted node from Nested Content panel : This node is where you may enter basic text as paragraph blocks (just type) or insert other blocks. Styles applied to this node are inherited by it’s children and it follow suit with previously explained cascading.
- wp nested wrapper (div) untargeted node : This node is generated by Gutenberg around nested content, we sometimes use it when layout rules need to be applied. Follow suit with the internal wrapper.
- nested blocks (?) untargeted nodes : Anything put into the nested content area. Each block may have it’s own style rules, some core blocks do. Styles applied to a child “should” be able to override the same style cascaded to it from above. I use the word “should” because we only have control over our own blocks and how styles are applied to them, core and outsider blocks have their own methods.
- wp nested wrapper (div) untargeted node : This node is generated by Gutenberg around nested content, we sometimes use it when layout rules need to be applied. Follow suit with the internal wrapper.
- internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are the block’s children.
Each of these examples (incuding images and graphics) is available from our API as a Block-Set download, we will show you how to recreate them yourself.
Example 1 – Video Object
- Insert an Image Inset block into your page/post.
- Choose an image from the Media Library. [tutorial]
- Insert a DOM Media block into the nested content area.
- Open the Media Settings panel of the DOM Media block and enter a Youtube video URL.
- Open the Content Wrapper panel.
- The content wrapper has a 30px padding, white background and black box shadow by default. We only make one adjustment to suit this demo.
- Set the Padding to 0px. [tutorial] This eliminates the extra space while keeping the shadow around the video.
Example 2 – Action Block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus. Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum. Quisque sed sapien non leo euismod semper vitae sed enim. Quisque commodo, risus ac accumsan viverra, justo ex ultrices augue, ut semper nulla erat vitae metus. Vivamus vehicula lacus a ullamcorper consectetur. Vivamus vel vulputate urna, consectetur ultricies justo. Quisque cursus pharetra vulputate.
- Insert an Image Inset block into your page/post.
- Choose an image from the Media Library. [tutorial]
- Open the Image Settings panel.
- Choose a dark Box Shadow Color. [tutorial] In this example we chose black because it will work as a shadow against any image.
- Turn on the Inset Shadow to create the illusiont that the image is inset into the page.
- You may tinker with the shadow options to create interesting inset and lighting effects. Inset shadows in light colors against an image with a thick border can appear to have a frame with lighting.
- Open the Content Wrapper panel.
- The content wrapper has a 30px padding, white background and black box shadow by default. We only make one adjustment to suit this demo.
- Choose a new Box Shadow Color. [tutorial]
- In this example we link the content shadow color to the Accelerate theme’s “Base Color – Medium” setting in the Theme Color Palette. [tutorial]
- Open the Title Panel.
- Set the Font Size to 40px.
- Set the Font Weight as “Inherit” to de-bold and inherit the font weight from the theme and/or other stylesheets.
- You can enter any text you wish into the content. We will be styling the title and subtitle so they require some text for this example.
- In the block editor, click in the Title field and enter some text. The click in the Subtitle field and enter some more text.
- Below these fields is the nested content area. By default the text you type here becomes a WP core paragraph block just like in the base editor. When you press Enter it will create a new line as a new paragraph block. You may insert any blocks you like into this nested area (like the base), and they will be treated as a child objects of this Nested Content object.
- Insert a DOM Button block into the nested content area below your text.
- Open the Button Options panel of the DOM Button block and enter a Link or PopUp ID. [tutorial]
- In this example we enter “MORE ABOUT US” into the button text in the block editor.
That’s it, you have just recreated this example. You have the tools to create HTML and CSS without knowing anything about HTML or CSS.
Before moving on to the next example, we suggest you try out the toolbar buttons for Block Layout, Object Align and V-Align using the example you have just created. You can preview how it will look across various viewport widths by resizing your browser window while viewing the page from the front end.
Comments are closed.