Implement navigation for the website Pictured above is the simple navigation for the current website iteration, due to the minimalistic approach towards creating this website there is one consistent menu at the top of the page across the website, this menu also follows the user down the page as they scroll away from the header. As displayed above, upon a user hovers their mouse over a button it highlights blue, promoting affordance to this action using a universally positive color. The font chosen is kept to a readable standard for usability purposes, all lower case characters are being used in order to promote a slightly more relaxed feel to the browsing experience. Mobile mode navigation I have customized the navigation menu in mobile mode to encompass an intuitive process for mobile users, the menu contained all the regular links from the normal sized webpage is clearly labeled 'menu' along with the burger style icon which is known as the...
Add a Contact form (12 marks) (Recommended resource: https://wordpress.org/plugins/search/contact+form/ ) Blog: Explain how the form was added and how you made it fit in with the sites look and feel. I have chosen ninjaforms to add a contact form to my contact page of the website, this specific plugin carries the simplistic design whilst also being easy to change for other needs if the site owner requires in the future. Here is the plugin incorporated onto the contact page, due to the main content theme being white is was rather easy to slot it into the page without too much worry over colour themeing, although I would like to look into making it more compact to help keep the page feeling comfortable. The main page of ninja forms interface allows for easy management of multiple types of forms. Further customization of each element making up the contact form is available, including display options, restrictions of characters allowed inside the input box as well a...
Child theme & Implementing page style with CSS In this blog, I detail how I made a child theme and used googles inspect element feature to edit and retrieve code to change my themes layout to better suit the website beyond the frameworks regular requirements. The above three images show me folder layout after setting it up to incorporate a child theme, picture 1 is of the contents inside style.css, settings my the folder wpChildTheme up like this allows it to inherit all the attributed from the selected theme, in this case "vantage". Here is the newly created child theme on the theme selection page. Above I have opened the new child theme in googles inspect element view to ideally find some code to configure the header in a more favourable position for the banner picture I have been provided with. Circled in red is some code I found that affects the padding around the heading area of the page. Next, I implemented this and played around with th...
Comments
Post a Comment