In Webflow, how can I make the plus sign (+) appear on a new line in the rich text editor when adding images or custom code to a blog post?

Published on
September 22, 2023

To make the plus sign (+) appear on a new line in the rich text editor when adding images or custom code to a blog post in Webflow, you can use custom CSS or modify the HTML structure. Here's a step-by-step guide on how to achieve this:

  1. Open the Webflow Designer and navigate to the page or template where you want to make the change.

  2. Select the rich text element that contains the image or custom code block.

  3. Click on the "Typography" tab in the right sidebar.

  4. Scroll down to find the "Custom Style" section.

  5. In the "Tag" field, enter a unique class name for the rich text element. For example, you can use "new-line-plus".

  6. Click on the "New Class" button to create a new class with the name you provided.

  7. Once the class is created, scroll down to find the "Advanced" section.

  8. Click on the "Add Custom CSS" button.

  9. In the custom CSS editor, paste the following code:

.new-line-plus::before {  content: "";  display: block;}
  1. Click "Save" to apply the CSS changes.

  2. Now that the custom CSS is added, you need to modify the HTML structure to ensure the plus sign appears on a new line.

  3. Go back to the Designer and select the rich text element again.

  4. Click on the "Elements" tab in the right sidebar.

  5. Scroll down to find the "Nested Elements" section.

  6. Click on the "Add element" button.

  7. Choose the type of element you want to add to create a new line. For example, you can choose "Div" or "Paragraph".

  8. Drag and drop the newly added element above the existing content within the rich text element.

  9. Click on the plus sign icon (+) of the new element to add content.

  10. Add a space character or any desired content to create the new line.

  11. Save your changes.

Now the plus sign should appear on a new line within the rich text element throughout your blog post. By using custom CSS and modifying the HTML structure, you have full control over the appearance and layout of your content in the rich text editor.

Additional Questions:

  1. How do I add custom CSS in Webflow?
  2. Can I customize the HTML structure of elements in Webflow?
  3. What are some other techniques to modify the layout of rich text elements in Webflow?