Dev Blog 6 – Interactive Elements within Elementor

Introduction 

Making webpages interactive on WordPress, using the HTML plug-in on Elementor. 

Individual Task 1 

The first task was to follow a series of instructions which involved adding an HTML widget to an Elementor webpage and pasting the code provided. The code translated into a heading which I tested in another browser to ensure the HTML worked. 

Figure 2 – Adding an HTML widget to the page to add in code.
Figure 3 – Following the code tutorial Jason provided on Canvas.
Figure 4 – Testing the code worked on a webpage preview.

Individual Task 2 

The second task was to add HTML to another widget which makes use of CSS animation. I used BB Edit and pasted in the CSS code and HTML ensuring the code was in the correct order. I then copied the code into the HTML widget and ensured to test that it worked in another browser. 

Figure 5 – Exploration of the style sheet and HTML for the development of the image slider.
Figure 6 – Using the BB Edit application to import CSS and HTML to make webpages interactive.
Figure 7 – Development of the code from the BB Edit application onto the WordPress blog using the Elementor plug-in.
Figure 8 – Testing the code worked on a webpage preview.

Individual Task 3 

The third task was to independently explore Codepen and look for other HTML codes to explore in Elementor. I found a hover asset which could be used for multiple examples on a webpage such as a heading or a call-to-action design. I followed the previous instructions on how to install the HTML into Elementor and used BB Edit to translate the code. I tested the hover asset worked in a new browser. The HTML code worked but it was stylised by the Elementor website so didn’t communicate in the same way as seen on the Codepen preview. 

Figure 9 – Exploration of CodePen, finding assets that could be utilised in the portfolio project.
Figure 10 – Using BB Edit to transfer the code from CodePen to utilise on Elementor.
Figure 11 – Importing the CSS style guide and HTML for hover asset into Elementor to be used on the webpage.
Figure 12 – Testing the hover asset on a webpage preview.

Google Experiments 

The final exercise was to explore Google Experiments and choose five examples of visual design which could be used in web design.

The Spirit

Link to The Spirit on Google Experiments – https://experiments.withgoogle.com/the-spirit

The creative design of the Spirit is a WebGL experience using the noise derivatives and curl noise to create a smoky look and feel. The fun design could potentially work in web design as well as game design. The Spirit could be used as an accessible curser, the user could utilise the design by changing the size of the output which could enhance the user experience by being fun to use but also large enough to see if the users’ vision is impaired.

Figure 13 – The Spirit concept on Google Experiments.
Figure 14 – Screenshot of the developers exploration of The Spirit.
Figure 15 – Screen recorded inspection of The Spirit on Google Experiments, which could be utilised in the portfolio project.

Sodar

Link to Sodar on Google Experiments – https://experiments.withgoogle.com/sodar

Sodar is a social distancing tool used for protection during the Covid-19 outbreak. The user can visually see what the recommended 2 metres distance looks like using a website on their phone. The design could be utilised in other aspects of web design such as virtual tours, measuring tools and directional maps. The virtual reality aspect of the design would make virtual tours more exciting, for example, a virtual reality tour of a gym may entice the user to join the club in the hope the gym offers even more exciting endeavours inside. 

Figure 16 – Sodar Google Experiment overview.
Figure 17 – Screen recording inspection of Sodar, which could be used in the portfolio project.

Hip-Hop Poetry Bot

Link to Hip Hop Poetry Bot – https://experiments.withgoogle.com/hip-hop-poetry-bot

The Hip-Hop Poetry Bot web design inspired me, the stylised project could be used for promotional marketing in a range of industries. The design emulates a static tv, this could be used as a transitional phase in promotional advertisements. 

Figure 18 – Hip Hop Poetry Bot overview on Google Experiments.
Figure 19 – Screen recording inspection of Hip Hop Poetry Bot, the styling could be used in portfolio project.

Weird Cuts

Link to Weird Cuts – https://experiments.withgoogle.com/weird-cuts

Weird Cuts is a collage-based app that invites users to experiment with photography. The design concept could be used in a brutalist style on an interactive website. The brutalist website could potentially be based around photography or other art media with captions layered over the top and other illustrations in a hectic, unorganised way to make the website stand out from others that follow design principles.

Figure 20 – Weird Cuts overview on Google Experiments.
Figure 21 – Screenshot of Weird Cut developers experiment.
Figure 22 – Screenshot of Weird Cut developers experiment.
Figure 23 – Screenshot of Weird Cut developers experiment.

Glitch

Link to Glitch on Google Experiments –

https://experiments.withgoogle.com/glitch

Glitch uses glitch effects to create exciting imagery that appears to move in a cyber-style manner, the designs could be used to promote tech brands but also make other promotions and website designs look grittier and more urban. 

Figure 24 – Glitch overview on Google Experiments.
Figure 25 – Screen recording of Glitch Google Experiment, video styling could be used in portfolio project.

Related Posts

Scroll to Top