Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Creating WordPress Sites in 2 Hours
1. Build a WordPress Site
A Real Life Example:
Create a Fully Functional WP
Business Web Site from Scratch
SoftUni Team
Technical Trainers
Software University
http://softuni.bg
2. 2
1. Site Requirements
2. Site Structure
3. Home Page
4. News Page
5. Projects Page
6. About Page
7. Contacts Page
Table of Contents
4. 4
Site Prototype – Home Page
Home
Slider
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Footer
Who We Are? Latest News Latest Projects
5. 5
Site Prototype – News Page
News
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Footer
News Title
Featured
Image
More text, more text …
Some text
here …
News Title
… …
News Title
Featured
Image
More text, more text …
Some text
here …
News Title
… …
News Title
Featured
Image
More text, more text …
Some text
here …
News Title
… …
6. 6
Site Prototype – Projects Page
Projects
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Footer
Project #1
Icon
Short description …
Short description …
Short description …
Project #2
Short description …
Short description …
Short description …
Project #3
Short description …
Short description …
Short description …
Icon Icon
7. 7
Site Prototype – Partners Page
Partners
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Footer
Partner #1
Logo
Short description …
Short description …
Short description …
Partner #2
Logo
Short description …
Short description …
Short description …
Partner #3
Logo
Short description …
Short description …
Short description …
Partner #4
Logo
Short description …
Short description …
Short description …
8. 8
Site Prototype – About Page
About
About Us
Some text … Some text … Some text … Some text … Some text … Some text … Some
text … Some text … Some text … Some text … Some text … Some text … Some …
Mission
Some text … Some text …
Initiatives
Some text … Some text …
Meet the Team
Photo Person Name
Some text
Photo Person Name
Some text
Photo Person Name
Some text
9. 9
Site Prototype – Contacts Page
Contacts
Contacts Us
Address,
Phone number,
Facebook, …
Leave a Message
Map
10. 10
Site Prototype – Project #1
Project #1
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Footer
Project #1 – Free Training Content for Developers
Description of the project …
Description of the project …
Description of the project …
Description of the project …
Description of the project …
Icon
11. 11
Site Prototype – Project #2
Project #2
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Footer
Project #2 – Free Programming Courses for Beginners
Description of the project …
Description of the project …
Description of the project …
Description of the project …
Description of the project …
Icon
12. 12
Site Prototype – Project #3
Project #3
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Footer
Project #3 – School Profession "Application Developer"
Description of the project …
Description of the project …
Description of the project …
Description of the project …
Description of the project …
Icon
13. 13
Site Prototype – Project #4
Project #4
Top Menu: [Home] [News] [Projects] [About] [Contacts]
Footer
Project #4 – Trainings for School Teachers
Description of the project …
Description of the project …
Description of the project …
Description of the project …
Description of the project …
Icon
15. 15
Install a new WordPress instance
In your hosting environment
Use Softaculous from your cPanel
administration
Or install a local WordPress
instance in XAMPP
Create a new MySQL database
Extract wordpress-4.8.1.zip in
XAMPP / htdocs / {site-name}
Install WordPress
16. 16
Purchase your own Web hosting
Or register for a free Web hosting with cPanel from
https://profreehost.com
Web Hosting and cPanel
17. 17
Managing files and folders from cPanel
Managing MySQL databases:
Using cPanel
20. 20
Choose, install and configure a WP theme
Free theme low budget, limited functionality
Paid theme higher budget, rich functionality
How to choose a WP theme?
Browse around and see the demos
In our demo, we choose:
"Sydney" a free WP theme
https://athemes.com/theme/sydney/
Choose a WP Theme
21. 21
Install WP plugins that you will definitely use
Elementor – the visual page builder
Install WP Plugins: Elementor
22. 22
Duplicate Page
Duplicate posts and pages
Create content faster
Anywhere Elementor
Create page templates
For inserting in the
sidebar / footer widgets
Using short-codes
Install More WP Plugins
23. 23
Create the site pages:
Home
News
Projects
Project #1, Project #2,
Project #3, Project #4
About
Partners
Contacts
Create Site Pages
25. 25
Put some sample content
(pages and posts)
Empty blog is hard to be
customized!
Insert sample content in
all your pages
Add some posts (news)
Lorem Ipsum generator:
http://lipsum.com
Insert Sample Content
28. 28
Dark color theme (default in Sydney WP theme)
Dark backgrounds in header + footer + slider (black / dark grey)
Bright colors in header + footer + logo (white / orange / light grey)
Light color scheme (custom colors in Sydney WP theme)
Bright backgrounds / dark colors in header + footer + logo + slider
Decide on Color Theme
29. 29
Customize the theme logos
Header: horizontal logo
Transparent, height = 200px
Site icon: square logo
Transparent, 512px * 512px
Customize theme colors
Match the logo colors /
company colors
Site Logo and Colors
35. 35
Create a list of images
for the page headers
You may crop images
from your site slider
Header Media Images
36. 36
Customize the sidebar and footer widgets
Sidebar and Footer Widgets
37. 37
Use "Anywhere Elementor" to create
EA template for the "Contacts" footer (icons + headings + texts)
EA template for the "Find Us" footer (social icons widget)
Create the Site Footer
41. 41
Customize the global fonts and colors
in Elementor
Setup the "Elementor" Page Builder: Colors
42. 42
Add a spacer or top-margin for the section
Add a 3-column layout
About (heading + icon + text)
Projects (heading + icon +
subheadings + texts + button)
News (heading + post loop
widget)
The Home Page Layout
58. 58
Setup Contact Form 7
Make Contact Form 7 Responsive
Save the template from
"Contacts" EA Template
Prepare the "Contacts" Page
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7-form select {
width: 98%;}
59. 59
Insert the template into the "Contacts" page
Build the "Contacts" Page
60. 60
How to create a WordPress site?
1. Describe the site requirements and
create a prototype
2. Create the site structure: theme,
layouts, pages, menus, widgets
3. Build the pages: home page, news
page, projects pages, about page,
contacts page, etc.
Summary
62. License
This course (slides, examples, demos, videos, homework, etc.)
is licensed under the "Creative Commons Attribution-
NonCommercial-ShareAlike 4.0 International" license
62
63. Free Trainings @ Software University
Software University – High-Quality Education,
Profession and Job for Software Developers
softuni.bg
Software University Foundation
softuni.org
Software University @ Facebook
facebook.com/SoftwareUniversity
Software University Forums
forum.softuni.bg