NOTES and TO-DOs

Project Page Layout and Elements

Each individual project/portfolio page (e.g. June) will be created as a Page, not a Post, and will have the following layout and elements:

  • Page Builder template so the original WordPress page title at the top is hidden.
  • Stackable Video Popup video block to house the project video. With these settings.
  • Kadence Row Layout block to contain the rest of the page content; with these settings.
  • Heading (h3) with project title

Order of things that need to be done:

  • Create thumbnail images for all projects that are to be showcased on the site (3:2 ratio) – then upload and create the gallery for the front page.
  • Create first project page – figure out layout and required elements, i.e. player options, tabbed content/block, gallery block for frames/stills
  • Duplicate the first project page, and modify to create pages for the other projects.
  • Copy the settings and layout from homepage to Narrative/Commercial/MV pages. Convert the Kadence Gallery on Homepage to template so that projects added to homepage are also added to the categorised pages as well. Then go into individual pages, revert gallery block from template, removed unrelated project from that category.

Done so far:

  • Installed and activated “Coming Soon” plugin. Now, anyone not logged in will see a coming soon page.
  • So far, I’ve added the necessary pages and created the main/top menu
  • installed Atomic Blocks theme
  • Installed Child Theme Configurator plugin, and created and activated a child theme. This is so if the main theme is updated, my site isn’t immediately affected by the changes.
  • Made “featured work” page as the homepage in the “reading” section of settings, and set the “blog” page as the “posts” page (it is not added to the main menu yet, as there is no blog as of now).
  • Installed Kadence Blocks
  • Installed Stackable Blocks – to use the Video Popup block for project pages
  • Edited CSS to remove space between Stackable Video Popup and header on project pages. ( .ugb-main-block { margin-top: 0; } )

To-do:

  • Fix the footer text
  • Add social media icons/links in footer
  • Thumbnails: choose frames from each project and crop to 3:2 ratio.
  • Edit CSS for the captions so that BG isn’t grey gradient but solid grey (like on KM.com)
  • Edit CSS for header section; reduce height and reduce menu font sizes
  • Test different Gallery blocks for project pages to showcase frame grabs. Kadence Advanced Gallery’s free version doesn’t allow “tile” format, and shows all images the same size. Need to find one that shows mix of small and large, like Khalid Mohtaseb’s site.

Video Popup Settings:

These settings are to be followed for posting project videos on individual project pages (linked to on portfolio pages, e.g Featured, Narrative, etc):

  • Use Stackable Video Popup block
  • Block settings:
    • DO NOT change anyting in the LAYOUT TAB
    • Go to STYLE > General > Popup Option #2: Video URL and paste the video URL for the project video
    • Go to STYLE > Container and make these changes:
      • Click background “edit” icon (pencil), and in the popup window, choose image for video background, choose black for background colour, background tint = 5, leave “fixed background” disabled, and no changes to “Adv. Background Image Settings”
      • Width: Desktop/tablet/phone = maximum setting,
      • Height: Desktop = 650, Tablet = 350, Phone = 200
      • Borders: none
      • Border radius: 0
      • Shadow outline: 0
    • Go to STYLE > Play Button and make these changes:
      • Opacity: 0.7
    • DO NOT edit anything below Play Button; leave Block Title, Description, Background, Top and Bottom Separator aone.
    • Go to Advanced > Block Spacing, and set “Block Margins” bottom to 35, and all other padding and margin values to 0.

Kadence Row Layout settings:

All content on a project page (e.g. June), except the project video, will be added and contained within the Kadence Row Layout.

  • DESKTOP settings:
    • Columns: 1
    • Structure Settings > Custom Content Max Width: [Desktop = 60%], [Tablet = 80%], [Mobile = 90%]
    • No changes to any other settings