Figure Example Container and Element Page WordPress Once you are logged in you should be directed to the dashboard shown in Figure 16. Figure WordPress Dashboard From the dashboard, you can access everything from individual pages, to media and various settings. If you would like to access any of the pages you have created or would like to create a new one, click the “Pages” icon on the left bar. If you would like to add, or edit any media (i.e., photos and videos) click on the “Media” icon on the left bar. If you would like to customize the Avada theme, click on the “Appearance” icon on the left bar. Accessing Any Photos or Videos Click on the “Media” tab on the left-hand side of the page shown in Figure 17. Figure WordPress Side Bar You should now be redirected to your media library containing any photos or videos you have previously uploaded Figure Upload Media Page In order to add a new photo, click the “Add New” button shown in the top left corner of Figure 18, and then either drag and drop your photo into the box, or
Let’s edit the top box. Select the paintbrush next to the top box that says “Dr. Blaise Figure Avada Flip Box Settings Figure 45 shows the “Flip Box” edit pane. The “Flip Box Frontside Heading” will be the main title and can be edited. The “Flip Box Backside Heading” will appear when the mouse rolls over the flip box and it flips over. Figure Avada Flip Box Backside Content Editor down a bit, we have an editable text box like the one in Figure 46. This is the content that will appear on the back of the flip box. Edit it as needed. the changes to this individual flip box save the changes to the overall flip box element. update the page to view the changes. Modals and How We Are Using Them The concept of modals is used to highlight content and make them a predominant feature on the page, but only when an such as a button press, triggers the modal to show. The only use of modals within our site right now, is on the publication and patents page. When you want to trigger a modal to show, you need to create a button to trigger the modal to show. Consider the following example in Figure 47. Figure Avada Modal Button Example This is a button that currently triggers a modal to show. This button shows Figure 48. Figure Avada Modal Example
Content Management System (CMS) and switches to the new Ensemble CMS. The previous version of the VTCDD site will continue to be hosted by the university, however, our client will not be able to make any changes. For that reason, we shifted our project timeline back approximately two weeks so that we can iteratively update the site based on the client’s preferences. B.1.1 Project Preparation Before we could begin developing, we needed a better insight into the structure of the old website and all of the pages that needed to be recreated. To achieve this, we used a PHP web crawler to crawl within the vtcdd.science.vt.edu domain and create a map of all site pages and their interconnectivity. This revealed pages that were not as easily accessible as the client originally intended and have since been amended. B.1.2 Page Migration In order to fully migrate the site, we needed to first find all of the content and pages. To do this, we used a web crawler that searched through the entire site and found all of the pages. From the web crawler, we were able to generate a list of the URL’s for each page. The next step was to split up the page migrations between the team; see Appendix D. The old site contained much content, including pictures and documents. We provided our client with a Google folder to upload all of the content. This gave us full quality versions of the content. During the migration, we were able to restructure some of the data on the pages. On the old site, there were multiple columns on a page with an overwhelming amount of text. We were able to find more innovative ways to display the content in a less overwhelming manner. This included using accordions to hide and split up content. We also used modals, which, when clicked, present a popup with more information. This restructuring gave the site a much better flow.