Adding Images to Articles

Add images to articles to illustrate instructions, showcase products, show icons, and more. Add them as separate content blocks for easy rearranging or as inline images within the text. 
Supported file types:
Wix Answers supports the following image file types: jpeg, jpg, png, gif, ico, bmp, and tiff.

Learn more about:


Adding Images as Separate Content Blocks

We recommend adding images as separate content blocks whenever possible. This makes it easy to rearrange within the article, or copy and paste into another article. The image always appears centered on the screen and viewers can click to expand it. For example:

To add an image as a content block:

  1. Go to the Content Editor of the relevant article.
  2. Hover over the left side of a content block and click the Add a block icon .
  1. Click the Image icon  .
  2. Click Upload.
  3. Select a file from your computer and click Open.
  4. (Optional) Add image alt text:
    1. Hover over the image and click Add Image Alt Text.
    2. Enter the image's alt text and click Save.
Note:
Uploaded images display at a maximum width of 628 px on your live articles. When clicked, they expand in your browser window.

Adding Inline Images

Add an inline image whenever you need to add an image within a text, informative, or collapsible block. This method is great for adding icons within the same line as the text itself. For example, this Text icon  is an inline image. 
Tip:
When adding icons, we recommend uploading images that are no larger than 16 pixels high to keep the spacing between text lines consistent. 

To add an inline image:

  1. Go to the Content Editor of the relevant article.
  2. Place your cursor where you want to add the image.
  3. Press the space bar on your keyboard then highlight the space you added.
  4. Click the Image icon .
  5. Choose an option: 
    • Upload New Image: Click Upload New Image, select a file from your computer and click Open.
    • Image URL: Paste the URL of an image in the Image URL field.
  6. (Optional) Paste a URL in the Link to (optional) field to link the image to a webpage.
  7. (Optional) Enter alt text in the Image alt text field.
  8. Click Update.
Notes:
  • To add an inline image below a step of instructions, press Shift + Enter on your keyboard, then double-click to open the text options menu.
  • Copying and pasting images from other sources is not supported. To add images to your articles, use the supported methods above.

Related Articles

Editing an Article

You can update an article from its Content Editor anytime you need to make changes. Learn how to go to an article's Content Editor:From the Team Member toolbar on the live version.By searching in your Knowledge Base. Editing an Article from the Team Member ToolbarUse the Team Member toolbar to go to the Content Editor if you're already viewing the live version of an article in your Help Center. To edit an article from the Team Member toolbar:Go to the live article in your Help Center. Click the Drop-down icon   in the top left corner. Note: If you don't see the Drop-down icon in the top left corner, make sure you're logged in to your Wix Answers account as a team member. Click Manage this article to go to the article's content editor. Edit the article. Tip:Learn how to use content blocks to add different types of content. Click Save at the top right.When you're ready to update the live article, click the Save drop-down and select Publish.  (Optional) Select publishing options:  Notify followers: Send an automatic notification to followers of the article. Learn More Update URL: Update the live article's URL (if you've changed the title of the article). Note: The old article URL will redirect to the new URL.  Click Publish Article. Tip:Learn more about the Team Member toolbar. Editing an Article from Your Knowledge BaseGo to the Content Editor of any of your articles by searching for the article in your Knowledge Base. To edit an article from your Knowledge Base:Click the Knowledge Base icon in the side panel. Click the Search field and enter the name of the article you want to edit. Select the article to go to its Content Editor. Edit the article. Tip:Learn how to use content blocks to add different types of content. Click Save at the top right.When you're ready to update the live article, click the Save drop-down and select Publish.  (Optional) Select publishing options:  Notify followers: Send an automatic notification to followers of the article. Learn More Update URL: Update the live article's URL (if you've changed the title of the article). Note: The old article URL will redirect to the new URL.  Click Publish Article. Tip:View the live article once you've published by clicking View Live next to Save. 

2 min read

Working with Content Blocks

When creating an article, add various types of content as individual content blocks (e.g. text, images, tables). Each content block is an independent component. You can reorder content blocks or copy and paste them into the same, or different articles. Managing Content BlocksClick below to learn more about managing content blocks. Adding a content blockHover over the left side of the content block and click the Add a block icon . Select an option or click More for additional options. View Types of Content Blocks below to learn more about the content types you can add.Copying and pasting a content blockHover over the relevant content block and click the Copy icon .Click the Add a block icon in the same article or in a different article. Click the Paste Block icon .Reordering content blocksHover over the relevant content block.Click the Reorder icon  on the right and drag the content block to a new location in the article. Deleting a content blockHover over the relevant content block and click the Delete icon .  Types of Content BlocksYour articles consist of different types of content (e.g., text, images, tables) that you add as content blocks. Click below to learn more about each type of content block. TextClick the Text icon and select a text type:Text: Add a standard block of text. Learn how to format your text.  Bulleted: Add a bulleted list. Use bulleted lists for single-step procedures or to list items that don't require a particular order. Numbered: Add a numbered list. Use numbered lists for multiple-step procedures that require a particular order. Learn more about adding text to your articles. SubtitleClick the Subtitle icon and select an option:Subtitle: Select a heading size to add a subtitle. Anchor: Add an anchored subtitle in the H3 heading size. Tip: Once you add a subtitle, you can hover over it to change the size or to add or remove an anchor.Informative Notes Click the Informative icon . Select a color (Green, Teal, Red, or Yellow). Enter the note title in the Title goes here field. Enter the note text in the Write something field.Tip: Hover over an informative note to hide its title or change its color. Learn more about adding informative notes. LinesClick the Lines icon.Select Dashed or Solid. Tip: Once you add a line, hover over it and click the Edit icon to change the line type.Image Click the Image icon . Click Upload. Select a file from your computer and click Open. (Optional) Add image alt text: Hover over the image and click Add Image Alt Text. Enter the image's alt text and click Save. Note: Uploaded images display at a maximum width of 628 px. When clicked, they expand in your browser window. Learn about other ways to add images to your article. VideoClick the Video icon .Paste the URL of the video.Click Get Video.Note: Currently, it is only possible to add URLs for videos uploaded to YouTube or Vimeo. Learn about other ways to add a video to your article.TableClick MORE and select Table.Enter the number of columns and rows that you need.Note: The header is automatically added on top of the table, so there's no need to add an extra row for it. Click Add Table.Learn how to add, delete, or edit your table. CollapsibleClick MORE and select Collapsible.Enter the title in the Title goes here field.Enter the text in the Write something field.Learn more about collapsible blocks. Code SnippetClick MORE and select Code Snippet.Select the type of code snippet you'd like to add. Tip: Hover over a code snippet and click the Edit icon to change the snippet type.IFrameClick MORE and select IFrame.(Optional) Edit the iFrame height.Enter the URL you'd like to embed in the iFrame URL field.(Optional) Click Disable scrolling to prevent scrolling within the iFrame. Click Add iFrame.Note: By default, a horizontal scroll bar is added when the width of the iFrame is more than 700px. Click Disable scrolling if you want to remove the scroll bar.HTMLClick MORE and select HTML.Double-click HTML Code and remove the existing code.Enter your HTML code.MarkdownClick MORE and select Markdown.Enter text using Markdown syntax. Click outside the Markdown block to preview the formatting you've written. Learn more about adding Markdown text.

4 min read

Adding Collapsible Blocks in an Article

A collapsible block is a text block displaying its title as a single line. Once clicked, the collapsible block expands to display the entire text within it. I'm a collapsible block. Click to view more information.Now that you've clicked, you can read the text that was hidden in this collapsible block. Adding expandable text to your Wix site?This article refers to adding collapsible blocks to Knowledge Base articles in the Wix Answers Help Center. If you need to add "Read More" / "Read Less" links to your Wix site, click here.To add a collapsible block:Go to an article's Content Editor. Hover over the left side of a content block and click the Add a block icon . Click MORE and select Collapsible.Enter the title in the Title goes here field.Enter the text in the Write something field.When to use collapsible blocksCollapsible blocks are a great way of presenting large amounts of information, in an easy to read way. The following are some examples of using collapsible blocks:Instructions with multiple sub-steps: If you're documenting a long procedure, with multiple sub-steps, you can write each step in its own collapsible block. This way users can easily navigate to the step they're on without losing their place.Long articles with multiple sections: Users may be scared off when presented with a long page full of text. That doesn't mean you shouldn't provide this information. Rather, you can break it down into sections, and place each section in a collapsible block. This is especially useful if viewers only need to read a specific section.Articles with advanced steps or instructions: You may want to include general steps in articles that the majority of your viewers can follow. Below each step, you could add collapsible blocks where viewers can click for detailed information. Add images to a collapsible blockPlace your cursor where you want to add the image. Press the space bar on your keyboard then highlight the space you added. Click the Image icon .  Select an option: Upload an image: Click Upload New Image, select a file from your computer and click Open.Paste the image URL: Paste the URL of the image in the Image Link field.(Optional) Link to URL: Enter a URL in the Link to (optional) field if you'd like to link the image to a webpage.Click Update.  

2 min read

Adding Informative Notes to an Article

Informative notes are a great way to draw your reader's attention to important and useful information in an article. Use informative notes to add information without crowding the article or distracting from the main content. Note:This is an example of an informative note. You can edit its content and color. To add an informative note:Go to an article's Content Editor. Hover over the left side of a content block and click the Add a block icon . Click the Informative icon .Select a color (Green, Teal, Red, or Yellow).Enter the note title in the Title goes here field.Enter the note text in the Write something field.Tips for writing informative notes:Note colorUse different colors for different types of notes. For example:Red: Use for warnings that are considered blockers. These notes should appear at the top of the article.Yellow: Use for important information that users should know before proceeding. These notes often appear at the top of the article, but can appear elsewhere.Blue: Use for notes within the text that give additional information that users should know. Green: Use for tips or helpful hints that are not vital, but add value to the content. These often appear under the instructions.Note titleA note title helps users understand what kind of information is contained in the note, and how much attention they need to pay to it. For example, if the note title is 'Important', users are likely to read it, even if they are in a hurry. If the note title is 'Tip' users will probably only read it if they have extra time. Alternatively, you can hover over the note block and select Hide Title if you do not want to display the note title.Note contentIn general, notes should be kept short and to the point. Try sticking to one or two sentences. Although it is possible to add inline images within a note, it is not recommended unless necessary. Number of notesYou can add as many notes as you want to an article, however, if you have multiple notes of the same type (e.g., 3 'Important' notes), it is recommended to include them all within a single note block. Try not to add more than two or three note blocks per article so as not to distract from the main content.Notes between stepsWhen adding notes between steps, you have two options:Add the note as a note block:Hover over the bottom left of the text block containing the steps and click the Add a block icon .Click the Informative icon .Select a color (Green, Teal, Red, or Yellow).Enter the note title and text.Hover over the bottom left of the note block and click the Text icon .Select the text type you were using to write the steps and continue writing the steps. If you were using a numbered list, the numbers continue from where you left off.Add the note within the text:Press Shift + Enter at the end of the relevant step.Type Note: (or any other note title) and make it bold.Add the note as text.Press Enter to continue the steps. If you were using a numbered list, the numbers continue from where you left off.Tip:Hover over an informative note to hide its title or change its color. 

3 min read

Adding Text to an Article

Create articles that mostly consist of various types of text blocks. You can add text in different content blocks to make it easy to rearrange them later. To add text to an article:Go to an article's Content Editor. Hover over the left side of a content block and click the Add a block icon . Click the Text icon  and select a text type:Text: Add a standard block of text. Learn how to format your text.  Bulleted: Add a bulleted list. Use bulleted lists for single-step procedures or to list items that don't require a particular order. Numbered: Add a numbered list. Use numbered lists for multiple-step procedures that require a particular order. Enter your text in the Write something field. (Optional) Highlight your text and format it using the available options.Tip:You can also add text using different types of content blocks such as subtitles, informative notes, collapsible blocks, and more. Learn more about the types of content blocks you can add. 

1 min read

Formatting Text in Articles

Most of your text's formatting is defined in the Cascading Style Sheets (CSS), although you can add bold or italics from the Text Toolbar. You can also change the text type (e.g. regular text to list-formatted), link to other articles or web addresses, and insert inline images. To format text in an article: Go to the Content Editor of the relevant article.  Highlight the text you'd like to format. Select an option from the Text Toolbar: Bold: Click the Bold icon to make your text bold (or press Ctrl + B). Italics: Click the Italics icon to italicize your text (or press Ctrl + I). Link: Click the Link icon to hyperlink your text. Paste the URL of the link or search for an article and select it, then click Insert Link.  Bullets: Click the Bullets icon to change your text into a bulleted list. Numbers: Click the Numbers icon to change your text into a numbered list. Image: Click the Image icon to add an inline image, then select an option: Upload image: Click Upload New Image, select a file from your computer and click Open. Then click Update.   Paste image URL: Paste the URL of an image in the Image Link field and click Update.   Note:We recommend adding images using separate content blocks. Use the inline images method in the Text Toolbar to add icons to lines of text. Important:If you experience issues with text that's been copied and pasted from an external source, try removing the formatting. 

2 min read