PWA with WordPress Without Coding — Part 5/6

The Home Page

Now we will complete the site. I won’t go into the basics of Elementor. This video has done a better job of it than I can.

How to Create a Responsive WordPress Website with Elementor + Astra Theme

I will describe the different elements of my layout:

The header image was implemented by a simple image element

The header image was implemented by a simple image element

Mountain shape divider was used as shape divider

• Mountain shape section divider was used for both on top and bottom ends of alternate sections
• Color was matched to make it look consistent with the other section

We find this in the style option of the section element

Text and heading elements were used from the elementor default elements

Text and Heading elements were used from the Elementor default elements. I love Montserrat family for text and Bree-Serif for headings. They are extremely readable fonts.

The Phone Button contains a tel: element

The phone button URL:
Just like we use `mailto:` for invoking email actions, we use `tel:` for invoking telephone actions. This is called a URI Scheme. For a list of all available schemes,
visit: https://www.iana.org/assignments/uri-schemes/uri-schemes.xml

The table was implemented with Google Sheets

I implemented the table with Google Sheets, took a screenshot, processed it with tinypng, and added it to the layout as a simple image. Changed border and shadow properties to get the desired effect:

Border and Box Shadow properties are available in the styling options of the image element

The post carousel was implemented with an element from Livemesh plugin for Elementor. I will eventually alter the post query to control which posts to display on the homepage and which not

Livemesh provides a simple and configurable posts carousel element

For the map, I used the default google maps plugin from Elementor free elements.

Elementor elements have a simple-to-use google maps plugin

By arranging the above elements, I was able to implement my design.

• Astra Theme takes care of changing header and footer as the display size changes
• We implemented a single-column mobile-first content with Elementor Page Builder. It scales well with resolution up to 1080p
• This builder can implement any design that we can think of.

Now we will configure the PWA with 3 simple steps.

1. Navigate to Dashboard -> Settings -> SuperPWA

Settings -> SuperPWA

2. Customize your PWA with provided descriptions

Settings-1

Settings-2

3. Press the Save Settings button

With steps as simple as that, our work is complete! We were able to

• Set the homepage of the PWA
• Set the page that will be displayed when the app is offline
• Set the way the app will respond to orientation changes
• Generate the entire thing with the press of a single button

In the next part of this series, we will look into our end results. We will see what we could accomplish with approximately no effort at all, and we will see the price we had to pay for this ease.

Series Index:

• Making a PWA with WordPress Without Code — Part 1/6
  Introduction
  https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-from-scratch-part-1-sans-code-69c1b9cbf955
• Making a PWA with WordPress Without Code — Part 2/6
  HTTPS On Shared Hosting
  https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-1-d1fa54d9a120
• Making a PWA with WordPress Without Code — Part 3/6
  Adding Themes and Plugins
  https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-2-14eec9349a3
• Making a PWA with WordPress Without Code — Part 4/6
  Design/Wireframing
  https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-3-1355bf8320a2
• Making a PWA with WordPress Without Code — Part 5/6
  The Home Page
  <here>
• Making a PWA with WordPress Without Code — Part 6/6
  End Results
  https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-5-8290b0077132