Join us for National Dog Week!
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:
- 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.
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.