One thing that I struggled with during the first two assignments was finding a balance between the vision in my head and the reality of what I could execute using HTML, CSS, or Bootstrap. For Assignment 3 I wanted to combat this as much as possible by having a more specific idea of what my vision was for each page before getting into the bulk of the editing. I went about accomplishing this in two ways.
While I spent time during the previous assignments perusing examples for inspiration, after being introducing to the complexities and options of WordPress I knew there was much more for me to explore. I used Google to find WordPress themes that aligned with my vision, while finding examples of WordPress websites that helped me realize what might be feasible, and inspired me. Some themes that I considered using were Eighties, Amadeus, Make, and Kale. Ultimately, I settled on Sydney because of the balance it offers between existing functionality and customization opportunities, without going overboard.
I found a ton of inspiration by looking at the personal websites of individuals who have won awards for their designs or have been recognized as talented web designers. While I know my skill level is far below what they could execute, these websites provided a lot of ideas for simple ways I could translate the creative ideas I had in my head to a website.
After exploring inspiration on the internet and deciding on a theme, I had a better understanding of what might be possible in making my ideas come to life. Before setting up my website, I tried to physically plan out my site as much as I could. I am a visual person, so I made print-outs of website inspiration I had come across and pictures or content I knew I would include. Much like in my high school art classes, I cut out and arranged the pieces until I had a better idea of how to approach my design.
After installing my theme, I set up my pages, menus, and child theme style.css and functions.php. documents. The first step I took to adapting the Sydney theme to my project was to edit features in the Customizer tool. Under Site title/tagline/logo, I named my site “Mary Craig Lindgren,” and uploaded my revamped logo and favicon. I chose to continue using my initial logo design for now because it is a simple element on a website that could look busy at times. I decided on a color scheme of white, black, blue (#007AFF), charcoal (#373F51), and light peach (#FBD1AZ). This was a decision I made during my design process so I simply updated my logo and favicon to suit the new color scheme.
For Header Media for my remaining pages I decided to upload a variety of images and select the randomization feature to determine which image would display. I am currently re-organizing and editing my photo library, but when I complete that project I will be able to better select more specific images for various topics within the site and I might choose to re-evaluate the header image choices for each page at that point. I chose to keep the theme’s menu presets, with a sticky menu and inline menu style.
I selected the classic alternative option for my blog layout. This affects the layout of the featured images, title, category, post info, and excerpt. I also shortened the excerpt link to 30 words. I chose to do this because I have included a featured image for most of my posts, and they are already large on my screen to have a visual impact. I selected the option to hide featured images on single posts, which was very helpful in balancing between displaying the featured image on the blog page and having the main image display with the link through to Google Maps on the post page.
Fonts & Colors
I played around on Google Fonts to find a good complement to the font I found during Assignment 1, Karla, that I wanted to continue using. Based on Google Font’s recommended pairs, I selected Montserrat Light as my body font, while using Karla for headings. After looking around on Google I discovered how to add Google Fonts to a child theme, and connected the Google Font Library to my functions.php document. I also adjusted the font sizes slightly. Below is the color palette I created based on my bootstrap color palette. I primarily rely on black and white as the background colors, using charcoal as my font color to soften from the pure black. I use Azure as my accent color with font links, buttons, and other features. Tuscan only appears lightly, as a secondary accent color in areas such as hovering over the menu links.
Footer & Widgets
I chose to remove the sidebar option for now, because it does not fit with my overall layout. Therefore, the widgets that I edited only applied to the Footer page. I selected to only have one footer widget area, and used the BB Icon widget to upload my social icons linking to the relevant websites. The BB Icon Widget is a component of the Body Builder Plugin, which I downloaded to complement my customization efforts. I have also included the widgets Akismet spam block counter and google analytics stats, which display below the social media icons.
I structured my already created pages into the proper menu order. I decided to rename my About page with my name, since it seems intuitive that visitors who want to learn more about me would try selecting that menu option. Because my logo uses my initials, I wanted a way to subtly incorporate my full name into the home page, and this seemed like a good way to meet that need. This page is where you can find a downloadable pdf of my resumé and a link to my interactive bootstrap resumé site. After this, I have my portfolio and blog pages, which are the two main content areas of the site.
The portfolio houses samples of my research and writing, new media work such as this completion page, and an image gallery. The google form page drops down from the blog menu because I used the google form to ask visitors to my site for any books or articles they recommend. I’m not naturally inclined to blogging but I have always loved to read and thought that sharing my reading lists and current article finds would be a good way to get my foot in the door, and the google form provides the opportunity for visitors to interact with that idea. Under my contact page I decided to use the contact form widget that I installed during last week’s lesson, so I can get practice using both methods of contact form (this or a google form).
Child Theme CSS
I included custom css to make some further changes by adding to my style.css sheet for my child theme. The text-slider class is what I used to change the font weight for Montserrat in the menu to a lighter weight. I also removed the text shadow. The remaining classes were used to ensure all of my content was centered after an issue I encountered when editing my blog page. I identified what classes and ids to edit by using the google chrome developer tool magnifying glass to find the proper styles to edit.
Elementor was the final tool I used in my editing process. I enabled the elementor plugin, as well as the elementor add on plugin and several others. Below is an image of the full list of plugins activated for my site. I used elementor to configure the layouts of the majority of my pages, all but the google form and contact pages. I configured elementor options to create components of my website such as the gallery page, with over 150 images, a quick intro on my home page using icons, and the filterable gallery on my home page.
Below are screenshots of some of my favorite components of my website so far! The filterable gallery (home), things I love icons (home), skills icons (about), and number counter (about) all add fun components to my website that help my visitors get to know who I am better. The section in my about page called “What I’m learning more about” is a great place for me to keep a brief updated intro to what I’m focusing on at the moment, because I’m always going down rabbit holes of research or articles and coming across something new. I’m also excited about the writing page as a place to share that work. As an international affairs major, much of the content I’ve produced while at UGA has been papers, discussion posts, reading assignments, and other bits of writing that indicate my understanding of some theories or arguments. Because I want this to be a professional website I have less visual content to present for my academic work, but I’m excited about the layout I configured for this purpose using elementor.
Moving forward, I want to build off of this site and continue to both customize and simplify the content in a way that really reflects who I am and what my goals and interests are. After re-organizing my personal image library I plan on making the gallery a better showcase for my travel experiences. I’m also learning how to use ggplot2 and other components of R to create the kind of maps I have in mind. Ultimately I think these finishing touches will help reinforce that connection between the creative focus and the human rights focus that I discussed with Assignment 1.