New Build Workflow

Pre-Build Approximate Completion Time: 10 Mins

Modgi

  1. Review the build in general, checking for additional functionality or any special requests.
  2. Download all the attachments so you have them ready to go when you need them.
  3. Open any reference sites listed, or if builder discretion is requested, open any industry similar sites you may find inspirational.

Copywriting and SEO Worksheet

This may be buried. Check the following path for files:

  • On the Parent Ticket
  • Under "Sub-tasks", click on the Copywriting link
  • In the attachments find the doc or zip file labeled "Final" and download

If you still cannot find the copywriting and SEO, please reach out to a teammate or leadership. Do not take text from an existing site or make up copy of your own.

Stock Libraries

If the customer requested stock images or provided images that are low quality, open our stock image galleries.

If you find that icons would be beneficial, open only our approved stock icon options.

Do not stray from the above libraries, these are our only approved stock icon libraries. If you can use font awesome icons in the modules do this as opposed to downloading the icon and saving as an image, it is easier to edit them in the module than it is to edit an image file.

Check back on the Resources page for new libraries!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

WP Dashboard Approximate Completion Time: 30 Mins

Core/Plugins

For Sites Before GD Core Automation

  1. Install and activate Core.
  2. Choose site type and region.
    • This is important, especially if it is a WooCommerce, as it will take the region settings and insert it into the main settings.
  3. Click activate, then install now to install all the required plugins.
  4. Add any additional requested plugins and deactivate any unnecessary plugins from the plugins page.
  5. For more detailed information about Core check out the styleguide: https://styleguide.wdsgallery.com/gd-core/

For Site with GD Core Automation

  • All plugins and pages are automatically installed and created prior to build.

Author display name

  1. Go to Users, PWS Admin.
  2. Edit the field for the Nickname to be the site name.
  3. In the drop down for "Display Name Publicly As" choose your new nickname, then scroll down and save.

Posts

  1. If blogs were provided enter those now.
    • Don't forget to either delete or edit the default "Hello World" post.
  2. Add a featured image to all posts unless specifically asked not to.
  3. If blog/posts are not being used, remove default "Hello World" post and turn off comments.

Forms

  1. Add a simple Contact form, unless one is specified in Modgi.
    • Don’t forget to enable the anti-spam honeypot setting.
  2. Adjust the subject line in the notification settings, so it is unique and not the default subject. Something like “Submission from (Name) on (Website Title Here) Contact Form”
    • Use the Merge Tag button on the right of the box to insert form fields like “Name” into the Subject line. They will look like this: {Name (First):1.3}
  3. Change the from email to something like "donotreply@mydomain.com" 

Form Restrictions
We do not want to put private or personal information on a website.

We should never be asking the following information through an email form:

  • Social Security Numbers or SSN#
  • Bank Account information
  • Credit Card Numbers or CC#
  • Driver's License Number or DL#

Our goal should always be to protect our customers and C2 (customers’ customers)

Do NOT place more than one form on a page.

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

Customizer Approximate Completion Time: 20 Mins

General Tab

  1. Layout
    • Enable the "Scroll to Top Button".
    • Set Font Awesome Icons to "Font Awesome 5".
  2. Accent Color
    • Change the "Accent Color" to the color the customer chose in Modgi and adjust the "Hover Color" to an appropriate variation of the accent color.
      • This can be grey if a darker color of the accent color does not look appropriate.
      • Review color standards in the Style Guide for help picking appropriate colors: https://styleguide.wdsgallery.com/color/
  3. Headings
  4. Text
    • Adjust the font family to a font chosen by the customer, or acceptable alternative.
    • Adjust the font size to 18 and the line height to 1.6 unless this does not look good, then notate in your ticket why you chose what you did.

Menus/Pages

For Sites Before GD Core Automation

  1. Create a new Menu labeled "Main Menu".
    • Add all the pages requested in Modgi and marked as "Default", by typing in the page name in the "Add New Page" field under the "Pages" tab and click on the "+Add" button.
    • Verify that sub-navs are set up correctly.
    • Set up external links to open in a new tab.
      • If you do not see the checkbox to have a link open in a new tab, you will need to go to the menus area and click on the gear at the top, and check the box to include Link Target.
    • Include a contact page, if not already requested in Modgi (except for Starter Sites)
  2. If needed create menus for split menus or a separate footer menus.
    • Do not include sub navigation in a footer menu.  Create a separate menu for footer is the main menu has sub-navigation.

For Sites with GD Core Automation

  1. Create a new Menu labeled "Main Menu".
    • Add all the pages set up through automation and match with Modgi and set up menu as "Default."
    • Make sure to add custom links since these won't be set up with automation.
    • Verify that sub-navs are set up correctly.
    • Set up external links to open in a new tab.
      • If you do not see the checkbox to have a link open in a new tab, you will need to go to the menus area and click on the gear at the top, and check the box to include Link Target.
    • Include a contact page, if not already requested in Modgi (except for Starter Sites)
  2. If needed create menus for split menus or a separate footer menus.
    • Do not include sub navigation in a footer menu.  Create a separate menu for footer is the main menu has sub-navigation.

Settings Tab

  1. Site Identity
    • Enter the site title and tagline from Modgi.
    • If customer has provided a logo edit the logo in an appropriate way to use as a favicon. Favicons should be 512px square.
      • If no logo has been provided, create a favicon using 1-3 letters from the site name.
    • Upload your favicon.
  2. Homepage Settings
    • Change the "Your homepage displays" to “A Static Page” then choose your home page from the drop down.
    • Leave "Posts page" as "select page" unless they intend to have a blog, then set it to the blog page.

Additional CSS

Copy and paste the CSS template here. All new builds should include the template.

https://styleguide.wdsgallery.com/design-etiquette/css/#csstemp

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

Themer Layouts Approximate Completion Time: 15 Mins

Header

  1. Add a new layout called Header.
  2. Choose Header from the Layout drop down.
  3. Then under location choose Entire Site.

Footer

  1. Add a new layout called Footer.
  2. Choose Footer from the Layout drop down.
  3. Then under location choose Entire Site.

Blog/Shop Layouts

If the site will be using blogs or is a woo and has products:

  1. Set up singular layouts for the posts/products.
  2. Set up archive layouts for the main blog/shop pages as well as the category pages if necessary.

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

Beaver Builder Approximate Completion Time: 1 - 4 Hours

Global Settings

  1. Open Beaver builder on any page or themer layout.
  2. Click on the down arrow in the upper left next to the Beaver Builder icon.
  3. Click on the Global Settings option.
  4. Change the “Default Row Width” to “Full Width”.
  5. Scroll to the bottom of this screen and make sure you adjust the “Enable Column Max Width” to “No”.
    • This ensures that tablet and small devices are full width and don’t have strange margins.
  6. Save your changes.

Sitewide Elements

Now that your themer layouts have been added lets edit them

  1. Start with the header. Edit it by either:
    • Clicking on the Beaver Builder link on the themer layouts screen.
    • Or by going to any page on the site, hover over beaver builder, then click on header.
  2. Start by selecting the template:
    • Click the plus sign.
    • Click on Templates.
    • From the drop down choose "Header Templates".
    • Then chose the layout chosen in Modgi or whatever fits best.
    • Click "Replace Existing Content".
  3. Swap out all relevant information and style appropriately.
    • Check all devices! Mobile – 375px | Tablet 768px | iPad Pro 1024px | Laptop 1366px
  4. Do the same for the footer, make sure you use the template as this contains the GoDaddy badge as well as other style presets to make it easier for you.
  5. Don’t forget about your blog/product pages too.

Page Content

First, review Modgi as well as the copywriting worksheet to see what is being requested. If they are giving you discretion or not much to work with, feel free to google similar businesses to see typical industry styles. Obviously, you should not copy these sites, but you can pull inspiration from them if you need to.

  1. Start with your home page. Set up your hero with the requested info from Modgi and the copywriting worksheet.
    • If you cannot find the copywriting or SEO worksheets and copywriting has been checked in Modgi, please get with a teammate to track it down, do not simply pull it from an old site or make it up.
  2. Once you have your hero in place, make sure you check the layout on all devices
    • Mobile – 375px | Tablet 768px | iPad Pro 1024px | Laptop 1366px
  3. Then save the Hero row to use on internal pages as a base. Save it as “Home Hero”.
  4. Then style the rest of the page accordingly making sure to check all devices as you go.
    • If you feel that you may use some of the styling on internal pages, go ahead and save these elements as well. Make sure that you are NOT clicking “Global” as this will make the changes no matter what page you place the module or row. Global elements should be reserved for the header or footer.
  5. Once you get to an internal page add your saved row “Home Hero” from the home page as a base. Adjust the height, background image if necessary, and text according to the copywriting worksheet. Once you have an acceptable hero image for internal pages that looks good on all devices save this new row as “Internal Hero” to make it easier to stay consistent.

SEO

  1. On each page click "Edit".
  2. Use the SEO worksheet to add title tags (using the snippets) and meta descriptions to the Yoast settings on each page.
    • If you cannot find the copywriting or SEO worksheets and copywriting has been checked in Modgi, please get with a teammate to track it down, do not simply pull it from an old site or make it up.
  3. Don’t forget to add featured images.
  4. Navigate to the media library, and add alt tags using the SEO Best Practices as a guide.

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

WooCommerce Approximate Completion Time: 1 - 2 Hours

WP Dashboard

  1. Add the pages:
    • Cart, Checkout, My Account, Terms & Conditions, Privacy Policy, and Shop (or whatever term the customer requested as the shop page)
  2. Connect the pages to Woo
    • Go to WooCommerce > Settings > Advanced. Select each page you created corresponding with its respective label under "page setup"
  3. Connect Shop
    • To tell WooCommerce what pages to use for the Shop page go to WooCommerce > Settings > Products

Check the Style Guide for more detailed information: https://styleguide.wdsgallery.com/wp-woo/woocommerce-components/

Customizer

Upon installation of Woo, a panel appears in the customizer for WooCommerce that contains some layout and checkout settings. These items used to be found in the dashboard under WooCommerce settings, but they've recently shifted to the customizer and tend to get overlooked.

Appearance > Customize > WooCommerce

Since we custom create our Woo layouts with Themer, the majority of these settings usually don't matter, but its good to know where to find them.

Check the Style Guide for more detailed information: https://styleguide.wdsgallery.com/wp-woo/woocommerce-components/#sett

Themer Layouts

  1. Products
    • If you did not previously set up the themer layout for products, do this now.
    • The themer layout should be labeled something like "Products" and it should be a singular layout.
    • Make sure your location is set to "product" - "all products".
    • Be sure to use the Templates in Beaver builder when building out the page. Click the + > Templates > WooCommerce > Choose the layout designated in Modgi.
  2. Shop
    • If you did not previously set up the themer layout for the shop page, do this now.
    • The themer layout should be labeled something like "Shop" and it should be an archive layout.
    • Make sure your location is set to "product archive".
    • Be sure to use the Templates in Beaver builder when building out the page. Click the + > Templates > WooCommerce > Choose the layout designated in Modgi.
  3. Categories
    • If the site calls for products categories, be sure you set up a category layout, or it will default to the basic woo layout.
    • This should be labeled something like "Product Categories" and it should be an archive layout.
    • Your location should be set to "Product Category Archive" - "All Categories".
    • Be sure to use the Templates in Beaver builder when building out the page. Click the + > Templates > WooCommerce > Choose the layout designated in Modgi.

Check the Style Guide for more detailed information: https://styleguide.wdsgallery.com/wp-woo/wordpress-page-setup/#them

Beaver Builder

Once the new pages are connected to Woo as shown in the step above, edit each page and add the component via shortcode placed in an HTML module or via themer's WooCommerce module. If you've saved a hero / H1 layout or style, you can use this on each component page to keep the site consistent.

  1. Cart Page
    • Shows the cart contents - Use the [woocommerce_cart] shortcode placed in an HTML module or select "Cart" from the standard Woo module
  2. Checkout Page
    • Shows information such as shipping and payment options - Use the [woocommerce_checkout] shortcode placed in an HTML module or select "Checkout" from the standard Woo module
  3. My Account Page
    • Shows each customer information related to their account, orders, etc - Use the [woocommerce_my_account] shortcode placed in an HTML module or select "My Account" from the standard Woo module
  4. Terms & Conditions
    • Use the default terms & conditions document to place terms in a text module on this page
  5. Privacy Policy
    • The default terms & conditions document has a section for privacy policy - you can use this clipping temporarily but notate that the customer needs to revise these items - privacy policy is automatically connected to checkout
  6. Order Tracking
    • There's an optional Woo function built in called "order tracking" - You can create its own page, or you can choose to place it on the "my account" page above/below the dashboard - to use it, select "Order Tracking" from the standard Woo module

Check the Style Guide for more detailed information: https://styleguide.wdsgallery.com/wp-woo/woocommerce-components/#mods

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

Final Checks Approximate Completion Time: 1 Hour

Responsive

Once more, double check that your site is responding well on ALL devices:

Mobile – 375px | Tablet 768px | iPad Pro 1024px | Laptop 1366px

Plugins

Double check that all your plugins are up to date in Core, and any plugins outside of Core are up to date.

Smush

Go to the dashboard and run Smush.

Cache

Flush all the caches!

SEO

Navigate to the media library and add alt tags to ALL images using the SEO Setup and Best Practices Guide as a guide.

Google Lighthouse

Run google lighthouse from the Core dashboard.

If you get a score below 75%, notate all the steps you took to attempt to get the score to or above 75%. Follow the steps outlined in the style guide to attempt to bring the score up: https://styleguide.wdsgallery.com/google-lighthouse-in-gd-core/

Screenshots

Take screenshots of your finished site at the following breakpoints: 

375px | 1024px | 1920px

Be sure you are taking screenshots of:

  • All Pages
  • At least one of each Post Type (i.e. blogs, products, pods; if applicable)
  • At least one Category (i.e. product cateogry/post category; if applicable)
  • The Plugins Page
  • The GD cORe Plugins page

Your file naming convention should be as follows:

"page-name_screen-size_date" - example: Home_375px_10-7-2020.png

Zip all of your files

Name the zip file the "Screenshots_URL_date" (example: Screenshots_wdsdesigns.com_10-7-2020.zip)

Upload the zip file to the jira build subtask

Don't forget to save a copy for yourself, they make great examples for portfolios!

Checklist/Notes

Make sure you go through the current checklist for all of your new builds:

Vendors: https://styleguide.wdsgallery.com/qa-requirements/

Internal Team: http://wdsdesigns.com/qa-check/

Leave any notes you have about the build in your ticket.