EX2 – Web and Graphic Design Using the Elementor Plugin for WordPress

by carmichaleain PSAD:WT, Year 2on Posted on

Changing Site Settings:

Global colours:

Changing the global colours on Elementor will ensure that you are using the same colour palette throughout your blog when you use Elementor. First we chose a colour palette (Fig 1.) from Adobe colour.

Fig 1. Colour palette chosen from Adobe colour.

From choosing our palette, we then changed the global colours on our site settings (shown in vid 1).

Vid 1. Changing the global colours in Elementor.

Global fonts:

We then chose a font we preferred and changed that under global fonts (underneath global colours) (Fig 2).

Fig 2. Changing global fonts in Elementor.

Choosing a structure and adding an image:

When you click on the + button you are presented with structure options to choose for your section (shown in fig 4.)

Fig 4. Structure options for sections in Elementor.

Once chosen, to add an image you drag the widget option that says image from the left hand side and choose an image for the section and you are then able to resize it if you wish to. You can also add a link to the image, so it is clickable on your blog.

Fig 5. Medium large image on Elementor in a one column structure.

Below is a video showing the above:

Vid 2. Video showing the process of choosing a structure and inserting an image with a link.

Icons and shape dividers:

Elementor also gives you the option of using icons and creating a shape divider for the section (Fig 6).

Fig 6. A section in Elementor that has both icons and a shape divider.

Below is a video showing how to create a shape divider and icons and change the colour using global colours.

Vid 3. Video showing how to use the shape divider tool and icon widget.

Spacers and dividers:

There is also the option of using a divider in elementor. You are given several options on the appearance of your divider to suit the theme.

Fig 7. Options on type of dividers in Elementor.
Fig 8. The curly option on Elementor.

There is also the option of adding a spacer, which will add a block of blank space to the page/post.

Fig 9. A spacer in Elementor.

Below is a video showing dividers and blank spaces in elementor:

Vid 4. Video showing spacers and dividers in Elementor.

Item 2:

Fig 10. My mood board for the portfolio.

My portfolio assessment is going to have the topic of advice/blog for new parents, with the aim to create an honest blog on the difficulties of being a new parent. With my mood board I have included the font that will be used for my portfolio, colour scheme with indication on what type of illustrations I will be including, colours with HEX codes and inspiration from two current blogs on parenthood (Welton V., 2012) (Not listed L., 2018).

References:

Not listed, L. (2018) Laura’s lovely blog. Available Online: https://www.laurasummers.co.uk/ [Accessed: 08.12.22]

Welton V. (2012) Verily Victoria Vocalises. Available Online: https://www.vevivos.com/ [Accessed: 08.12.22]