Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.



Excerpt


Section


Column
width50%

Step 1:

 Hover Over the Appearance Option

Add Image

In the Tool Pane, hover over the Media option to make the shortcut menu appear, then select the Add New option.


Column
width50%



Section



Section


Column
width50%

Step 2: Upload Files

Click the Select Files button.


Column
width50%



Section



Section


Column
width50%

Step 3: Select the Image

Use your computer's Finder or Explorer window to select the appropriate image. This will upload the image to the Wordpress server and add the image to the bottom of the Add New screen.


Column
width50%

Image RemovedImage Added



Section



Section


Column
width50%

Step 4: Edit the Image

Once uploaded, select the specific image to edit by clicking the Edit button next to it.


Column
width50%



Section



Section


Column
width50%

Step 5: Add Alt Text for Accessibility

Whiled While editing the image, add alt text into the Alternative Text field for accessibility.

Then, click the Update button to save the change. This will not navigate away from the image editor.



Section



Section


Column
width50%

Step 6: Copy the Image's URL

Click into and select all of the data in the File URL field.

Copy that data by using the keyboard shortcut Control + C on a PC, or Command + C on a Mac. You can also right-click and select Copy from the shortcut menu.

This will copy the URL onto your computer's clipboard.


Column
width50%



Section



Section


Column
width50%

Step 7:

Click Insert Into Page Button

After being selected and having the alt text entered, click the Insert Into Page button.

Image Removed

 Hover Over the Appearance Option

In the Tool Pane, hover over the Appearance option to make the shortcut menu appear, then select the Widgets option.


Column
width50%

Image Added



Section



Section


Column
width50%

Step 8: Access the Contact Information Panel

Under the Main Sidebar area, click the dropdown for Text: Contact Information.


Column
width50%

Image Added



Section



Section


Column
width50%33%

Step

6

9:

Confirm the Image and Placement

Confirm that the correct image is in the correct location on the page.

You can drag and drop the image to move it, or you can click on the image to bring up the Image Editor and use that to change its position

Insert the Copied URL

Highlight the default URL in the image reference code.

Do not remove any of the extra code. You should replace only the URL within the quotation marks.


Column
width33%

Image Added


Column
width33%

Image Added



Section



Section


Column
width33%

Step 10: Add Alt Text for Accessibility

For accessibility compliance, highlight the default alt text inside of the quotation marks and replace it with alternate text relevant to the photo. 

Do not remove any of the extra code. You should replace only the alt text within the quotation marks.


Image Removed
Column
width50%
33%

Image Added


Column
width33%

Image Added



Section



Section


Column
width50%

Step

7

11:

Click the Update ButtonWhen all of your changes are complete, click the Update button

Save

Click the Save button to confirm your changes.


Column
width50%

Image RemovedImage Added