Now I am going to edit my contact page on my website. I edited the contact form that was on my template. First, I changed all the fonts to 'Syne' and font size to 17 by clicking the text and choosing the 'Design' option in the menu that popped up, I then clicked on the 'Customize Design' button on the dialog box that showed up, in the menu I chose 'Text', which gave me options to change my text. I also changed the background colour of the column by clicking on it, clicking 'Change Background' in the pop up menu and choosing 'Colour' in the dialog box that showed up.
I then started editing the 'Contact Us' button. I changed the layout of the button by clicking on it, choosing 'Design' and choosing a different button design in the dialog box. I changed the font to Syne and size to 25 with the same 'Customize Design' process mentioned in the previous paragraph. In the 'Fill Colour and Opacity' option in the same dialog box I changed the background colour of the button to the same colour as the header and footer of my website.
I deleted the 'Contact Us' and 'Follow' headers from the footer by right clicking them and choosing 'Delete'. I also deleted the center column with everything in it using the same process. I then centered the remaining columns using the grid to drag it with my mouse. I changed the fonts to 'Syne' and size to 30. The smaller text is in the font 'Helvetica Light' to keep the consistency, yet still have variety.
I then added another column next to my contact form by right clicking the grid and choosing 'Add Column'. I clicked on the column and chose the 'Change Background' option, in the menu that showed up I chose 'Image' to upload the image that I found on Unsplash. At this point I also changed the 'Contact Us' text on the button to 'Contact Me' to keep the consistency in the contact form, I did this by clicking the 'Settings' button that showed up after clicking the 'Contact Us' button and changing the text in the dialog box that showed up. In the same box I changed the confirmation message to 'Submitted'.
I deleted all the social media text from the footer and created a social bar instead. I did this by clicking 'Add Elements' in the menu on the left and choosing 'Social' and 'Social Bar'. I chose the design that fit my website and aligned the social bar with the center of the footer. I then clicked my social bar and clicked 'Set Social Links' where I deleted all the social icons that I do not have by hovering over the icon and clicking the bin icon. After this I clicked on 'Add Icons' to add the Blogger icon. In the menu on the right I changed the link that is attached to the icons to my own Blogger and Instagram links. I dragged the page text over the grid in the footer to align them above the social bar and copyright text, so there would not be a gap where the previous social links were. I tested the links by clicking 'Preview' in the top right and clicking all the links to see if they worked.
I then checked if the mobile view was working on the Contact page. Most columns overlapped with each other, so I had to delete the column with the picture on it so that the contact form was visible. I then made every column smaller by dragging the edges along the grid.
After checking the mobile view on the Contact page I checked if my Homepage worked on mobile view. For the Homepage I had to delete the 'Portfolio' column and align the other columns together.
Comments
Post a Comment