{"id":106,"date":"2021-04-02T00:43:06","date_gmt":"2021-04-02T00:43:06","guid":{"rendered":"https:\/\/myweb.fiu.edu\/nrabner\/?page_id=106"},"modified":"2021-07-12T19:46:47","modified_gmt":"2021-07-12T19:46:47","slug":"5-text-links-images-and-more","status":"publish","type":"page","link":"https:\/\/myweb.fiu.edu\/casefacultytheme\/5-text-links-images-and-more\/","title":{"rendered":"5. Text, Links, Images and More"},"content":{"rendered":"\n<p>WordPress provides many options for displaying information on your pages.<\/p>\n\n\n\n<p><strong>To edit a page:<\/strong> From your Dashboard, go to Pages and choose a page. If you&#8217;re logged in to WordPress, you can also visit the live website and click the &#8220;Edit Page&#8221; option at the top.<\/p>\n\n\n\n<p>You can start typing right away, or <strong>click the &#8220;+&#8221; button<\/strong> to choose the type of content block you want to add.<\/p>\n\n\n\n<p>Be sure to <strong>click the gear icon<\/strong> in the upper right corner of the editing screen. This will give you more display options for each block and the page itself. (For CASE Faculty theme, some options are preset; be sure to preview the page as they may appear differently than in the editor.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Links and Files<\/h2>\n\n\n\n<p>You can add links to pages on your website, other websites, or files uploaded to your website.<\/p>\n\n\n\n<p><strong>To add a link,<\/strong> highlight the text and click the link icon. Open links to other websites in a new tab so visitors don&#8217;t lose your site. For ease of use and accessibility compliance, the name of the link should describe its destination: &#8220;<a rel=\"noreferrer noopener\" href=\"https:\/\/case.fiu.edu\" data-type=\"URL\" data-id=\"https:\/\/case.fiu.edu\" target=\"_blank\">Visit CASE<\/a>&#8221; or &#8220;For more information, visit <a rel=\"noreferrer noopener\" href=\"https:\/\/case.fiu.edu\" data-type=\"URL\" data-id=\"https:\/\/case.fiu.edu\" target=\"_blank\">CASE<\/a>&#8221; &#8211; NOT &#8220;<a href=\"https:\/\/case.fiu.edu\">Click here<\/a> to visit CASE.&#8221; In the last case, a screen reader might just read the name &#8220;click here&#8221; and may not tell the user where that link goes.<\/p>\n\n\n\n<p><strong>To upload a file,<\/strong> go from your Dashboard to Media and click &#8220;Add New.&#8221; Note that your MyWeb site has a storage limit of 600MB.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Blocks<\/h2>\n\n\n\n<p>Examples and descriptions of a few common blocks are below. There are many more to explore!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"#text-blocks\">Jump to Text blocks<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link\" href=\"#image-blocks\">Jump to Image blocks<\/a><\/div>\n<\/div>\n\n\n\n<span id=\"text-blocks\"><\/span><h3>Text Blocks<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Headings<\/h4>\n\n\n\n<p>Use header blocks to organize information within your page. Start with H2 and continue to H3, H4 and so on for sub-items. Maintaining an outline-style hierarchy of headers makes your page easy to navigate, and is especially important for visitors who are using assistive screen readers.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Lists<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Use the List block to add a numbered or bulleted list to the page.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Columns<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Choose the Columns block to split up your content. You can add paragraphs, images or other blocks inside the columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Consider how the page will look on a small screen such as a cell phone. Columns will stack themselves automatically for small screens.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Buttons<\/h4>\n\n\n\n<p>Note that button appearance (e.g., color) may vary from the editing screen to the live page.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Button &#8211; Good for links<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link\">&#8220;OUtline&#8221; style<\/a><\/div>\n<\/div>\n\n\n\n<span id=\"image-blocks\"><\/span><h3>Image Blocks<\/h3>\n\n\n\n<p>Guidance for adding images:<\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-26a54665-a726-421a-af24-170211fd8d03\"><li><strong>Choose an image you have rights to, <\/strong>such as one from <a rel=\"noreferrer noopener\" href=\"https:\/\/www.flickr.com\/photos\/fiu\/albums\/\" target=\"_blank\">FIU on Flickr<\/a><\/li><li><strong>Prepare the image.<\/strong> Too many large images will slow down your page&#8217;s load time. Use an editor like Photoshop or <a rel=\"noreferrer noopener\" href=\"https:\/\/pixlr.com\/\" target=\"_blank\">Pixlr (free online)<\/a> to edit your image.<ul><li><strong>Crop the image<\/strong> as needed.<\/li><li><strong>Scale the image<\/strong> to an appropriate size. 1000 pixels wide is usually more than sufficient for an image that extends the full width of this content area.<\/li><li><strong>Save the image as a JPEG<\/strong> &#8211; it&#8217;s a smaller file than a PNG. (PNG files can have transparent backgrounds, but this usually isn&#8217;t needed. Note that your MyWeb site has a storage limit of 600MB.)<\/li><\/ul><\/li><li><strong>Give the image a caption<\/strong> or alt text (invisible caption) if it&#8217;s not just for decoration. This is necessary for accessibility compliance &#8211; screen readers will read the alt text &#8211; and helps visitors understand graphic information on your website.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Image<\/h4>\n\n\n\n<p>The basic Image block, shown at right, prompts you to upload an image. Images can be resized and\/or aligned to full-width, wide-width, or to the left or right of text content.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"625\" src=\"https:\/\/myweb.fiu.edu\/nrabner\/wp-content\/uploads\/sites\/3621\/2021\/04\/mmc-campus-aerial-with-library.jpg\" alt=\"Alt text: Aerial view of the Modesto A. Maidique Campus.\" class=\"wp-image-132\" srcset=\"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-content\/uploads\/sites\/3621\/2021\/04\/mmc-campus-aerial-with-library.jpg 1000w, https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-content\/uploads\/sites\/3621\/2021\/04\/mmc-campus-aerial-with-library-300x188.jpg 300w, https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-content\/uploads\/sites\/3621\/2021\/04\/mmc-campus-aerial-with-library-768x480.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption>Example Caption: Aerial view of the Modesto A. Maidique Campus.<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull has-background-dim-20 has-background-dim is-position-center-center\" style=\"background-image:url(http:\/\/myweb.fiu.edu\/nrabner\/wp-content\/uploads\/sites\/3621\/2021\/04\/fiu-placeholder-banner-1600x800-1.jpg);background-position:40% 26%;min-height:213px;aspect-ratio:unset;\"><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-text-color\" style=\"line-height:1.1;font-size:74px;color:#fffffa\"><strong>Large Header with Heading &#8211; find in Patterns<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Gallery<\/h4>\n\n\n\n<p>Select multiple images to display together. You can choose the number of columns and display size for the images.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"188\" src=\"https:\/\/myweb.fiu.edu\/nrabner\/wp-content\/uploads\/sites\/3621\/2021\/04\/bbc-aerial-300x188.jpg\" alt=\"\" data-id=\"133\" data-full-url=\"http:\/\/myweb.fiu.edu\/nrabner\/wp-content\/uploads\/sites\/3621\/2021\/04\/bbc-aerial.jpg\" data-link=\"https:\/\/myweb.fiu.edu\/nrabner\/5-text-images-and-more\/bbc-aerial\/\" class=\"wp-image-133\" srcset=\"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-content\/uploads\/sites\/3621\/2021\/04\/bbc-aerial-300x188.jpg 300w, https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-content\/uploads\/sites\/3621\/2021\/04\/bbc-aerial-768x480.jpg 768w, https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-content\/uploads\/sites\/3621\/2021\/04\/bbc-aerial.jpg 1000w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"188\" src=\"https:\/\/myweb.fiu.edu\/nrabner\/wp-content\/uploads\/sites\/3621\/2021\/04\/mmc-campus-aerial-with-library-300x188.jpg\" alt=\"\" data-id=\"132\" data-full-url=\"http:\/\/myweb.fiu.edu\/nrabner\/wp-content\/uploads\/sites\/3621\/2021\/04\/mmc-campus-aerial-with-library.jpg\" data-link=\"https:\/\/myweb.fiu.edu\/nrabner\/5-text-images-and-more\/mmc-campus-aerial-with-library\/\" class=\"wp-image-132\" srcset=\"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-content\/uploads\/sites\/3621\/2021\/04\/mmc-campus-aerial-with-library-300x188.jpg 300w, https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-content\/uploads\/sites\/3621\/2021\/04\/mmc-campus-aerial-with-library-768x480.jpg 768w, https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-content\/uploads\/sites\/3621\/2021\/04\/mmc-campus-aerial-with-library.jpg 1000w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/myweb.fiu.edu\/casefacultytheme\/6-finish-setup\/\">Next: Finish Setup<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>WordPress provides many options for displaying information on your pages. To edit a page: From your Dashboard, go to Pages and choose a page. If you&#8217;re logged in to WordPress, you can also visit the live website and click the &#8220;Edit Page&#8221; option at the top. You can start typing right away, or click the [&hellip;]<\/p>\n","protected":false},"author":3622,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-106","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-json\/wp\/v2\/pages\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-json\/wp\/v2\/users\/3622"}],"replies":[{"embeddable":true,"href":"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":0,"href":"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-json\/wp\/v2\/pages\/106\/revisions"}],"wp:attachment":[{"href":"https:\/\/myweb.fiu.edu\/casefacultytheme\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}