{"id":2045,"date":"2020-03-15T16:27:31","date_gmt":"2020-03-15T16:27:31","guid":{"rendered":"http:\/\/www.revolutionsincommunication.com\/viscomm\/?page_id=2045"},"modified":"2023-10-06T13:18:20","modified_gmt":"2023-10-06T13:18:20","slug":"cms1-2","status":"publish","type":"page","link":"https:\/\/revolutionsincommunication.com\/viscomm\/cms1-2\/","title":{"rendered":""},"content":{"rendered":"<h2><span style=\"color: #800000;\"><strong>Create Pages and Posts in WordPress<br \/>\n<\/strong><\/span><\/h2>\n<div id=\"attachment_2059\" style=\"width: 252px\" class=\"wp-caption alignright\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.12.07-PM.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2059\" class=\"wp-image-2059 \" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.12.07-PM-272x300.png\" alt=\"\" width=\"242\" height=\"267\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.12.07-PM-272x300.png 272w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.12.07-PM-768x848.png 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.12.07-PM-725x800.png 725w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.12.07-PM.png 826w\" sizes=\"auto, (max-width: 242px) 100vw, 242px\" \/><\/a><p id=\"caption-attachment-2059\" class=\"wp-caption-text\"><strong>Dialogue box<\/strong> for adding images and text blocks and other items.<\/p><\/div>\n<p><em><strong>Now that you have a portfolio site up, what&#8217;s next?\u00a0 <\/strong><\/em><\/p>\n<p>Almost everything you see on a WordPress portfolio site sits on a either a page or a post.\u00a0 These are like the visible islands, and the pictures and text and video embeds and other things sit on top of them like palm trees and beach chairs.<\/p>\n<p><span style=\"color: #800000;\"><strong>Log in\u00a0<\/strong><\/span><\/p>\n<p>Use the login name and password you just created in WordPress.com.\u00a0 You will also be asked to confirm your email address.\u00a0 Then, on the left hand side, you should see a link<\/p>\n<h3><span style=\"color: #800000;\"><strong>1.2.1 Create your first post.<\/strong><\/span><\/h3>\n<p>On the Dashboard, click on &#8220;Site \/ Post \/ Add Post.&#8221;\u00a0 (You may get a set of templates for the post, which you can use, or you can just select a blank template.).<\/p>\n<p>The first thing you&#8217;ll see is a block for a headline that says <strong>&#8220;Add title.&#8221;<\/strong>\u00a0 Write something there, and then below on the right there should be a black box with a white cross. Click there and you&#8217;ll see a Dialogue box.\u00a0 If you click on the image icon, it will give you some choices.<\/p>\n<ol>\n<li>Upload from your computer. OR<\/li>\n<li>Media library, to place images already uploaded OR<\/li>\n<li>URL for inserting pictures from other sites without having to download\u00a0 and upload them.<\/li>\n<\/ol>\n<p><strong style=\"color: #800000;\">Make a text block:\u00a0 <\/strong><\/p>\n<p><span style=\"color: #000000;\">While still highlighting the picture area, click on the black square again and add a text block, represented in the dialogue box with a paragraph sign. Then, if you click on the picture again, the toolbar will show up, and you can use the text flow button to direct text flow around a picture, and also a link button that lets you\u00a0 link the photo to other web sites or to itself. Linking a photo to the media file, that is, to itself, lets you make the photo small on the page but clickable for enlarging. This is actually very useful.\u00a0 \u00a0 \u00a0<\/span><\/p>\n<h3><span style=\"color: #800000;\"><strong>1.2.2 Upload an image (jpg or png format) to your portfolio site: \u00a0 \u00a0\u00a0<\/strong><\/span><\/h3>\n<div id=\"attachment_489\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2016\/12\/InsertMedia.CMS_.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-489\" class=\"wp-image-489 size-medium\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2016\/12\/InsertMedia.CMS_-300x228.jpg\" alt=\"\" width=\"300\" height=\"228\" border=\"1\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2016\/12\/InsertMedia.CMS_-300x228.jpg 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2016\/12\/InsertMedia.CMS_.jpg 678w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-489\" class=\"wp-caption-text\">Insert media dialogue box, WordPress Content Management System<\/p><\/div>\n<ol>\n<li>In a WordPress system, you have to create a page or a post \u00a0before you can place a photo.\u00a0 (You already did this )\u00a0 So, open or create a\u00a0 page or post\u00a0 in WordPress.<\/li>\n<li>Look for a the \u00a0&#8220;add media&#8221; button in the upper left. Sometimes it will be inside a circle or a square with a cross.\u00a0 Once you click on the button \u00a0you will see a dialogue box for &#8220;insert media.&#8221;<\/li>\n<li>\u00a0Select one of several ways to add the media:\n<ol>\n<li><strong>Add something<\/strong> that is already in your library (Select &#8220;Media Library&#8221; on the tab)<\/li>\n<li><strong>Upload something new<\/strong> to your library &#8212; This is the usual thing you need to do with a new web site. Click on the &#8220;Select Files&#8221; button in the middle of the box, which then brings up a browsing box that lets you find the file to upload. \u00a0Then the file is added to your Library and you can use it once or many times.<\/li>\n<li>\u00a0<strong>Link via URL\u00a0<\/strong> reference to a photo already on the web. \u00a0<em>Be careful with Wikimedia URLs<\/em>, by the way. \u00a0Usually you need to click twice on them to get to the Uploadable page ( &#8220;https:\/\/upload.wikimedia.org&#8221; ) \u00a0 NOT this: \u00a0https:\/\/en.wikipedia.org\/wiki\/George_Washington#\/media\/File:Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg<a href=\"https:\/\/www.revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/8b29516v.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-1964\" src=\"https:\/\/www.revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/8b29516v-241x300.jpg\" alt=\"\" width=\"156\" height=\"195\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/8b29516v-241x300.jpg 241w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/8b29516v-768x958.jpg 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/8b29516v-641x800.jpg 641w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/8b29516v.jpg 821w\" sizes=\"auto, (max-width: 156px) 100vw, 156px\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<li><strong>Try this<\/strong> with a public domain photo such as the famous\u00a0<a href=\"https:\/\/www.loc.gov\/item\/2017762891\/\"> &#8220;Migrant Mother&#8221;\u00a0 photo by Dorothea Lange<\/a>. The photo is at\u00a0 the Library of Congress and is available in a variety of sizes. <strong>Select one of the &#8220;jpg&#8221; formats, which are less than 400k.\u00a0<\/strong> The 58 mb &#8220;tiff&#8221; version of the photo is too big, and not the right format.<\/li>\n<\/ol>\n<h3><strong><span style=\"color: #800000;\">1.2.3 Design &amp; customize your site\u00a0<\/span><br \/>\n<\/strong><\/h3>\n<div id=\"attachment_2051\" style=\"width: 268px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/FirstScreenA-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2051\" class=\"wp-image-2051 \" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/FirstScreenA-300x233.jpg\" alt=\"\" width=\"258\" height=\"200\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/FirstScreenA-300x233.jpg 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/FirstScreenA-1024x795.jpg 1024w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/FirstScreenA-768x596.jpg 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/FirstScreenA-1536x1193.jpg 1536w\" sizes=\"auto, (max-width: 258px) 100vw, 258px\" \/><\/a><p id=\"caption-attachment-2051\" class=\"wp-caption-text\">Design Dashboard with labels in red.<\/p><\/div>\n<ul>\n<li><strong>\u00a0Title and Header:<\/strong> If you click on &#8220;Site Identity&#8221; you can change your Title and tagline. So I have &#8220;Your site&#8221; above and Im going to change that in Site Identity.<\/li>\n<li><strong>Homepage Settings:\u00a0 <\/strong>Select &#8220;Your latest posts.&#8221; Don&#8217;t leave it on &#8220;static page.&#8221;\u00a0 This can be changed later but it&#8217;s much easier to start this way.<\/li>\n<li><strong>Colors &amp; Backgrounds : <\/strong>The temptation is to use loud colors,\u00a0 but the most basic rule is legibility. Your site should be easy to read, and the design should highlight but not take away from the content.\u00a0 For more about this first principle of legibility in graphic arts, read the short essay\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Beatrice_Warde#The_Crystal_Goblet\"> &#8220;The Crystal Goblet&#8221;<\/a> by Beatrice Warde.<\/li>\n<li><strong>Fonts: <\/strong>For now, it&#8217;s easiest just to leave these on &#8220;default.&#8221;<\/li>\n<li><strong>Menus:<\/strong>\u00a0 Be careful.\u00a0 There&#8217;s a blue button that says <em>&#8220;Cr<a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/DontClick.NewMenu.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1845 alignright\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/DontClick.NewMenu-188x300.jpg\" alt=\"\" width=\"140\" height=\"223\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/DontClick.NewMenu-188x300.jpg 188w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/DontClick.NewMenu-642x1024.jpg 642w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/DontClick.NewMenu-502x800.jpg 502w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/DontClick.NewMenu.jpg 735w\" sizes=\"auto, (max-width: 140px) 100vw, 140px\" \/><\/a>eate New\u00a0 Menu&#8221;<\/em> and you <strong>don&#8217;t<\/strong> want to click on it (yet).\u00a0 At this point what you want is a new menu <strong><em>item\u00a0<\/em><\/strong><em> (not a whole new menu). <\/em>So just click\u00a0 the &#8220;Primary&#8221; menu and you&#8217;ll see the menu items.<\/li>\n<li>The procedure for managing your menus is <a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wpmenus\/\">in section 1.3 (next)<\/a> and many students find his part perplexing .<\/li>\n<\/ul>\n<p><span style=\"color: #800000;\"><strong>What could possibly go wrong?\u00a0 \u00a0<\/strong><\/span><\/p>\n<p><strong><em>Photos not showing?\u00a0<\/em><\/strong><\/p>\n<p style=\"padding-left: 40px;\"><strong>Format<\/strong> &#8212; Are you sure you saved your image in the .jpg, .gif or .png formats?\u00a0 The gimp format (.cfx) and photoshop format (.psd) and other formats like the .tiff format wont show up on a web page. The format can be changed by pulling down the dialogue box:\u00a0 In <span style=\"color: #993300;\"><span style=\"color: #000000;\">Gimp<\/span><em> File\/export <\/em><\/span>\u00a0or\u00a0 in Photoshop\u00a0 \u00a0 <span style=\"color: #993300;\"><em>File\/save as\u00a0\u00a0<\/em><\/span><\/p>\n<p style=\"padding-left: 40px;\"><strong>Size Optimization<\/strong> &#8212; Is the image too big?\u00a0 It should be somewhere between 50 and 600 kilobytes.\u00a0 Images that are several megabytes will not load on your web page.\u00a0 Check your image size when you save a\u00a0 document as a jpg and choose the quality of the file. (Better quality means a larger file size, lower quality means it is easier to display on the web).<\/p>\n<div id=\"attachment_2061\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.31.16-PM.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2061\" class=\"wp-image-2061 size-medium\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.31.16-PM-300x150.png\" alt=\"\" width=\"300\" height=\"150\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.31.16-PM-300x150.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.31.16-PM-1024x510.png 1024w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.31.16-PM-768x383.png 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.31.16-PM-800x399.png 800w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-15-at-2.31.16-PM.png 1332w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-2061\" class=\"wp-caption-text\">Photoshop: Image \/ Image Size dialogue box. Its important to keep your images around 500 k or less for the best accessibility.<\/p><\/div>\n<p style=\"padding-left: 40px;\">Here&#8217;s the photoshop image size dialogue box.\u00a0 Notice\u00a0 that\u00a0 the\u00a0 file\u00a0 size\u00a0 is\u00a0 14\u00a0 mb,\u00a0 which\u00a0 is \u00a0way too big.<\/p>\n<div id=\"attachment_3473\" style=\"width: 234px\" class=\"wp-caption alignright\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-06-at-9.08.59-AM.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3473\" class=\"wp-image-3473\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-06-at-9.08.59-AM-300x251.png\" alt=\"\" width=\"224\" height=\"187\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-06-at-9.08.59-AM-300x251.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-06-at-9.08.59-AM.png 768w\" sizes=\"auto, (max-width: 224px) 100vw, 224px\" \/><\/a><p id=\"caption-attachment-3473\" class=\"wp-caption-text\">GIMP: Image \/ Scale Image opens this dialogue box.<\/p><\/div>\n<p style=\"padding-left: 40px;\">You can change this by changing the resolution. First, save your original.<\/p>\n<p style=\"padding-left: 40px;\"><strong>Photoshop<\/strong>:\u00a0 In the &#8220;Resolution&#8221; area of the Image Size dialogue box,\u00a0 type in &#8220;72&#8221; (instead of 144) which is the appropriate size for web display. You can also change the dimensions of the file from (in this case) 17.75 inches wide to and 6 inches wide, which makes the height 4.5 inches.<\/p>\n<p style=\"padding-left: 40px;\">The 14 mb file is now a 411 k file, which is an optimal size for web display.<\/p>\n<p style=\"padding-left: 40px;\"><strong>GIMP:<\/strong> Change the Width and Height to around 5 x 6 and change the X. and Y resolution from 144 to 72. To read the overall size open Image \/ Image Properties.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p><span style=\"color: #800000;\"><strong>WordPress Themes and other notes<br \/>\n<\/strong><\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>You can change &#8220;themes&#8221; at any time. That&#8217;s one of the options in the &#8220;Customizer.&#8221;\u00a0<\/strong> If you use a theme that allows a sidebar (like Colinear), you&#8217;ll have room for widgets and other interesting items. Then you can select one or two sidebars to the left or right.<\/li>\n<li><strong>Widgets<\/strong> are another place where photos and text and links may be placed. These are placed from the &#8220;Customizer&#8221; and can be found in the sidebars and footers.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"color: #800000;\"><strong>Other CMS systems<br \/>\n<\/strong><\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>WordPress<\/strong> is open-source CMS software. Anyone can use it any time on any platform.<\/li>\n<li><strong>WordPress.com is a &#8220;freemium&#8221; service<\/strong> (free + premium) that uses WordPress CMS software.\u00a0 You start for free and buy add-ons.\u00a0 It&#8217;s a good way to learn, but eventually you&#8217;ll want to pay a monthly fee for a full service web host.<\/li>\n<li><strong>WordPress<\/strong> CMS software is available to run on most web hosting services, such as Bluehost, GoDaddy, HostGator, Dreamhost, Amazon and many, many others.\u00a0 This is the usual route for professionals and the cost runs from $8 a month on up.\u00a0\u00a0 <strong><br \/>\n<\/strong><\/li>\n<li><strong>Other\u00a0 &#8220;freemium&#8221;\u00a0 CMS hosting systems<\/strong> you may like, such as\u00a0 Wix.com, blogger.com or squarespace.com They may be useful for simple portfolio presentations, but they lack the flexibility for\u00a0 extensive professional use.<\/li>\n<li><strong>Other CMS applications,<\/strong> aside from WordPress, include Drupal,\u00a0 ZenCart, Joomla, and others. Many web hosting services also allow you to run other CMS applications.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Create Pages and Posts in WordPress Now that you have a portfolio site up, what&#8217;s next?\u00a0 Almost everything you see on a WordPress portfolio site sits on a either a page or a post.\u00a0 These are like the visible islands, &hellip; <a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/cms1-2\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width-page.php","meta":{"nf_dc_page":"","footnotes":""},"class_list":["post-2045","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/2045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/comments?post=2045"}],"version-history":[{"count":5,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/2045\/revisions"}],"predecessor-version":[{"id":3475,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/2045\/revisions\/3475"}],"wp:attachment":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/media?parent=2045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}