A component is specialized module that can be added to one of three specialized webpage content zones . There are a variety of component types. Each behaves differently, wants different information from the editor, and displays differently depending on the type.
4.1 4.Understanding Content Zones
The Drupal page templates are several zones for different types of content.
...
Body Content Zone - is for the standard content that appears on a page
...
Adding a component to a page is done in three specific content zones:
3/4 Width Page Content - is specifically for components. Any component added to this zone will appear below the body copy block and always to the right of the navigation column. The maximum width is same dimension as the body content zone above it.
Full Width Page Content - is specifically for components. Any component added to this zone will appear below the body copy, navigation, and 3/4 with page content. It will utilize the full width of the browser window (if available) to fill 100% of the width.
Shared Site Content - is specifically for components. It is a special zone that is managed through Site Settings. Any component added to this zone will appear on all teh pages of the your website below all the other zones.
4.2 Adding Components
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Arranging Components
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Editing an Existing Component
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Removing Components
...
To add a new component to a page, first goto the page and click Edit Page. In the editor, scroll below the body content and you will see the 3/4 width page content and full width page content zones.
If a component already exists in one of the zones, it will appear here. In the example above, there are no components present in the 3/4 width content zone, and there is one feature link list component (Watch Bio Majors Abroad) in the full width content zone.
4.2.1 Adding a New Component
To add a new component to a particular zone, click the drop down menu. A list of the available components will appear. You can then select the component you wish to add.
| Info |
|---|
Note: Certain components only work in the full width page content zone so they only appear in that drop down. |
4.2.2 Create the Component
For example, after selecting “Add Feature” to the Full Width Page Content Zone, the editor will add a new blank component. Simply enter in the required information into the component and click Save.
| Info |
|---|
Every component wants different information. You can learn more about the different component types by clicking on any of them in the left menu. |
4.3 Arranging Components
You change the sort order of the components by clicking the the six dots and dragging and dropping it to the correct vertical position.
| Info |
|---|
Note: You can only drag and drop components within their zone. You cannot drag and drop them to a different zone. |
4.4 Editing an Existing Component
Once a component is on a webpage, you can edit it in one of two ways.
You can click the Edit button
You can use the in-context editor icons that appear in the upper right corner of every component
4.5 Removing Components
To remove a component from a page, click the trash icon.
