How to Use the WYSIWYG Editor

Nov 5, 2020
Programming and Development

Welcome to AwesomeWebsites4Free, your trusted source for all your eCommerce and shopping website needs. In this comprehensive guide, we will walk you through the process of using our powerful WYSIWYG editor. By the end, you'll be equipped with the knowledge and skills to create and manage a stunning website.

Understanding the WYSIWYG Editor

Before we dive into the nitty-gritty details, let's start by understanding what a WYSIWYG editor is. WYSIWYG stands for "What You See Is What You Get," and it allows you to create and edit content in a visual interface that closely resembles the final appearance of your website.

The key benefit of a WYSIWYG editor is its user-friendly nature, making it accessible even to those without extensive technical knowledge. With this tool, you can design web pages without needing to write complex HTML or CSS code. It empowers you to focus on the creative aspects of web design, leading to faster and more efficient website creation.

Getting Started

To begin using the WYSIWYG editor, log in to your AwesomeWebsites4Free account and navigate to the website management dashboard. Once there, locate the "WYSIWYG Editor" tab, and click on it to open the editor.

Interface Overview

Upon opening the WYSIWYG editor, you'll notice a sleek and intuitive interface designed to streamline your website creation process. Let's take a closer look at the key elements:

  1. Main Toolbar: Located at the top of the screen, the main toolbar houses essential tools for formatting text, inserting images, creating links, and more.
  2. Formatting Options: Just below the main toolbar, you'll find various formatting options to customize your text, including font styles, sizes, colors, and alignments.
  3. Content Area: This is the central part of the editor where you can compose your web page's content. It provides a canvas-like space for you to visualize your content as you create it.
  4. Preview Window: Situated on the right side of the editor, the preview window dynamically displays your page's appearance as you make changes to the content.

Creating and Editing Content

Now that you have a basic understanding of the WYSIWYG editor's interface, let's explore how to create and edit content effectively:

1. Adding and Formatting Text

To start adding text to your page, simply click inside the content area and begin typing. You can format text using the main toolbar's options, including bold, italic, underline, alignment, and more. Experiment with different styles to achieve the desired look for your website.

2. Inserting Images and Media

Visuals play a vital role in capturing your visitors' attention, so let's learn how to insert images and media into your web pages:

  1. To add an image, click on the image icon in the main toolbar. A file explorer window will appear, allowing you to select the image file from your computer. Once uploaded, you can adjust its size, position, and apply captions.
  2. For videos or audio files, follow a similar process by clicking on the appropriate media icon. You can either upload the media file or embed it from external sources like YouTube or SoundCloud.

3. Creating Links

Hyperlinks are essential for enhancing navigation and connecting different web pages. Here's how you can create them using the WYSIWYG editor:

  1. Select the text or image you want to turn into a link.
  2. Click on the link icon in the main toolbar.
  3. In the popup, enter the URL you want to link to. You also have the option to customize link attributes such as target, title, and rel.

4. Customizing Page Structure

The WYSIWYG editor allows you to organize your content with headings, paragraphs, lists, and more. These elements contribute to a well-structured and visually appealing website. Let's explore these options:


Use HTML headings to define the hierarchy of your content. Headings range from

(the main heading) to
(subheadings), with

carrying the highest importance. Use appropriate headings to optimize your website's readability and search engine visibility.



tag signifies a paragraph. Use this tag to separate blocks of text and allow for better readability. Break up your content into logical paragraphs to engage your audience and facilitate understanding.


Lists provide a structured way to present information. There are two types of lists you can utilize:

  • Unordered Lists (
      ): These lists use bullet points to denote each item. Ideal for showcasing non-sequential information.
    • Ordered Lists (
        ): These lists provide a numbered sequence for a set of items. Use ordered lists when order and organization matter.

    5. Preview and Publish

    Once you're satisfied with your content and overall design, it's time to preview your webpage before publishing it for the world to see. To do this, simply navigate to the preview window on the right side of the editor. Take a moment to review the layout, text formatting, images, and other elements to ensure they align with your vision.

    After reviewing the preview, make any necessary adjustments in the WYSIWYG editor. You can repeat this process until you are truly content with the outcome.


    Congratulations! You've just learned the ins and outs of our powerful WYSIWYG editor. With its user-friendly interface and comprehensive set of tools, you can now confidently create and manage stunning websites for your eCommerce and shopping needs.

    Remember, practice makes perfect, so don't hesitate to explore different design options and experiment with various formatting techniques. The more you utilize the WYSIWYG editor, the more proficient you'll become in crafting unique and visually appealing web pages.

    We hope you find this guide helpful, and we look forward to seeing the amazing websites you create using our WYSIWYG Editor. Happy designing!

Chris Horn
The tutorial has instilled a sense of confidence in my abilities.
Oct 16, 2023
Lisa West
The practical tips provided in the article are truly valuable.
Oct 3, 2023
Trevor Egginton
The detailed steps made it so much easier to understand.
Sep 19, 2023
Xueling You
The article left me feeling more confident in my ability to use the WYSIWYG editor.
Sep 19, 2023
Ryan Yates
The WYSIWYG editor used to intimidate me, but not anymore.
Sep 18, 2023
Blaise Danielson
I appreciate the screenshots that accompanied the step-by-step guide.
Sep 2, 2023
Colleen Bosshart
Thank you for simplifying what seemed so complicated before.
Aug 28, 2023
Jose Azcatate
The friendly tone of the article made it all the more enjoyable to read.
Aug 2, 2023
Roberth Villarreal
I'm genuinely thankful for the in-depth explanations provided.
Jul 26, 2023
Lydia Sison
I appreciate the detailed explanation of the WYSIWYG editor.
Jul 23, 2023
Gagandeep Singh
This article is a goldmine for anyone with questions about the WYSIWYG editor.
Jun 27, 2023
Donna Danzy
The article provided a fresh perspective on the WYSIWYG editor.
Jun 27, 2023
Mark Kidd
I'm really looking forward to exploring the WYSIWYG editor further.
Jun 24, 2023
Brendad Parsons
The simple, straightforward language made the article a joy to read.
Jun 21, 2023
Lynda Schaefer
The thought of using the WYSIWYG editor used to intimidate me, but not anymore!
May 23, 2023
Vadim Tukuser
I now feel equipped to tackle the WYSIWYG editor head-on.
May 21, 2023
Not Provided
Bookmarking this article for future reference – that's how good it is!
May 12, 2023
Shiwen Cheng
I've bookmarked this article, and I'm sure I'll be revisiting it often.
May 11, 2023
Dena White
This article has made me more excited to work on my website now.
May 5, 2023
Mette O'Connor
I feel motivated to try out the editor after reading this guide.
Apr 13, 2023
Add Email
The screenshots really helped to follow along with the instructions.
Apr 3, 2023
Dilip Kumar
The detailed guide made using the WYSIWYG editor less daunting.
Mar 30, 2023
Roland Meyer
The article felt like a personal guide from a mentor; very encouraging.
Mar 23, 2023
Brian Delong
This is hands down the best tutorial on the WYSIWYG editor I've come across.
Mar 20, 2023
Stuart Beagley
The WYSIWYG editor has always intimidated me, but this article has given me the confidence to use it.
Mar 10, 2023
Lucile Montant
I found the advice on shortcuts particularly useful.
Mar 4, 2023
Stacy Bacilek
The guide has certainly made me more comfortable using the WYSIWYG editor.
Feb 26, 2023
Charles Doucette
I'm grateful to have found such a comprehensive guide.
Feb 16, 2023
I am amazed by how much I gained from reading this article.
Jan 20, 2023
Agung Widarma
The explanatory nature of the article was truly commendable.
Jan 18, 2023
Robert Bianchine
My perception of the WYSIWYG editor has completely changed after reading this.
Jan 2, 2023
Daniel Feigelson
The article has quashed my fear of using the WYSIWYG editor.
Jan 1, 2023
John Hanlon
I love that the article is so beginner-friendly.
Dec 30, 2022
Paul Ruggiero
I had never thought using the WYSIWYG editor could be this empowering.
Nov 30, 2022
Jorge Huarcaya
The article has successfully demystified the WYSIWYG editor for me.
Nov 16, 2022
Nick Buckle
I've been struggling with the WYSIWYG editor, but this guide clarified a lot.
Nov 10, 2022
Rebecca Chislett
The article is a must-read for anyone wanting to understand the WYSIWYG editor better.
Oct 16, 2022
John Eisel
Can't wait to try the tips and tricks shared in this article!
Oct 10, 2022
Karen Tejada
I appreciate the effort put into crafting this insightful article.
Oct 3, 2022
Dennis Kay
The article was written with clarity and simplicity; loved it.
Oct 2, 2022
Karen Behnke
Thank you for making the WYSIWYG editor seem less intimidating.
Sep 30, 2022
Sarah McHugh
The article provided great insights into the functionalities of the WYSIWYG editor.
Aug 8, 2022
Nishant Shah
The guide was concise and to the point, which I loved.
Aug 7, 2022
Kathy Corum
The article was worth every minute of my time.
Jul 31, 2022
Jason Evens
The comprehensive guide made the whole learning process enjoyable.
Jul 26, 2022
Michael Lopez
I'm so glad I stumbled upon this article; it's been an eye-opener.
Jun 29, 2022
Tara Wineinger
I can't wait to apply the newfound knowledge to my projects.
Jun 15, 2022
Monique Ames
The article laid out the process so clearly; it's a real asset.
Jun 12, 2022
Kathy Miller
The article's practical approach has made a huge difference for me.
May 8, 2022
Jeremy Bakke
Using the WYSIWYG editor seems much less intimidating after reading this article.
Mar 5, 2022
Matt Scharffenberg
The article is a godsend for beginners like me.
Mar 3, 2022
Richard Ollier
I'm so grateful for the tips and tricks shared in this article.
Feb 28, 2022
Cyril Tuzzolino
I've always been hesitant to use the WYSIWYG editor, but not anymore!
Feb 23, 2022
Harry Mullen
The article provides a comforting hand-holding experience through the editor.
Feb 11, 2022
Jacki Doman
Thanks for making the learning process so enjoyable.
Jan 23, 2022
Vishal Dixit
I genuinely appreciate the effort put into this informative piece.
Jan 17, 2022
Rick Kaczanko
I found the section on formatting extremely useful.
Jan 7, 2022
Alex Robinson
I appreciate the effort put into making the article so easy to follow.
Jan 1, 2022
Maggie Cheung
The article offered a wealth of information in a succinct manner.
Dec 30, 2021
Pat Tierney
Getting to know the WYSIWYG editor better has boosted my confidence.
Dec 28, 2021
Azieza Uhnavy
Thank you for shedding light on the advanced features of the WYSIWYG editor!
Dec 21, 2021
Marie-Josee Leclaire
I'm excited to test out the WYSIWYG editor with my newfound knowledge.
Dec 18, 2021
Maria Gonzalez
I've struggled with the WYSIWYG editor before, but this article was a game-changer.
Dec 15, 2021
Charles Combs
This comprehensive guide is a real gem for anyone new to the WYSIWYG editor.
Dec 8, 2021
Sade Schuurman
The article has convinced me to experiment more with the WYSIWYG editor.
Nov 22, 2021
Add Email
I'm impressed by how much I've learned from this single article.
Nov 19, 2021
Steve Adams
The article gave me a great boost of confidence in using the WYSIWYG editor.
Oct 20, 2021
Tim O'Brien
I feel ready to tackle the WYSIWYG editor now; thanks to this article.
Oct 13, 2021
Aaron Bacon
I'm looking forward to implementing the techniques shared in the article.
Oct 6, 2021
Paul Wheeler
The article has reshaped my perspective on the WYSIWYG editor.
Oct 3, 2021
Stella Greenbaum
This article was really helpful, thank you!
Sep 9, 2021
Kathy Dunton
The article has convinced me that using the WYSIWYG editor is within my grasp.
Aug 14, 2021
Mina Yazdi
The article is definitely a game-changer for me.
Aug 14, 2021
Rogelio Flores
This article is a treasure trove for anyone wanting to learn about the WYSIWYG editor.
Aug 3, 2021
Melgie Ross
The WYSIWYG editor seemed daunting, but this article changed my perspective.
Jul 18, 2021
Phil Zhang
After reading this article, I have newfound respect for the WYSIWYG editor.
Jul 1, 2021
Jeanine Edwards
Thank you for breaking down the technicalities in such a digestible way.
Jun 28, 2021
Cori Coons
I'm excited to put these newfound skills to the test!
Jun 24, 2021
The article was a lifesaver; it simplified everything for me.
Jun 13, 2021
Devlyn Crutcher
The step-by-step instructions made it so easy to understand.
Jun 10, 2021
Lisa Johnson
I'm impressed by how accessible the WYSIWYG editor seems now.
Jun 1, 2021
David Escobar
The detailed explanations in the article were truly eye-opening.
May 7, 2021
Praveen Sheethalnath
I was able to follow the steps easily, thanks to the clear instructions.
May 3, 2021
The article was well-structured and easy to follow.
Apr 1, 2021
Ray Falkoff
I'm so grateful for the troubleshooting tips included in the article.
Mar 18, 2021
Mark Collins
I never thought using the WYSIWYG editor could be this easy!
Mar 12, 2021
Doug Llc
The article has given me the motivation to explore the WYSIWYG editor further.
Mar 6, 2021
Lindsay Bohon
I feel much more confident about using the WYSIWYG editor after reading this article.
Feb 26, 2021
Lorraine Lespier
The article has given me a newfound sense of empowerment.
Feb 26, 2021
Stacy Brinegar
I never thought I'd be so excited to try out a WYSIWYG editor!
Feb 19, 2021
Heidi Hoffman
I can't believe such a powerful tool can be user-friendly!
Feb 18, 2021
James Spaulding
I never thought I'd feel so excited to use a WYSIWYG editor, but here I am!
Feb 13, 2021
Soren Berg
Thank you for providing such valuable insights into the WYSIWYG editor.
Feb 8, 2021
Elgin Brown
I never knew the WYSIWYG editor could be so versatile. This article opened my eyes!
Feb 7, 2021
Frank Fuziol
I found this article very motivating and empowering.
Jan 20, 2021
Heather Rath
I was impressed by the depth of information provided in the article.
Jan 15, 2021
Massimo Barsotti
I found the article incredibly useful—kudos to the creator!
Jan 13, 2021
Jim Leney
I didn't know all these features were available in the WYSIWYG editor. Very informative!
Jan 12, 2021
Klara Macko
Thank you for simplifying what I thought was a complex tool.
Dec 31, 2020
Mel Romero
The guide is a great resource for anyone looking to master the WYSIWYG editor.
Dec 20, 2020
Christine Knappert
I appreciate the tips on customizing the editor to suit my preferences.
Dec 19, 2020
Debbie Boyer
The editor seemed daunting, but now I'm eager to give it a try.
Dec 3, 2020