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.
I will describe the different elements of my layout:
The header image was implemented by a simple image element
- 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. I love Montserrat family for text and Bree-Serif for headings. They are extremely readable fonts.
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
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:
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
For the map, I used the default google maps plugin from Elementor free elements.
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.
- Navigate to Dashboard -> Settings -> SuperPWA
2. Customize your PWA with provided descriptions
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