Formatting and Image in Text Model Post

Clone this post and use it as your base if you need access to any of the formatting the TEXT EDITOR widget offers. Please only use a cloned version of this post so that we may retain the basic instructions held in this original.

If you have not already done so, you should first update the post title, tags, and categories for your new post. These are all updated via the WordPress dashboard, not Elementor.

While in the dashboard, update the current post title (Formatting and Image in Text Model Post), found in the main editing area, with the intended title for your post.

Categories and tags are updated via the scrolling section of settings found to the right of the dashboard interface. To aid in finding this post, multiple possible categories are currently applied. You should remove any categories or tags which do not apply to the post you are composing.

To return to the dashboard from this Elementor interface, click the icon in the upper left corner on the left side (three lines, sometimes also called a “hamburger menu”). “Exit to Dashboard” is at the bottom of the available options. When you have updated all the aspects of the post which are controlled there, just click “Edit with Elementor” on the post to update the rest.

The base template our website uses does not support some of the basic WordPress formatting options without adding custom CSS. We have added supporting CSS to this post which allows for the bold and italic text features to display as expected (the underline function should be available even with the base text editor widget). Additional CSS now allows for a default bulleted and numbered list format as controlled through the widget’s tools.

Finally, we’ve added CSS for the case where we want images to be part of the text block (‘wrapping text’). In the case where images take up a full column / do not need to share horizontal space with text, you can just use the basic IMAGE widget provided by Elementor. For this reason, no extra CSS has been introduced for the “center” alignment.

To change the image, adjust its size, or change its alignment (so that it appears to the left or the right of the text), use the default media controls in this widget: click on the image inside the “Edit Text Editor” content box, then click the icon corresponding to the alignment your prefer and / or click pencil icon which indicates “edit.”

To add an image to a later part of the text block, align your cursor with the top line of the text you want the image’s top to conform with, then use the “Add Media” button above to choose or upload your image.

To adjust the margin (white space around the image) you will need to update the actual CSS as follows:

• Click the “Advanced” tab in the “Edit Text Editor” interface (gear icon).
• Scroll down to the “Custom CSS” section and click the arrow to expand.
• Update the values for the img tag (the text between the curly brackets {} following “img” in the block).

If the current white space around your image is insufficient for your needs, change the pixel value (numeral which precedes “px”) for the element that aligns with the margin you wish to adjust. The post currently has margin-right, margin-left, and margin-top values. You can also add margin-bottom if needed (or remove one of the others). Remember to add a semi-colon (;) to separate each parameter.