Image / Content Widget

The following 2 text and image blocks use the Spacific Creative Widget – Image Content.

This allows an image to be positioned left or right.

The left size block can be sized accordingly.

The advantages this has over the Elementor > General > Image Box widget is:

It allows the image to be positions left/right and up/down within the container
it allows the image to be increase in size beyond the size of the container to to focus on the part of the image desired
It allow the background colour of the text area to butt next to the image without space if desired

This is the heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis tortor nec sem tristique, sed fermentum leo volutpat. Suspendisse potenti. Aliquam eu diam ac mauris posuere bibendum. Vivamus nec tincidunt sapien.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis tortor nec sem tristique, sed fermentum leo volutpat. Suspendisse potenti. Aliquam eu diam ac mauris posuere bibendum. Vivamus nec tincidunt sapien.

This is the heading

Below is using the Elementor > General > Image Box Widget which emulates the same output as above. The difference is that the image not a background but <img> tag within the page. This is also not a responsive image in that you can’t alter the output on mobile i.e. it will tile which is ok but that is all

This is the heading

Below uses the Specific Creative > Floating Image & Content Widget.

This differs from the Image Content widget in that is allows the components to be positioned anywhere within the canvas size specified – even outside the canvas area as positioning is absolute and explicitly set

There are 3 components to this Widget

The Image
The Background
The Content (which includes lead in text, heading, description, and link)

This widget can be used to display the output as shown in the xd designs page 53.

The controls are responsive allowing settings per device.

NB: The Hero Image widget would also provide an alternative widget to achieve some of these page 53 outputs

With the Floating Image & Content Widget it is also possible to ignore the background canvas an just use the Image and Content canvas areas. Note: The content area can have it’s own background colour

This is the heading

This is the heading

This is the heading

This is the heading

This is the heading

A Heading Will Probably Need Three Lines

This is the heading

A Heading Will Probably Need Three Lines