• Resources
  • RAL Assistant
    Sign in
    The Blocks Agency Member Site
    The Blocks Agency Member Site
    • Resources
    • RAL Assistant
    Back to Training

    Adding Website Sample to TBA Membership Site

    Install GoFullPage

    SmartMockups Macbook Air Template

    Step 1: Create Full Screen Capture of Page

    Load the page into the Chrome browser and use the GoFullPage Chrome Extension to capture the full page screenshot.

    This will create a full screen JPG that you can then save to your computer.

    Step 2: Create SmartMockup with MacBook Air Template

    Use the MacBook Air Template from SmartMockups and upload from image to the template.

    Once the file is uploaded to SmartMockups, you’ll see how it appears really small with lots of black space on the left and right. It needs to be cropped properly.

    Click the Pencil Icon and with the new options, click Fill and then Crop and Continue. You’ll see that the screenshot is now properly cropped. You may need to make a small adjustment to the sizing, but for the most part it should be good.

    Once cropped, download the Small size graphic to your computer.

    Step 3: Add Webpage to Membership Site

    Go to the TBA Membership Site and proceed to create a new Element and then proceed to fill in the details.

    Here are directions for filling in the fields.

    Add Title

    This is where you’ll add the title. For this webpage it will be Drip Podcast Episode Page.

    Elements Tags > Categories

    Select the Web Pages option. This will reveal additional options at the bottom of the page.

    Elements > All Element Fields > Main Image / Mockup

    This is where you upload the SmartMockups mockup you created.

    Description

    A short description of the webpage. For this example it is “An individual podcast episode page with player embed, show description, and full transcript.”

    Credits

    Select the company this is associated with. In this case it is Drip.

    Elements > Elements Web Pages > Mockup

    Upload your SmartMockups image here.

    Screenshot

    Upload the actual screenshot here. The full screenshot.

    Use Cases

    This is where you select what type of page it is. This allows people to quickly find examples for whatever they are looking for. In this case it is Podcast.

    Description

    Use the same description as you used above… “An individual podcast episode page with player embed, show description, and full transcript.”

    Credit

    Choose the associated company. In this case, Drip.

    Step 4: Publish and Check Work

    After you’ve added all the content, Publish your page and then proceed to check your work on the front end of the site.

    Web Pages Gallery Page

    Download PDF
    © 2025 - The Blocks Agency Member Site