Join us for National Dog Week!

Check out all our dogs!

Hello!

This is a demonstration web site for DTC 355. It has taken the site shown in the demonstration videos and customized it further using the tools provided in class:

  • WordPress
  • The Astra theme
  • The Beaver Builder pagebuilder plugin

The fonts are free fonts from Google Fonts, which Astra automatically supports. The dog video was made from clips found on Pixabay.

Header + Fonts

The fonts, logo, and header styles were set using the Appearance > Customize > Header Builder features.

The pages of the site were first created in Jumpchart, then exported to a WordPress XML file, then imported into WordPress, and finally added into the menu system using Appearance > Menu.

Home Page

This home page was laid out using the Beaver Builder pagebuilder plugin.

First, using the regular WordPress editor (Gutenberg), the page was given a layout of "Full Width / Stretched".

Then, the page was edited with Beaver Builder. The first row was set as full width and full height, with a background of a video. Two rows of content was inserted into the row for the headline and the button, adding shadows under the Style tab. Slight fade-in animations were added to the 3 columns in this row.

This block is a little fancier.

The layout uses Beaver Builder to create a 2-column row at full width, removing all the padding and margins from the row and the content cells/columns.

Then it assigns a CSS class "fullHeightRow" to the entire row, and adds custom CSS to give that class a background color of #f7f2d0.

Then it assigns a CSS class "paddedCell" to this specific content cell in the row, with custom CSS to give that class a padding of 2em.

In addition, in BB, each column is given a little fade-in animation.