Using the HTML Module - Visual Editor

Visual Editor

 

 

The first tab of our HTML Module, and likely where most users will spend the majority of the time. The Visual Editor is an easy to use, WYSIWYG editor, that quickly allows you to add custom content, such as text, images, video, tables and links without the need of manually adding custom code. Many of the features you see on the Visual Editor can also be found on the News Module editor, so users who frequently post blogs articles on their websites should feel right at home.

Just to help you along, we'll list some common and useful functions of the Visual Editor below.

 

Inserting Images

You can insert an image into your module by using the "Insert" toolbar option and clicking "Insert Image". This will bring up a new window where you can enter your image details. You will need to enter the following -

Source: This will be a direct link to your image file. Advanced & Ultimate plan customers can upload from the Admin -> Files section. Clicking the folder icon to the right of the box will open your Enjin file manager for easy management. 

Image description: An optional description of your image. This will appear for users when they highlight your image in their browser.

Dimensions: This is where you can re-size your image to the dimensions of your choosing. By default, an image will not be constrained. This is also optional.

 

 

Inserting Links (Text & Images)

Once you have an image or a piece of text added to your module you may want to attach a link so when a user clicks it they will be taken to a page or website. You can do this easily using the "Insert Link" option on the "Insert" toolbar dropdown. 

1) Text - Highlight the text you want to add the link to, then click "Insert Link" from the toolbar options. 

2) Image - Click the image itself and then click "Insert Link" from the toolbar options.

 

Inserting Videos

You can insert a video in your module by clicking the "Insert Video" option in the "Insert" toolbar dropdown menu. From here you can either direct link your media link or embed manually using our embed tab.

To embed a YoutTube video, for example, you just need to locate the video on YouTube, Click the "Embed" option next to "Share", and then insert the embed code in your Embed section.

 

 

Tables

A great new feature of our new HTML Editor is the ability to easily add complex tables. To start using tables, you just need to click the "Table" toolbar, then "Insert Tables, and finally click and drag to your desired size. You can edit the properties of your table afterwards by highlighting the table and clicking the "Table Properties" toolbar option. 

 

Viewing Source Code

Sometimes you may need to view the source code of your module's content to make things more custom or to nit-pick an aspect you don't particularly like. This is easily done from the Tools -> Source Code option.

 

Tips & Tricks

  • To force a link break (Space) in the Visual Editor try pressing Shift + Enter.
  • Make use of the built-in spell check in the "Tools" section - seriously useful!
  • Preview your changes from the "View" section, and switch your current theme on/off with the "Site Theme" option in the far right hand corner.
Was this article helpful?
1 out of 1 found this helpful