wordpress professional content implementation
DESCRIPTION
How to implement professionally designed and sized images and videos in WordPress. Originally developed by Erika Barker.TRANSCRIPT
![Page 1: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/1.jpg)
Content Implementation
![Page 2: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/2.jpg)
BIG EMPTY GAPS ARE
UNPROFESSIONALThis lesson will show you how to fill the page.
![Page 3: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/3.jpg)
BIG EMPTY GAPS AREUNPROFESSIONALThis 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!
![Page 4: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/4.jpg)
In Safari, click on the Safari menu and choose the “Preferences” option.
![Page 5: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/5.jpg)
Click on the Advanced tab and ensure the “Show Develop menu in menu bar” box is checked.
![Page 6: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/6.jpg)
Close out of Preferences.
![Page 7: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/7.jpg)
In Safari, select the Develop menu, and click on the “Show Web Inspector” option.
![Page 8: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/8.jpg)
You should now see the Web Inspector panel appear in Safari.
![Page 9: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/9.jpg)
Click on this hand pointing
tool in the Web Inspector Panel.
![Page 10: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/10.jpg)
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.
![Page 11: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/11.jpg)
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.
![Page 12: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/12.jpg)
In YouTube, lets click the “Share” option on the video we wish to use on our site.
![Page 13: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/13.jpg)
Oh no! This video is not the right size. Let’s go ahead and change it by clicking on the “Video Size” options.
![Page 14: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/14.jpg)
Select the “Custom Size” option from the drop-down box.
![Page 15: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/15.jpg)
Let’s make the video size the same width as the content column of our website. Don’t worry about height, it
changes automatically.
![Page 16: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/16.jpg)
Now we can copy the embed code from YouTube.
![Page 17: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/17.jpg)
On the respective page in your WordPress Dashboard, select the “Text Tab” and them paste in the embed code
from YouTube.
Paste the code in this box.
![Page 18: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/18.jpg)
Yay! This looks much better!
No nasty, empty gaps. w00t!
![Page 19: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/19.jpg)
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?
![Page 20: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/20.jpg)
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!
![Page 21: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/21.jpg)
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.
![Page 22: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/22.jpg)
Only Use Visual Tab to Tweak
The Visual Tab is only meant for tweaking, not inserting your content. ONLY INSERT CONTENT WITH THE
TEXT TAB.
![Page 23: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/23.jpg)
Much better! Adding text also made this page SEO friendly!
![Page 24: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/24.jpg)
Inserting Imagery
![Page 25: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/25.jpg)
Yuck! Look at this big, nasty gap next to this
image. Why is this image so small? This looks
unprofessional. Let’s fix it!
![Page 26: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/26.jpg)
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.
![Page 27: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/27.jpg)
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.
![Page 28: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/28.jpg)
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.
![Page 29: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/29.jpg)
Now that we have inserted our image, let’s click on the “Visual Tab”.
![Page 30: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/30.jpg)
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.
![Page 31: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/31.jpg)
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.
![Page 32: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/32.jpg)
Change the “Width” size to match the size of
your column.
Delete anything that’s in the
Height box and leave it empty.
![Page 33: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/33.jpg)
Scroll down, and click on the “Update” button.
![Page 34: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/34.jpg)
Click the “Update” button to update this page.
![Page 35: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/35.jpg)
Yay, this looks much better. No
empty, nasty gaps.
![Page 36: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/36.jpg)
Inserting Text From Word
![Page 37: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/37.jpg)
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.
![Page 38: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/38.jpg)
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!
![Page 39: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/39.jpg)
Copy your text from Microsoft Word.
![Page 40: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/40.jpg)
Paste the text on its respective page under the “Text” tab. DO NOT PASTE UNDER VISUAL TAB. THE
VISUAL TAB WILL SCREW UP YOUR FORMATTING.
![Page 41: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/41.jpg)
Make sure you get rid of any unnecessary
spaces.
![Page 42: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/42.jpg)
To Tweak your text (bold, italicize, link, underline), click on the “Visual” tab.
![Page 43: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/43.jpg)
Make sure any subheadings you have are bolded. There should not be any spaces under your subheadings.
![Page 44: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/44.jpg)
Click the “Update” button when you are finished.
![Page 45: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/45.jpg)
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.
![Page 46: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/46.jpg)
Insert the remaining content into your website using the guidance given to you from this lesson.
![Page 47: WordPress Professional Content Implementation](https://reader033.vdocuments.site/reader033/viewer/2022052410/546ce82bb4af9f702c8b5209/html5/thumbnails/47.jpg)
RememberBig empty gaps are your enemy. FILL THE PAGE!