Theme Elements: Text Elements

‹ See all elements

Element: Textblock

Creates a simple text block with collapse support

Settings

Content › Textblock

Content
Enter some content for this textblock

Content › Fold/Unfold

Fold Behaviour
Select to show complete container/text or a fold/unfold behaviour. This feature is ignored when nested inside another fold container.

Styling › Text Block Styling

Text Alignment
Select the text alignment.
Textblock Content Styling
Select if the content of the textblock shall be displayed in 1 block or float in columns.

Styling › Font Sizes

Font Size default – used for all screen sizes(no media query)
Font size for the text in px

Styling › Colors

Textblock Font Colors
Either use the themes default colors or apply some custom ones
Custom Font Color
Select a custom font color. Leave empty to use the default

Default textblock

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.

2 columns, LCI green, 18px

3 columns, UCLA blue, 18px

Element: Special Heading

Creates a special Heading

Settings

Content

Heading Text
Heading Type
Select which kind of heading you want to display.
Heading Style
Select a heading style
Subheading
Add an extra descriptive subheading above or below the actual heading
Icon
Select to show an additional icon above headline

Styling › Font Sizes

Heading Font Sizes
Select a custom font size for the heading.

Styling › Colors

Heading Color
Select a heading color
Custom Font Color
Select a custom font color for your Heading here
Custom Subheading Color
Select a custom color for your subheading here
Custom Seperator Line Color
Select a custom color for the seperator line beside the title here (only available on some styles)
Custom Icon Color
Select a custom icon color for your Heading here

Advanced › Link Settings

Header Text Link
Do you want to apply a link to the header text?

Default Heading

H2 Heading Style Modern (left)

Heading Style Modern (left) Subheading

H2 Heading Style Modern (centered)

Heading Style Modern (centered) Subheading

H2 Heading Style Modern (right)

Heading Style Modern (right) Subheading

H4 Heading Style Classic (left, italic)

Heading Style Classic (left, italic) Subheading

H4 Heading Style Elegant (centered, optional icon)

Heading Style Elegant (centered, optional icon) Subheading

Element: Headline Rotator

Creates a text rotator for dynamic headings

Headline Rotator Settings

Content

Prepended static text
Enter static text that should be displayed before the rotating text
Add/Edit rotating text
Here you can add, remove and edit the rotating text
Appended static text
Enter static text that should be displayed after the rotating text
Activate Multiline?
Check if prepended, rotating and appended text should each be displayed on its own line

Styling › Spacing

Margin – default setting – used for all screen sizes (no media query)
Set your custom margin.

Styling › Alignment

Text align
Alignment of the text

Styling › Color

Custom Font Color
Select a custom font color.

Styling › Font Size

Headline Font Sizes
Select a custom font size for the headline in pixel or viewport width.

Advanced › Heading Tag

HTML Markup
Select which kind of HTML markup you want to apply to set the importance of the headline for search engines

Advanced › Animation

Autorotation duration
Each rotating textblock will be shown the selected amount of seconds.
Rotation Animation
Select the rotation animation

Individual Text Element Settings

Content

Rotating Text
Enter the rotating text here (Better keep it short)

Styling

Custom Font Color
Select a custom font color.

Advanced

Text Link
Do you want to apply a link to the text?

We are great smart fast

We are great smart fast people

Element: Notification

Creates a notification box to inform visitors

Notification Settings

Content

Title
This is the small title at the top of your notification.
Message
This is the text that appears in your notification.
Button Icon
Should an icon be displayed at the left side of the button
Button Icon
Select an icon for your button below
Close Button
Display a button that closes the notification when clicked.

Styling › Size

Box Size
Choose the size of your box here

Styling › Colors

Message Colors
Choose the color for your box here
- Custom Color
  - Custom Background Color
    Select a custom background color for your notification here
  - Custom Font Color
    Select a custom font color for your notification here
- Gradient Color
  - Background Gradient Direction
    Define the gradient direction for background of the element
  - Gradient Color 1
    Select the first color for the gradient.
  - Gradient Color 2
    Select the second color for the gradient.
  - Gradient Color 3
    Select an optional third color for the gradient.
  - Custom Font Color
    Select a custom font color for your notification here

Styling › Border

Border Style
Choose the border style for your element here
Border Width
Select your border width.
Border Color
Select the border color for this element here.
Border Radius
Select your border radius(e.g. 5px).

Styling › Box Shadow

Box Shadow
Select to add a customized box shadow
Box Shadow Styling
Set the shadow styling values, you can use em or px, negative values move in opposite direction.
Box Shadow Color
Select a shadow color for this element here.

Advanced › Effects

Sonar/Pulsate Effect
Select a sonar/pulsate effect for the element.
Sonar Shadow Color
Select the color for the sonar shadow.
Sonar effect duration
Select approx. length of one effect, larger value slows down
Expand Scale
Select the expand value for the sonar effect
Element Opacity
Select the opacity of the element when expanding

IMPORTANT

This is a notification of some sort.

IMPORTANT

This is a notification of some sort.

FOR STUDENTS

This is a notification of some sort.

Element: Promo Box

Creates a notification box with call to action button

Promo Box Settings

Content › Text

Content
Enter some content for Promo Box

Content › Button

Promo Box Button
Do you want to display a Call to Action Button on the right side of the box?
Button Label
This is the text that appears on your button.
Button Icon
Should an icon be displayed at the left side of the button
Button Icon
Select an icon for your Button below
Button Label display
Select how to display the label

Styling › Button

Custom Background Color
Select a custom background color for your Button here
Custom Font Color
Select a custom font color for your Button here
Button Size
Choose the size of your button here

Styling › Promo Box

Custom Font Color
Select a custom font color here
Custom Background Color
Select a custom background color here
Background Gradient Direction
Define the gradient direction for background of the element
Gradient Color 1
Select the first color for the gradient.
Gradient Color 2
Select the second color for the gradient.
Gradient Color 3
Select an optional third color for the gradient.
Border Style
Choose the border style for your element here
Border Radius
Select your border radius(e.g. 5px).
Box Shadow Styling
Set the shadow styling values, you can use em or px, negative values move in opposite direction. If left empty 0 px is assumed
Box Shadow Color
Select a shadow color for this element here. Leave empty for default color

Advanced › Link Settings

Button Link
Where should your button link to?
Open In New Window
Select if you want to open the link in a new window and set additional SEO options (needs to be activated in “Theme Options -> Layout Builder”)
Custom Title Attribute
Set a custom title attribute for the link (used as tooltip on hover by most browsers and by screen reader).

Advanced › Effects

Button Opacity On Hover
Select the opacity for the element on hover
Sonar/Pulsate Effect
Select a sonar/pulsate effect for the element.
Sonar Shadow Color
Select the color for the sonar shadow.
Sonar effect duration
Select approx. length of one effect, larger value slows down
Expand Scale
Select the expand value for the sonar effect
Element Opacity
Select the opacity of the element when expanding

Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!

Large Button

Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!

Small Button

Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!

Medium Button

The UCLA Luskin Center for Innovation acknowledges the Gabrielino/Tongva peoples as the traditional land caretakers of Tovaangar (the Los Angeles basin and So. Channel Islands). As a land grant institution, we pay our respects to the Honuukvetam (Ancestors), ‘Ahiihirom (Elders) and ‘eyoohiinkem (our relatives/relations) past, present and emerging.

Click on the linked words to hear the pronunciation for the Tongva-language words.

3323 Public Affairs Building, Box 951656, Los Angeles, CA 90095-1656
Phone: 310-267-5435 | Fax: 310-267-5443