我正在为客户制作一个个人网站,我希望它易于编辑。我试图复制客户在以前的纯html个人网站上的数据,它看起来像下图:

我想在这样的框中添加一个并排描述的图像。我尝试从“Ultimate shortcodes”插件中添加一个短代码,这样我就可以将图像放在占据一半屏幕的列上,而将文本放在占据另一半屏幕的列上,如下所示:

但是元素之间没有非常明确的关系,它们看起来就像漂浮在那里,很难编辑,因为每次你想添加这样的“组件”,你实际上必须添加三个短代码,然后插入图像和文本。
使用内置图像标题也不起作用,因为标题仅位于图像的正下方,不随文本展开。
所以,我的问题是:如何为最终用户添加一种方法,只添加图像和描述,以便在图像的侧面显示描述?有没有插件可以做到这一点,或者我可以添加一个自定义css,使图像标题向右移动并随文本扩展?