How to implement professionally designed and sized images and videos in WordPress. Originally developed by Erika Barker.

1. Content Implementation

2. BIG EMPTY GAPS ARE
UNPROFESSIONAL
This lesson will show you how to fill the page.

3. BIG EMPTY GAPS ARE
UNPROFESSIONAL
This lesson will show you how to fill the page.
Yuck! Look at
this big, nasty
gap next to our
video. This looks
unprofessional.
Let’s fix it!

4. In Safari, click on the Safari menu and choose the
“Preferences” option.

5. Click on the Advanced tab and ensure the “Show
Develop menu in menu bar” box is checked.

6. Close out of Preferences.

7. In Safari, select the Develop menu, and click on the
“Show Web Inspector” option.

8. You should now see the Web Inspector
panel appear in Safari.

9. Click on this
hand pointing
tool in the Web
Inspector Panel.

10. This Column is
600 pixels wide.
This is all we
need to know.
Using the hand pointing tool, move your mouse over
the left column of your website. If you look, it will tell
you how wide this column is in pixels. The only number
we need from here is the first number on the left.

11. Remember, each theme is unique. Your column could
be 700, or 500 pixels wide. Don’t simply use 600 pixels
because the theme used in this tutorial does.

12. InYouTube, lets
click the “Share”
option on the video
we wish to use on
our site.

13. Oh no! This video is not the right size. Let’s go ahead
and change it by clicking on the “Video Size” options.

14. Select the “Custom Size” option from
the drop-down box.

15. Let’s make the video size the same width as the content
column of our website. Don’t worry about height, it
changes automatically.

16. Now we can copy the embed code fromYouTube.

17. On the respective page in your WordPress Dashboard,
select the “Text Tab” and them paste in the embed code
fromYouTube.
Paste the code
in this box.

18. Yay! This looks
much better!
No nasty, empty
gaps. w00t!

19. Remember, the purpose of this project is to
demonstrate your skills as a Public Relations
Professional. Don’t simply slap media elements all
over your page, and not explain their purpose. You
must explain why the respective media element
was used. What purpose did it serve? What goals
were met?

20. Umm, what was the
purpose of this video?
What goals were met?
What was the
objective? There is no
text here that explains
anything. That’s BAD!

21. Make sure you are clearly describing the media
element’s purpose directly under the media element.
Simply type a paragraph under it. Make sure you type it
under the “Text” tab.

22. Only UseVisual Tab
to Tweak
TheVisual Tab is only meant for tweaking, not inserting
your content. ONLY INSERT CONTENT WITH THE
TEXT TAB.

23. Much better!
Adding text also
made this page
SEO friendly!

24. Inserting Imagery

25. Yuck! Look at this big,
nasty gap next to this
image. Why is this image
so small? This looks
unprofessional. Let’s fix it!

26. When you are
uploading a new
image, this is the
perfect time to add
captions to the
photo. Don’t leave it
blank.
Oh no! This is
not the right
image size. It
needs to be at
least as wide as
our column.

27. First, let’s type our
caption in the
Caption Box.
Remember to
answer the 5Ws.
Don’t forget the
photo credit.
You can copy
and paste the
caption into the
description box
too.

28. For the “Size” drop-down box,
we want to make sure our image
is just a size bigger than our
column size. In our case, our
column is 600 pixels wide, so we
will select the Large option from
our drop down box.
You don’t want it to be too
large. That will make the image
load very slowly, and that is bad
for SEO.

29. Now that we have inserted our image, let’s click on the
“Visual Tab”.

30. Move your mouse over the image, and you should see
an “Edit Image” icon appear in the upper left hand
corner. Go ahead and click on this button.

31. Oh no! This is
not the right
size. Let’s make
it the same size
as our column.
In the dialog screen that appears, click on the
“Advanced Settings” tab at the top.

32. Change the
“Width” size to
match the size of
your column.
Delete anything
that’s in the
Height box and
leave it empty.

33. Scroll down, and click on the “Update” button.

34. Click the “Update” button to update this page.

35. Yay, this looks
much better. No
empty, nasty
gaps.

36. Inserting Text From Word

37. Don’t simply link your audience to a document.
That’s lazy, and will also hurt your page rank. Take
the text from the document, and paste it onto the
page.

38. Yuck! Look at
this big, nasty
gap in our text.
This looks
Unprofessional!
Yuck! Triple
Spacing? This
looks ugly. Let’s
do this the right
way!

39. Copy your text from Microsoft Word.

40. Paste the text on its respective page under the “Text”
tab. DO NOT PASTE UNDERVISUAL TAB. THE
VISUAL TAB WILL SCREW UPYOUR FORMATTING.

41. Make sure you
get rid of any
unnecessary
spaces.

42. To Tweak your text (bold, italicize, link, underline), click
on the “Visual” tab.

43. Make sure any subheadings you have are bolded. There
should not be any spaces under your subheadings.

44. Click the “Update” button when you are finished.

45. Go to the page you just edited. Make sure that all of
the text is aligned to the left, and not centered. Verify
there are no awkward spaces, or gaps.

46. Insert the
remaining content
into your website
using the guidance
given to you from
this lesson.

47. Remember
Big empty gaps are your enemy. FILL THE PAGE!