Visual Editor

The Solodev Visual Editor, also known as a WYSIWYG editor, is an easy-to-use, browser-based content editor that enables you to author, capture, and format HTML data without the requirement of coding knowledge. The WYSIWYG gives you access to text editing functions and file enhancements and also allows you to view something very similar to the end result while the document or image is being created. This gives you the ability to visualize what you are producing.

Below is a screenshot of the WYSIWYG Editor in Solodev:

By hovering your mouse over the WYSIWYG buttons below you will be able to see what each one represents. Some of the most popular options are Paste from Word, Image and Hyperlink.


Cut & Paste from Word

Hover over the button highlighted below (top row, 9th button to right) and click the icon for the "Paste from Word" modal to populate.

If you have content that you are cutting and pasting from a Microsoft Word document, please follow the instructions below.  This will strip out all of the extra formatting that could impact the appearance of your site.

  • Copy the text you would like to paste from Word.
  • Use the instructions above to get to the file that corresponds to the page.
  • Once in the file, place your cursor where you would like to insert the text that was copied from Word.
  • Select the Paste from Word button.  (This button is in the top row of tools).
  • Another small window will appear, titled Paste from Word. As instructed in the box, please do not “right click” paste the text, rather hit the CTRL & V buttons together to paste the text. 
  • Once the text is pasted, click OK. Your text will appear in the original field where you placed your cursor. 
  • If you are done with your edits, hit Publish.

The Paste from Word button allows you to insert text from Microsoft Word without importing extraneous document formatting that will affect the look of your site content. To keep your site consistent from page-to-page, it’s best to allow the site’s style sheet to dictate font face, font site and color.

The only changes you should need to make to formatting for font face and font size should be done through the Paragraph Format button on the bottom row, which allows you to select Normal for paragraph text and Heading 1, for page headlines and Heading 2 for sub heads. The styles for those three options will be dictated by your style sheet so any change to your style sheet will affect all site content with that style. That keeps you from having to edit each page individually.


Adding Images

If you have an image you would like to add to a page on your Solodev website, please follow the instructions below. It is best to size the photo before inserting it into the file so you will need to determine beforehand how large you want your photo. 

Note: The optimal resolution for your photo is 72 dpi. Anything higher than that will result in a file unnecessarily large which could slow down the time it takes to load the page. Also, the file should be saved as a .jpg, .png or .gif. Make sure there are no spaces or periods in the file name. You can have dashes or underscore marks.

Images will be placed on the content pages so you will need to navigate the file tree in the web files folder to open the appropriate .html page. To insert an image, place your cursor on the left side of the line where you would like your image to appear. You can set the move the image to the right side of the page after uploading the image.

Step 1 - Click on the button with the photo icon, third row, first button and a small window will appear, titled Image Properties.


Step 2 - Toggle over to the 'Upload' tab


Step 3 - Click the Choose File button to locate your file. Your file’s path and name will appear in the window. 


Step 4 - Click the Send it to Server button. You will receive confirmation that your file was successfully uploaded. Click Ok at that point.


Step 5 - Your image will appear in a preview window. Click Ok to populate the image in your visual editor.

  • Alternative Text allows you to add a description of the photo. This text will be used by special needs viewers. This description will also help with search engine optimization if you incorporate your targeted keywords.
  • Width & Height of the photo will be set according to the dimensions of the photo you uploaded. You can manually adjust the size of the image to some degree, but any large changes should be done by re-sizing and uploading the photo again.
  • Border allows you to put a black border around the photo. Insert a numeric value to set the pixel width if you want a photo border.
  • HSpace/VSpace windows allow you to put padding around the image so it does not crowd the text. In this instance, the H stands for horizontal and puts padding to the left and right of the photo and the V stands for vertical so it puts padding above and below. You generally will not need to put padding above or below the photo because of the line spacing in the text, but horizontal padding of 10 pixels is generally accepted as adequate.
  • Align drop-down you have the opportunity to move the photo to the right or left. By default, the image will align to the left margin where you place your cursor. If you leave the alignment <not set>, the text will appear above and below the photo. If you select right or left, the photo will align to that margin and the text will wrap around the photo.

After you have set all of your parameters, click the OK button and your image will be placed on the page. When you are ready, don’t forget to click the Publish button to make your page live. When uploading images you have the option of where to place them, how much space you want between the image, the site text, and even put a border around the photo.


Adding a Hyperlink

The hyperlink button allows you to link text and images to other web pages and even PDF documents. Click the hyperlink button to add a link to your content.

A Link Info Window will populate where you can specify link type, protocol, and URL. Click OK for the link to populate in the Visual Editor.

Conclusion

In addition to using the WYSIWYG in its traditional mode by using the editing buttons, you can also access the source code to view and edit HTML code and even paste in previously created HTML code. Just click the Source button on the far left of the top row to access the source code. Click the source code a second time and it reverts back to the WYSIWYG mode.

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request