Please try to follow this style guideline when creating content page for specific materials you collected, either video, images, or text.
Structure of the page
For a new post, the first thing to do is to Add a New Section. You should see this when a new post is created. Use the plus sign button to create a new section, please ignore the other two buttons.
Start with a single column (top left) is normally safe. This entire post is a single column. But we could extend more inner columns later if needed.
With a Section created (it is still empty), you could start dragging widgets from the left-hand Elementor bar to add new content holders. Like these basic ones on the right.
What else I just did here is I created an Inner Section of two columns inside the main Section we just created, so I could place the tall image on one side and text on the other. Looks better, right?
You can also adjust the ratio between the two columns, adjustable settings for each widget is always on the left hand bar.
If you need to change settings, select or drag around an widget, hove over it and click the edit button or the button with six dots on top –
Under this paragraph, there is a Spacer widget. It’s just an empty space holder to separate content, sometimes it is useful with a little extra space between different content and make it easier for reader’s eyes. You could adjust Spacer height.
At the bottom of each Content Page, you should create a button to direct the reader back to your Cluster Page or the upper level page based on your resource’s structure.
Here is a basic button widget, to make everyone’s life easier, just drag it here, leave most of the setting by default and change two things:
1. The text
2. The link
You will have to change these every time, sorry we can’t make a reusable buttons because each cluster will need different link address.
Multi-media Contents
Above me is a heading, easy. You could change it to H2, H3, H4 … for different size and content level.
Add images is easy, just drag an Image element from the left, upload and select the image you just uploaded from the Media Library. One thing worth noting is that please try to upload the images to our website rather than using an external link. External links often break and some website use dynamic links and it often changes.
Make sure the copy right is not an issue, most of the time it’s not a major problem if used for educational purpose, but always put courtesy credits in the caption, if you know the source or the author.
Adding video is easy too, especially it’s from Youtube, Vimeo, etc. When you drag a Video element, by default it will show this placeholder video, just click on the top-right corner’s edit button to change the link to the video you want to add. There are plenty of options for YouTube links, like start-time, stop-time, auto-play.
There is no need to download and re-upload videos, since (almost) everything is hosted on Youtube and they took too much space for our site. If you do need to upload a video, let me (CY) know and I could help you.
You could also add maps in-between content if that helps.
The left-hand side is an icon element, Elementor provided a rich pool of choices. It could be useful sometimes.
Fonts and colors (this is H2 size)
For text on the content posts, please try not to customize the paragraph fonts as it will follow the global website setting and we might change that later.
For headings tho, feel free to use H2, H3, etc in the heading settings to change their size.
This is H3 size
This is H4 size
UCSB has an official guideline for visual identity, if you need some color variation, please use the official colors. I have added them to the Elementor system so you could simply select by name.
You may notice that we used all official color codes on our new website.
Finally, when creating you new content posts, as well as the Cluster page (which we will provide a template), please stick to the BASIC, PRO, and GENERAL widgets. We have other plugs installed that provided very fancy widgets but we found them quite unstable in some cases.
