Layout of Admin Interface, Professional Website

The first step in setting up your professional website is walking through the setup wizard, which helps you build the basic foundation of your website and setup some of the configuration settings. Everything seems alright, the wizard interface is simple. But when you are finished with the wizard and taken to the next screen, the main page of the Administrative Interface, it might seem daunting and you will probably ask yourself: What should I do now? I think one of the biggest reasons it may seem complicated is because there are so many things you can do with the system.

You may want to read or watch a tutorial and learn what to do next; these tutorials are accessible from the main website (Support). However, if you are like me, you just want to “dive in” and figure it out yourself.

The rest of this blog will discuss how to understand the menus and structure of some of the pages, which should help you figure things out.

The basic navigation/functionality structure is based on three separate menus.

  • Top menu in black, which represents all of the different sections or pages that appear on your website. To read, create, update, delete, or hide content for a particular section, click on the menu link.
  • Left menu in blue, which has links for all the functionality and configuration of your website.
  • Right panel in green, which displays functions relevant to the particular section or interface you are working with.

As you work through the development of your pages, accessing them by the top black menu, there are some common threads and structure in the pages.

All of the pages have the following header:

  • A layout option. This is where you can choose between a tabular or page layout for the related section. You can learn more about this option by viewing a previous blog: Page and Table Layouts.
  • A display Social Media checkbox. You may decide to include social media links (Google + and Facebook) to appear on a page for the related section.
  • Preview Website Button. You can preview how a page is going to look by clicking on this button, and you must click on this button to design a page with the page layout option. The page that appears also has functionality to develop the style and layout of your tables too.
  • Understanding the Use of… By checking on this box, you will get a detailed description of each field used in a particular section.

I will discuss the structure of the pages based on my favorite acronym CRUD, which represents Creating, Reading, Updating, and Deleting records. The READ page will always be the one that appears when you click on the top menu.

The experiences interface (employment, education, and interests) is built with the same structure:

  • The READ page is structured like a resume. There are links to create, update, and delete elements. You can drag and drop elements into a sort order. The green menu has tabs for Navigation, Content, and Space. The navigation tab is used to jump to specific elements on the page. The content tab is used to help with the use and frequency of action verbs. The space tab is used to manage space allocation for uploaded files.
  • The UPDATE and CREATE pages for an employment responsibility or education project or an interest has functionality to add basic content and interactive elements. You can learn more about these interactive elements by reading a previous blog Experience Section.
  • The DELETE page will prompt you whether you are sure you want to delete a record and any related files.

The READ page for the portfolio and blog pages have a header element where you can describe an objective and configure settings. The page also has an interface to CREATE individual elements and has links to UPDATE and DELETE items.

The rest of the pages (Publications, IT Skills, Certifications, Languages, and References) are built with the objective of implementing CRUD effectively on a single page, so as you work with related records, it never feels like you leave the page. This should make managing your content seem much faster and more efficient. Moreover, as we start to develop mobile applications, we will use this same approach.

TheProfessionalWebsite provides a professional website service which has an administrative interface described in the above discussion.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s