Virginia Tech®home

Our Vision Widget

Our Vision Row
What the Our Vision section of the vt.edu home page looks like

The following component structure and classes applied to components will create the same type of appearance as the Our Vision section of the vt.edu home page. Although the classes are specific in name, they can be applied to the same structure and set of classes with different content.

The example shows the Container, Text, Multi Columns, and Image components.

User level: Basic

1. Drag and drop a Container component into place on a Homepage template page without right column

2. Click the Container component to show the component toolbar

3. Click the wrench icon to display the configuration dialog

4. Type or copy-paste the vt-our-vision class into the CSS Class field

5. Check the Full Browser Width checkbox

6. Click the checkmark in the top-right of the dialog to save changes

Our Vision Step 01
Our Vision container component configuration options.

7. Drag and drop a Text component into the Container component you just created

8. Click the Text component to show the component toolbar

9. Click the wrench icon to display the configuration dialog

10. Type or copy-paste the vt-our-vision-title class into the CSS Class field

11. Click the checkmark in the top-right of the dialog to save changes

12. Click the Text component to show the component toolbar

13. Click the pencil icon to edit text

14. Click the Expand icon, third icon from the far right

15. Type the heading text you want

16. Select the text by dragging the cursor over the text

17. Click on the text formatting icon, second from far right in the toolbar and select Heading 2

18. Click the Collapse icon, far right icon in the toolbar

19. Click the checkmark to save the text changes

Our Vision Step 02
Our Vision section title text component configuration options

20. Drag and drop a Container component into the outer Container below the Text component

21. Click the Container component to show the component toolbar

22. Click the wrench icon to display the configuration dialog

23. Type or copy-paste the vt-our-vision-section class into the CSS Class field

24. Click the checkmark in the top-right of the dialog to save changes

Our Vision Step 03
Our Vision inner container component configuration options
Our Vision Step 03b
Our Vision inner container component alternate configuration options

25. Drag and drop a Multi Columns component into the inner Container you just created

26. Click the Multi Columns component to show the component toolbar

27. Click the wrench icon to display the configuration dialog

28. Type or copy-paste the vt-our-vision-2col class into the CSS Class field

29. Click the checkmark to save the text changes

Our Vision Step 04
Our Vision multi columns component configuration options

30. Drag and drop an Image component into the left column of the Multi Columns component you just created

31. Click the Image component to show the component toolbar

32. Click the wrench icon to display the configuration dialog

33. Type or copy-paste the vt-our-vision-image class into the CSS Class field

34. Click on the Assets tab in the Edit mode side panel, at left

35. Drag and drop the image you wish to use for the section image into the Image Asset area of the open Image component configuration dialog

NOTE: The ideal image will be cropped to a 3:2 or 16:9 aspect ratio

36. Click the checkmark in the top-right of the dialog to save changes

Our Vision Step 05
Our Vision image component configuration options

37. Drag and drop a Text component into the right column  of the Multi Columns component

38. Click the Text component to show the component toolbar

39. Click the wrench icon to display the configuration dialog

40. Type or copy-paste the vt-our-vision-tag class into the CSS Class field

41. Click the checkmark in the top-right of the dialog to save changes

42. Click the Text component to show the component toolbar

43. Click the pencil icon to edit text

44. Click the Expand icon, third icon from the far right

45. Type the tag heading text you want

46. Select the text by dragging the cursor over the text

47. Click on the text formatting icon, second from far right in the toolbar and select Heading 3

48. Click the Collapse icon, far right icon in the toolbar

49. Click the checkmark to save the text changes

Our Vision Step 06
Our Vision tag title text component configuration options

41. Drag and drop a Text component below the first Text component

42. Click the Text component to show the component toolbar

43. Click the wrench icon to display the configuration dialog

44. Type or copy-paste the vt-our-vision-articleTitle class into the CSS Class field

45. Click the checkmark in the top-right of the dialog to save changes

46. Click the Text component to show the component toolbar

47. Click the pencil icon to edit text

48. Type the article title text you want

49. Click the checkmark to save the text changes

Our Vision Step 07
Our Vision article title text component configuration options

50. Drag and drop a Text component below the second Text component

51. Click the Text component to show the component toolbar

52. Click the wrench icon to display the configuration dialog

53. Type or copy-paste the vt-our-vision-articleDescription class into the CSS Class field

54. Click the checkmark in the top-right of the dialog to save changes

55. Click the Text component to show the component toolbar

56. Click the pencil icon to edit text

57. Type the article description text you want

58. Click the checkmark to save the text changes

Our Vision Step 08
Our Vision article description text component configuration options

59. Drag and drop a Text component below the third Text component

60. Click the Text component to show the component toolbar

61. Click the wrench icon to display the configuration dialog

62. Type or copy-paste the vt-our-vison-link class into the CSS Class field

63. Click the checkmark in the top-right of the dialog to save changes

64. Click the Text component to show the component toolbar

65. Click the pencil icon to edit text

66. Type the article link text you want

67. Select the text by dragging the cursor over the text

68. Click on the link icon, fourth from far left in the toolbar

69. Type the link to the article or page with more information about this section, e.g., https://vt.edu/about.html

70. Click the blue checkmark button, far right in the link toolbar

71. Click the checkmark to save the text changes

Our Vision Step 09
Our Vision section link text component configuration options

Repeat steps 20 - 71 for each sectional row, if you want the dot treatment for a row, add the vt-sideByside and research class to the vt-our-vision-section container, e.g., vt-our-vision-section vt-sideByside

You should now Preview your Our Vision to make sure it appears as desired before publishing the page.