Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating WordPress Sites in 2 Hours

3,375 views

Published on

Creating WordPress sites in 2 hours
Guidelines by Svetlin Nakov

Published in: Education
  • Be the first to comment

Creating WordPress Sites in 2 Hours

  1. 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. 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
  3. 3. Site Requirements Gathering Requirements & Prototyping
  4. 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. 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. 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. 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. 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. 9 Site Prototype – Contacts Page Contacts Contacts Us Address, Phone number, Facebook, … Leave a Message Map
  10. 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. 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. 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. 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
  14. 14. Creating the Site Structure Typical Business Site Structure in WP
  15. 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. 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. 17  Managing files and folders from cPanel  Managing MySQL databases: Using cPanel
  18. 18. 18 Install WP using Softaculous
  19. 19. 19 Configure Site Identity + Permalinks
  20. 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. 21  Install WP plugins that you will definitely use  Elementor – the visual page builder Install WP Plugins: Elementor
  22. 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. 23  Create the site pages:  Home  News  Projects  Project #1, Project #2, Project #3, Project #4  About  Partners  Contacts Create Site Pages
  24. 24. 24 Duplicate Pages for Faster Creating
  25. 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
  26. 26. 26 Sample Content: Posts
  27. 27. 27 Create Top Menu
  28. 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. 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
  30. 30. 30 More Site Colors
  31. 31. 31 Customize Site Fonts and CSS  Make the menu font larger  The header in the slider has no background  fix this with CSS
  32. 32. 32 Customize Page Paddings & Menu Style
  33. 33. 33  Prepare slider images:  Size 1920 x 1275  Prefer own authored photos / stock photos  Add slides (images + titles + subtitles)  Customize the "call-to- action" link + text Home Page Slider
  34. 34. 34 Slider Texts: Add Shadow
  35. 35. 35  Create a list of images for the page headers  You may crop images from your site slider Header Media Images
  36. 36. 36  Customize the sidebar and footer widgets Sidebar and Footer Widgets
  37. 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
  38. 38. 38  Icons  location-arrow  phone  envelope "Contact" Us AE Template
  39. 39. 39 "Social Icons" AE Template
  40. 40. Build the "Home" Page
  41. 41. 41  Customize the global fonts and colors in Elementor Setup the "Elementor" Page Builder: Colors
  42. 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
  43. 43. 43 Home Page: "Who We Are" Column
  44. 44. 44 Home Page: "Projects" Column
  45. 45. 45 Home Page: "News" Column
  46. 46. Build the "News" Page
  47. 47. 47  Just customize the Blog options The "News" Page
  48. 48. 48  Make the headings "orange" for all non-Elementor content Styling the News
  49. 49. Build the Projects Page
  50. 50. 50  Use a 3-column layout Projects Page
  51. 51. Single Project Page
  52. 52. 52 Project "Open Training Content"
  53. 53. Build the "About" Page
  54. 54. 54  Change page template About Page
  55. 55. Build the "Partners" Page
  56. 56. 56 Partners Page
  57. 57. Build the "Contacts" Page
  58. 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. 59  Insert the template into the "Contacts" page Build the "Contacts" Page
  60. 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
  61. 61. ? https://softuni.bg/courses/wordpress-basics Build a WordPress Site
  62. 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. 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

×