Make User Interface Changes

In part eight of our Quick Start guide, learn to make UI changes on your site.

Discuss in our Forum Discuss in Slack

Now we’re going to work directly on the server to make changes to our site's user interface (UI).

Make the Change in Dev

  1. Go to Site Dashboard, select the Dev tab, and then select Code.

  2. Confirm your Connection Mode is set to SFTP.

  3. Log in to your Dev site by clicking the Site Admin button.

  4. Install a new theme (do not activate/enable a theme that came pre-packaged with your site).

    If you need help with this step, refer to the WordPress Codex or Drupal Documentation for installing a new theme.

  5. Activate/enable the new theme you installed. Now view your site to confirm the theme change.

  6. Return to Site Dashboard and select the Dev tab. The files you just added are highlighted.

     Note

    You may need to refresh your dashboard to see these files in your Dev environment.

  7. Add a commit message, then click Commit to add these files to your Dev environment.

     Note

    In the Dev environment, you can’t make a commit without first adding a commit message.

  8. Review your changes in Dev.

Review the Change in Test

  1. Go to your Site Dashboard, select the Test tab, and then select Deploys. As you can see, 1 commit is ready to deploy from the Dev environment.

  2. Check the Pull files and the database from the Live environment box.

  3. Consider creating a backup before proceeding:

     Warning

    As intended, the following action will overwrite your Test database and files. If you skipped this backup task you will be unable to recover this data hereafter.

  4. Add a Deploy Log Message (optional), then click Deploy Code from Development to Test Environment.

  5. Click Site Admin when the deployment completes to go to your Test site. Here you’ll notice that your theme is installed, but not active/enabled. You’ll also find that your content has been pulled “down” from Live.

  6. Activate/enable your theme. If you need help with this step, refer to the WordPress Codex or Drupal Documentation.

  7. Review your Test site.

Deploy to Live

  1. Review the changes to make sure everything looks correct.

  2. Navigate to your Site Dashboard, select the Live tab, and then click Deploys.

  3. Add a Deploy Log Message (optional), then click Deploy Code from Test to Live Environment.

  4. Activate/enable your theme. If you need help with this step, refer to the WordPress Codex or Drupal Documentation.

Congratulations! You just performed on-server development to make changes to your UI. You made changes on your Dev site, reviewed them on your Test site, then deployed them to Live.