{"id":52,"date":"2017-10-04T01:05:57","date_gmt":"2017-10-04T01:05:57","guid":{"rendered":"http:\/\/support.isucomm.iastate.edu\/eprofiles-students\/?page_id=52"},"modified":"2017-10-04T01:05:57","modified_gmt":"2017-10-04T01:05:57","slug":"the-customize-panel","status":"publish","type":"page","link":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/the-customize-panel\/","title":{"rendered":"The Customize Panel"},"content":{"rendered":"

When editing your ePortfolio, sometimes it is hard to visualize what your website will look like from the\u00a0Dashboard<\/strong>. Something to understand about web development is that there are two “ends” of a website: the back end and front end.<\/p>\n

The\u00a0back end\u00a0<\/strong>is your dashboard where you create all of your content, such as adding pages, posts, creating menus, etc. The\u00a0front end<\/strong> is the actual website that people will interact with. It is the visual delivery of all of your content. You can edit the visual style of your ePortfolio in the\u00a0Customize Panel<\/strong>.<\/p>\n

This support article will show you how to access the Customize Panel and walk you through its features. For this article, we will be using the WordPress\u00a0Twenty Seventeen Theme\u00a0<\/strong>that comes standard with your ePortfolio. Keep in mind that each theme has different options in the Customize Panel, but the concepts and how to edit your website from here is very similar.<\/p>\n

\n

<\/a>Accessing the Customize Panel<\/h2>\n

To get to the Customize Panel, you can navigate to\u00a0appearance > customize\u00a0<\/strong>on the lefthand side of your dashboard toolbar (first image below). You can also access it from any page on your ePortfolio’s front end by selecting\u00a0Customize\u00a0<\/strong>in the top toolbar.<\/p>\n

Tip: Places in WordPress where you can change the visual appearance of your website are usually marked with a\u00a0paint brush\u00a0<\/strong>icon.<\/em><\/p>\n

\"The<\/p>\n

\"The<\/p>\n

\n

The Customize Panel Options<\/h2>\n

Once you click\u00a0Customize<\/strong>, you will be taken to the front end of your ePortfolio, but the view will be slightly different. You will see a panel with editing options appear on the left side of the screen. Here is where you can customize the visual design of your site, again varying in options with the theme you have chosen.<\/p>\n

WordPress has also made a pretty cool update. Wherever you see a\u00a0pencil icon\u00a0<\/strong>in blue on your website, that is an item that you can edit in the Customize Panel. Click the\u00a0blue pencil icon\u00a0<\/strong>next to any item you want to edit and you will automatically be directed to the corresponding spot in the panel on the left.<\/p>\n

Note: Any changes you make will not save automatically<\/strong>. Once you make a change, and only after you are satisfied, click the blue button on the top of the panel that says\u00a0Save and Publish<\/strong>.\u00a0<\/em><\/p>\n

\"The<\/p>\n

\n

Site Identity<\/h2>\n

Your\u00a0Site Identity<\/strong> is a great way to personalize your ePortfolio. You can upload an icon, logo, or image of yourself and change the title of your ePortfolio, including the tagline. Here\u00a0Cy Student\u00a0<\/strong>has created a logo and changed his ePortfolio’s name to be a cleaner, simpler title that is more reflective of his personality.<\/p>\n

To learn how to create a logo for your ePortfolio, check out this article on\u00a0Making and Uploading a Personal Logo<\/a>.<\/strong><\/p>\n

\"The<\/p>\n

\n

Colors<\/h2>\n

On your website you have the option to change the colors for some of the design elements. In the\u00a0Twenty Seventeen\u00a0<\/strong>theme pictured here, you can change the colors of your\u00a0header text<\/strong>. This will apply to\u00a0all headers\u00a0<\/em>on your ePortfolio. In this image below you can see how it changed from white to yellow in the\u00a0Site Identity<\/strong>.<\/p>\n

You can also choose a color scheme. This will apply to the background of your site. Currently it is set to light, and if you change to dark then all of the text will reverse colors.<\/p>\n

\"The<\/p>\n

\n

Header Media<\/h2>\n

Your ePortfolio comes with a “very pretty” image of a plant on a table. This is simply a default image that you can change out. In the\u00a0Header Media\u00a0<\/strong>section of the Customize Panel you can upload your own image. Simply select\u00a0Add new image<\/strong>, then upload your own photo to the media library.<\/p>\n

Pay attention to the suggested dimensions\u00a0<\/strong>in the media library. This shows you the ideal size for the image so that it fits properly within the webpage according the the theme.<\/p>\n

You can also choose to have a\u00a0Header Video<\/strong> as your homepage background (not shown). If you decide to use a background video, we suggest that you use the\u00a0insert URL\u00a0<\/strong>option and link to a YouTube or Vimeo video. The shorter the better.<\/p>\n

Note: When uploading any image, the maximum upload size is\u00a05 mb<\/strong>. If your image file size is too big, crop or export the image in a slightly lower quality to reduce the size until it meets the maximum requirement.<\/em><\/p>\n

\"The<\/p>\n

\"The<\/p>\n

\n

Menus<\/h2>\n

Probably the most important aspect of your ePortfolio is the\u00a0Navigation Menu<\/strong>. The menu is how your users, specifically your ISUComm instructor, will interact with your ePortfolio. You can create and edit menus within your\u00a0Dashboard<\/strong> in the back end (see the support article Create Menu<\/strong><\/a> for this method), but you can also create and edit menus here in the Customize Panel.<\/p>\n

Selecting\u00a0Primary Menu\u00a0<\/strong>allows you to edit the current menu in your navigation bar. You can add pages, posts, categories, custom links, or even an new menu. Drag items into an order of your choosing. Each change you make will appear in real time on your website so you can see what it will look like. This is a nice alternative to the Dashboard view because you can visualize the changes you make.<\/p>\n

\"The<\/p>\n

\"The<\/p>\n

\n

Widgets<\/h2>\n

A\u00a0Widget<\/strong>, though a funny name itself, is customizable content area in your ePortfolio. You can add Widgets in various places on your website and choose custom content to go in the\u00a0Widgetized Area<\/strong>. In this example shown below, and an option in the\u00a0Twenty Seventeen\u00a0<\/strong>theme, we will be adding a Widget to the\u00a0Footer<\/strong> (the very bottom of your website).<\/p>\n

Step 1<\/h3>\n

Select the Footer 1 option in the Customize Panel on the left.<\/p>\n

\"The<\/p>\n

\n

Step 2<\/h3>\n

Select the\u00a0Add a Widget\u00a0<\/em>box. Then choose the widget content. You have several options, and this example we are simply adding textual content using the\u00a0SiteOrigin Editor<\/em>.<\/p>\n

\"The<\/p>\n

\n

Step 3<\/h3>\n

Write your content in the rich text editor box. As you write it, you will notice it appear in realtime in your footer area.<\/p>\n

\"The<\/p>\n

\n

Step 4<\/h3>\n

In this last step, we chose to edit the\u00a0Footer 2\u00a0<\/em>section and add a\u00a0Milestone\u00a0<\/strong>widget. This can be a particular date, maybe your exam or final day to turn in your ePortfolio. A countdown will begin in your footer area as shown in the image below.<\/p>\n

\"The<\/p>\n

\n

Static Front Page<\/h2>\n

By default your ePortfolio will be set up to only display your most recent Posts\u00a0<\/strong>on your front page. One of the first things your instructor may ask you to do is to set a\u00a0Static Front Page<\/strong>. You can accomplish this in your\u00a0Dashboard<\/strong>\u00a0(see this support article on how to Set Front Page and Posts Page<\/strong><\/a>), but you can also do it here in the Customize Panel.<\/p>\n

Check the\u00a0A static page\u00a0<\/em>radio button and then choose which of your pages you would like to be the main landing page when you first go to your ePortfolio. Another way to think of the\u00a0Static Front Page\u00a0<\/em>is that it is your\u00a0Home<\/em> link.<\/p>\n

You can also select what page you want to display posts on here as well. In this example below, and the most likely scenario for your ISUComm ePortfolio, is to set the\u00a0Introduction\u00a0<\/strong>to the front page and your\u00a0Reflections\u00a0<\/strong>to your posts page.<\/p>\n

\"The<\/p>\n

\n

Theme Options<\/h2>\n

The\u00a0Twenty Seventeen\u00a0<\/strong>theme gives you the opportunity to add\u00a0four parallax sections\u00a0<\/em>on your front page through the\u00a0Theme Options\u00a0<\/strong>in the Customize Panel.<\/p>\n

Simply choose what page you want featured in each section. In Cy Student’s example<\/a><\/strong>, he chose to put his Written, Oral, Visual, and Electronic pages as his featured sections. To include the parallax image in the background for each image, simply upload a\u00a0Featured Image\u00a0<\/strong>in each specific page (this option is found on the right side of your page editor).<\/p>\n

\"The<\/p>\n

\"The<\/p>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2588,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-52","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"isu_carousel":false},"uagb_author_info":{"display_name":"Bremen","author_link":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/author\/bvance\/"},"uagb_comment_info":0,"uagb_excerpt":null,"coauthors":[],"author_meta":{"author_link":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/author\/bvance\/","display_name":"Bremen"},"relative_dates":{"created":"Posted 9 years ago","modified":"Updated 9 years ago"},"absolute_dates":{"created":"Posted on October 4, 2017","modified":"Updated on October 4, 2017"},"absolute_dates_time":{"created":"Posted on October 4, 2017 1:05 am","modified":"Updated on October 4, 2017 1:05 am"},"featured_img_caption":"","featured_img":false,"series_order":"","_links":{"self":[{"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/users\/2588"}],"replies":[{"embeddable":true,"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":1,"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/pages\/52\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/media?parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/categories?post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.isucomm.iastate.edu\/eprofiles-students\/wp-json\/wp\/v2\/tags?post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}