I haven’t found an ideal visual editor for MODX. The main issue is that we want to maintain the integrity of our codes and a visual editor would destroy it. Our method, as well as the reason we use MODX, is only to write the codes that are required for our website. With a visual editor, WordPress’s Gutenberg for example, the codes were already baked into the editor. As a result, the website with a visual editor is much heavier and the HTML markups would tie into inline CSS and other scripts. To illustrate my point, let me give you an example of how MODX renders a paragraph (<p>
) versus a visual editor.
MODX:
<p>Lawyers who can understand both sides of an issue and argue persuasively and civilly have an advantage in today’s polarized society. At Scalia Law, we believe in exposing you to all viewpoints along the legal and political spectrum and encouraging you to join the debate in a civilized and respectful way. You’ll learn to do this in a small and collegial community at our campus in the heart of Arlington, Virginia, a vibrant yet relaxed town that’s just a short Metro ride away from our nation’s capital.</p>
A visual editor:
<p class=MsoNormal style='margin-top:12.0pt;margin-right:0in;margin-bottom:12.0pt;marginleft:0in;background:white'><span style='font-size:14.5pt;font-family:"Pelago",sans-serif;fareast-font-family:"Times New Roman";bidi-font-family:"Times New Roman";color:#101010'>Lawyers who can understand both sides of an issue and argue persuasively and civilly have an advantage in today’s polarized society. At </span><span style='font-size:14.5pt;
font-family:"Times New Roman",serif;fareast-font-family:"Times New Roman";color:#101010'>Scalia Law</span><span style='font-size:14.5pt;font-family:"Pelago",sans-serif;fareast-font-family:"Times New Roman";bidi-font-family:"Times New Roman";
color:#101010'>, we believe in exposing you to all viewpoints along the legal and political spectrum and encouraging you to </span><span style='font-size:14.5pt;font-family:Helvetica;fareast-font-family:"Times New Roman";bidi-font-family:"Times New Roman";color:#101010'>join the debate</span><span style='font-size:14.5pt;font-family:"Pelago",sans-serif;fareast-font-family:"Times New Roman";bidi-font-family:"Times New Roman";color:#101010'> in a civilized and respectful way. You’ll learn to do this in a small and collegial community at our campus in the heart of </span><span style='font-size:14.5pt;
font-family:"Pelago",sans-serif;fareast-font-family:"Times New Roman"; bidi-font-family:"Times New Roman";color:black;themecolor:text1'>Arlington, Virginia</span><span style='font-size:14.5pt;font-family:"Pelago",sans-serif;fareast-font-family:"Times New Roman";bidi-font-family:"Times New Roman";color:#101010'>, a vibrant yet relaxed town that’s just a short Metro ride away from our nation’s capital.<o:p></o:p></span></p>
As you can see the difference between the two paragraphs. The first one, you can still read the text without interruption. The second one, lots of unnecessary styles were added by the visual editor. They are not only weighing down the page, but also making it tedious to make global changes across our entire site. For our WordPress sites, we have to deactivate Gutenberg because the block editor isn’t working too well. Even our users requested that we deactivated the visual editor. Until we can find a visual editor that spits out clean, well-structured markups, the compromise is not worth pursuing, especially in the long run.
I don’t recommend anyone experimenting on the live site. Even though I know MODX quite well, I don’t mess around with the live site to avoid accidentally breaking the codes. I only play around outside of MODX and make a backup first (just in case things would go wrong) before implementing on the live site. I totally understand it is easier for you to try things out than to explain them to someone else. A framework is helpful, but not always a true representation of the live site. I can offer you a much better solution. Since you are very good with Photoshop, I put together a mock-up of our website for you to experiment. Once you try things out and come up with what you want, send us your mock-up and we will implement it on the live site. This is a much safer approach to experimenting on the live site.
If you take a look at the PSD file, I have layers to help guide you through the layout. Our site layout is based on CSS Grid. The header and the navigation stay constant for consistency, but everything else can be changed by showing or hiding the layers. You can have a full-browser banner or a max-width banner that matches the layout. You can have a layout with or without a sidebar. You can have 1, 2, 3, 4, or 5 columns. You can combine different columns or no columns at all. You can have images flow within texts. You can have lots of options. In fact, you can turn off all the layers in Photoshop and have a blank canvas to work with. When you have time, play around with it. I am more than happy to walk you through the demo as well.