nginx.dev.viupal3-demo.web.viu.ca Open in urlscan Pro
52.60.131.211  Public Scan

Form analysis
1 forms found in the DOM

GET https://www.viu.ca/search/

<form class="site-search" action="https://www.viu.ca/search/" method="get">
  <input class="site-search__search-input form-control" id="search_id" type="text" placeholder="Search" value="" tabindex="-1" name="_q" aria-label="VIU Search">
  <button class="search-button" aria-label="Site Search Button" type="submit"> Search </button>
  <svg fill="currentColor" class="icon" role="img">
    <title>Search icon</title>
    <use xlink:href="/themes/custom/viupal/dist/icons.svg#search"></use>
  </svg>
</form>

Text Content

Skip to main content
 * Future Students
 * International Students
 * Current Students
 * Employees
 * Alumni
 * Donors
 * Contact


LAYOUT BUILDER DEMO PAGE

Menu
CLOSE X
 * Future Students
 * International Students
 * Current Students
 * Employees
 * Alumni
 * Donors
 * Contact

Start Your Application


MAIN NAVIGATION

VIU Main Menu
 * About VIUOpen submenu
 * Programs and CoursesOpen submenu
 * AdmissionsOpen submenu

Close submenuAbout VIU
 * About the University
 * Campus Information
 * Athletics
 * Services and Facilities
 * VIU Blog
 * VIU Publications

Close submenuPrograms and Courses
 * Areas of Study
 * Courses
 * Start Your Application

Close submenuAdmissions
 * Admission RequirementsOpen submenu
 * Tuition & FeesOpen submenu
 * Financial Aid & Awards
 * Start Your Application

Close submenuAdmission Requirements
 * Equivalencies and Advanced Placement Program
 * How to Order Transcripts
 * Requirements

Close submenuTuition & Fees
 * Fees
 * Payment Methods
 * Tuition

Access site pages through the menu. Got it!
Program search icon Search
CLOSE X


VIU SEARCH

Search Search icon

Welcome to the Drupal 10 block demo page. In D10, the layout tab allows you to
add new "sections" which are horizontal containers which can range from a single
column (like this) up to 3 columns. Sections can be assigned a visible centered
title and a background color as well. 



Inside these columns, you place different kinds of blocks. If you want 3 columns
of text or CTAs, you create a 3 column section and place individual text blocks
or CTAs in each column.  You can even stack multiple blocks in each column.
 This is a departure from how 3 column text or CTAs was achieved in Drupal 7.

Below is an assortment of blocks in various column layouts.


FIRST SECTION


BASIC BLOCK

This is a "basic block" placed in a single column section. This basic block has
it's title set to display.  Basic blocks are just a free form body text box that
you can fill with anything the editor will allow. You would use basic blocks for
a multi-column text layout for example.

The section this block is in is set to full-width, light blue background and set
to have its label displayed (the larger centered title).


BASIC BLOCKS IN COLUMNS

Here is some Basic blocks put in the columns of a 3 column section. This section
is not showing its label and has no background or full-width set.


STACKED BLOCKS

As you can see, you can stack blocks in the columns.  

Tip: If you wanted blocks to run "newspaper" style one after another in a
column, do this.  If you wanted to continue with 3 columns but have the second
blocks all line up vertically, you would simply create a new section with 3
columns below this one.

Blocks must have a title, but you can choose not to display it. This block isn't
showing it's title.




ANOTHER BLOCK

Our last block in the 3 column layout. Below is a screenshot of what this
section looks like in the layout editor:




FLEX CTAS


FIRST CTA

Flex CTAs work the same as they did in Drupal 7, except for how they are added.
 Now you do the column and background colors with the sections and simple place
individual Flex CTAs in the columns.  

VIU Homepage


OPTIONS!

You can customize your CTA in the following ways:

 * Show or hide the title
 * Use an image or not
 * Center the cta text
 * Hide the button, which links the title or image instead
 * Don't link anywhere at all!

See the big title just above this block that says "Flex CTAs"? That's just the
optional Section title.  You don't need that for your CTAs.


LAST ONE

This last Flex CTA uses the text center option. While you can center text in the
editor, this option forces the title and link to also center nicely.

Read More


FLEX CTA IN A FULL WIDTH SECTION

In Drupal 7 we had a "Callout Box".  In D10, just use another Flex CTA, but
place it in a single column Section and it will lay itself out diferently!

Learn more about VIU


SAME THING, BUT IN COLOR!

Add a background color to your section that contains the CTA and make it stand
out a bit more!

Gotta have it!


COLLAPSIBLE GROUPS


COLLAPSIBLE GROUPS, JUST LIKE D7!

Just like D7 you can create a collapsible group and format it either as an
accordion or a group of tabs!


PLACE THEM WHERE YOU WANT

Like the other blocks mentioned previously, you can place this accordion group
in any column of a section. So you could have two accoridions side by side in a
2 column section if you wish!


IMAGES ARE FINE TOO, JUST LIKE BEFORE

Anything you can put in a Basic Block you can add here too!




COLLAPSIBLE GROUP - TAB FORMAT

 * Same thing, but tabs!
 * Reording is drag and drop, just like before

Finished inputting all your content and want to switch to tabs or back?  No
problem, it's just an option.

Super easy to work with and edit!


BLOCK IMAGE CTA

The Block Image CTA is back to allow large image background calls-to-action with
several options such as: being full browser height, dark text on white washed
image or white text on a dark washed image, text pull to the left, right, center
or none, and an optional button.

A great way to break up text and add a punch to the page!

Get there

I'll use this Basic Block to introduce another variation of the Block Image CTA
below.  These two are placed in the same single column Section.


NOT FULL WIDTH

Want a Block Image CTA but prefer not full width?  Now you can even do this by
not setting the containing section to full-width!  You also don't need the
button below, it's optional.

I'm optional


COL SIZE

You can also set the % ratio for the columns. Here have a Section with two
columns in a 25%/75% split.

In the other column you'll see a Photo Gallery block. These can be put in any
Section column too and will size their thumbs accordingly.


PHOTO GALLERY BLOCK

Some optional intro text allows a little lead in.  This is the Photo Gallery
Block.  Place in any Section column, it's flexible.




LAST ONES

A few more blocks and we're done!  Next up we have:

 * Social Media Links - fill in the links you have and it will display only
   those.
 * Contact block - suited for a staff page where a bunch of these are added to a
   layout.
 * Image Link - suited for a layout of card style image links to different parts
   of your site.


FOLLOW VIU!

 * facebook-square Facebook
 * instagram Instagram
 * linkedin LinkedIn
 * twitter X
 * youtube Youtube


DR. JOHN SMITH

Professor of Business
Phone: 250.555.5555 Ext. 123
Building / Room: 500 / 143
Email: No-Reply@viu.ca


MORE INFO

A little body text to give an intro of your contact. Their background and
experiences and what they do now!


SOCIAL SCIENCES

phone-squarephone-square icon
Connect with Us!
Phone or email us
info-circleinfo-circle icon
Events and Info Sessions
View events
pen-squarepen-square icon
Ready to join us at VIU?
Start Your application


ABOUT VIU

 * About VIU
 * Careers at VIU
 * Events
 * Media
 * News
 * Parking
 * University Governance


ACADEMICS

 * Admission Requirements
 * Dual Credit
 * Financial Aid and Awards
 * Graduate Programs
 * International Students
 * Library
 * Online Education
 * Programs and Courses
 * Registration
 * Research
 * Transfer Students
 * VIULearn


STUDENT LIFE

 * VIU Blog
 * Student Housing
 * Campus Recreation
 * Campus Store
 * Food Services
 * Health and Wellness
 * Services for Students
 * VIU Mariners Athletics


CAMPUSES

 * Campus Information
 * Cowichan
 * Nanaimo (Main Campus)
 * tiwšɛmawtxʷ (Powell River)

Vancouver Island University Nanaimo
(Main Campus)
900 Fifth Street
Nanaimo, BC
V9R 5S5
Canada
250.753.3245
1.888.920.2221
info@viu.ca
 * facebook-square Facebook
 * twitter Twitter
 * instagram Instagram
 * youtube Youtube
 * linkedin Linked-in

The Vancouver Island University community acknowledge and thanks the Snuneymuxw,
Quw’utsun’, Tla’amin, Snaw-naw-as and Xwkwa’luxwum First Nations on whose
traditional lands we teach, learn, research, live and share knowledge.


VIU TERMS MENU

 * Accreditation
 * Emergency Information
 * Terms
 * Website Feedback