The layout uses the CSS Grid Module Layout to create a main section and a split sidebar. Using named areas, the navigation can move to above the main section and the ad block below it when viewed on mobile devices.
The optional link tabs in the main and sidebar sections can open internal or external pages with a new window option and can be aligned left, center or right.
The main section has an optional image with alt text, a heading, text and an optional CTA Style link. The link tabs in this section and the sidebar can open internal or external pages with a new window option and can be aligned left, center or right.
Sidebar
The sidebar has a vertical navigation and an "Ad" block which has an optional image, a heading, a span for price/date info, text and an optional link.
Links
The navigation is created using the EverWeb Widget API Assets List so it can have up to 48 links which can be configured to open internal or external pages by using a relative or absoute file path. Any link can be configured to open in a new window.
Grid
The grid items can have a border with border radius if required and are separated on the X axis using the value for "grid gap"
Note that the main article has a responsive width and the sidebar a fixed width when viewed on wider screens. The sidebar width is adjustable to suit the type of content.
Wrapper
The wrapper is 100% wide and has controls for its own background color and opacity and the vertical spacing from the items above and below.
Note that wrappers are used on most responsive widgets in case they need to scroll up over a fixed item such as a hero image or slider.
Vertical Align
The method of vertically aligning the two blocks in the sidebar may be unfamiliar. Experimenting with various values for each will soon make it clear as to how they effect the layout.