Basic Elements

Build your content with these versatile elements.

Basic elements can be found in the element library under Basic. They are the default elements in YOOtheme Pro and have their own content fields and settings. To learn more about general element settings, see the corresponding documentation.

Basic elements


Alert Element

The Alert element displays a success, warning or error message. It has Title, Content and Link fields. Take a look at the alert element demo for a detailed showcase.

Show Alert Demo

The alert has various style options. Use an optional title and add a large padding for the alert.

Alert style

The alert title can be displayed in the same line as the content.

Alert title

Options for the different content fields are very similar across all elements. They are described in the corresponding Headline and Text element documentation. Mind that the Link field links the whole alert text and has no further settings.


Code Element

The Code element displays code in a preformatted text block which is why it only consists of one Content field. It has no element-specific options. Enable syntax highlighting in the Advanced settings of YOOtheme Pro.

Show Code Demo


Countdown Element

The Countdown element displays a countdown timer for a specific date. It has Date and Labels fields for days, hours, minutes and seconds. For the date, use the ISO 8601 format: YYYY-MM-DDThh:mm:ssTZD, e.g. 2017-05-01T22:00:00+00:00 (UTC time). Take a look at the countdown element demo for a detailed showcase.

Show Countdown Demo

Set the size of the column and row gaps between the numbers. Additionally, show or hide a separator between them.

Option Description
Column Gap Set the size of the column gap between the numbers.
Row Gap Set the size of the row gap between the numbers.
Separator Show a separator between the numbers.

Countdown settings

Display labels for the numbers and set their top margin.

Countdown label margin


Divider Element

The Divider element displays a horizontal divider which is why it has no content fields. Take a look at the divider element demo for a detailed showcase.

Show Divider Demo

The divider has various style options. If set to Small, the divider can be aligned horizontally.

Option Description
Style Choose a divider style.
HTML Element Choose the HTML element independent of the style to fit the semantic structure.
Alignment Set an alignment for the small divider. Center, left or right alignment may depend on a breakpoint and require a fallback.
Alignment Breakpoint Define a device width from which the alignment will apply.
Alignment Fallback Define an alignment fallback for device width below the breakpoint.

Divider alignment


Headline Element

The Headline element displays a headline. It has Content and Link fields. Take a look at the headline element demo for a detailed showcase.

Show Headline Demo

Option Description
Style The headline has various style options. They differ in font size and font family.
Decoration Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
Font Family Select an alternative font family. Mind that not all styles have different font families.
Color Select a color for the headline.
Link Style If the headline has a link, select a hover effect.
HTML Element Choose the HTML element independent of the style to fit the semantic structure.

Headline settings


HTML Element

The HTML element displays custom HTML code and has only one Content field. It has no element-specific options.


Icon Element

The Icon element displays an SVG icon. It has Icon and Link fields. Type in the name of the icon in the Icon field or click on the pencil to pick an icon from the icon library. Take a look at the icon element demo for a detailed showcase.

Show Icon Demo

The icon has various color options. Additionally, set the icon width in pixels.

Icon color and width

The linked icon can be displayed as a button or a link.

Icon link style


Image Element

The Image element displays an image. It has Image and Link fields. The image width and height options are described in the files and images documentation. Take a look at the image element demo for a detailed showcase.

Show Image Demo

The image has various border options.

Image border

Set a box shadow for the image. Additionally, if the image is linked, set a separate box shadow for the image on hover.

Image box shadow

The image comes with various box decorations. Additionally, select a floating shadow or a mask as a box decoration.

Image box decoration

SVG images can be injected into the page markup and further styled with CSS. Optionally, enable stroke animation so that the image looks as it is being drawn.

Option Description
Inline SVG Inject SVG images into the page markup so that they can easily be styled with CSS.
Animate Strokes Enable stroke animation.
Image SVG Color Select the SVG color. It will only apply to supported elements defined in the SVG.

Image SVG images

There is an option to open an image link in a modal. This could be an image, video, or YouTube or Vimeo link. Any other link will be opened in an iframe.

Option Description
Link Target Open the link in a same or a new window or open it in a modal.
Modal Width/Height Set the width and the height of the modal content, i.e. image, video or iframe.

Image link


Newsletter Element

The Newsletter element displays a newsletter signup for Mailchimp or Campaign Monitor. Set their API keys in the External Services settings of YOOtheme Pro. Take a look at the newsletter element demo for a detailed showcase.

Show Newsletter Demo

Choose whether the form fields are positioned next to each other or stacked. Additionally, if the layout stacks, make the button take the full width. In addition to the email address, the newsletter form can also collect the first and last names. There is an additional layout where the name fields are shown side by side while the email address and button stack. In this case, the button can have an extra top margin.

Newsletter layout

Set the size of the form fields as well as the gap between them.

Newsletter size and gap

Choose between the default and the blank newsletter style.

Newsletter style

Select whether a button or a clickable icon inside the email input is shown. Options for the button style are described in the corresponding Button element documentation.

Newsletter mode


Overlay Element

The Overlay element displays an image with a content overlay. It has Image, Video, Title, Meta, Content, Link and Hover Image fields. Take a look at the overlay element demo for a detailed showcase.

Show Overlay Demo

The overlay can be displayed as a cover or a caption. Show the overlay from the beginning or only on hover. Select a hover transition. Additionally, there is an option for the cover mode to only fade in the background while the overlay content is visible from the beginning.

Overlay mode

Mind, there is minimum height option for the image to prevent the content overlay from becoming larger than the background image on small devices.

Overlay image min height

The overlay has various style options. It can look like a transparent overlay or an opaque tile, or show just the content.

Overlay style

Set the text color for the overlay content to either light or dark. If necessary, inverse the text color on hover, for example, when using a hover image or when a different background fades in on hover.

Option Description
Text Color Set light or dark color mode for text, buttons and controls.
Inverse Text Color on Hover Set an opposite text color on hover.

Overlay text color

Select the padding between the overlay and its content. There are various options to position the overlay and its content in regard to the overlay image. Additionally, if a style is selected, apply a margin between the overlay and the image container and set the maximum content width.

Option Description
Padding Set the padding between the overlay and its content.
Position Select the overlay or content position.
Margin Apply a margin between the overlay and the image container.
Max Width Set the maximum content width.

Overlay padding, position and margin

Select an image transition. If the hover image is set, the transition takes place between the two images.

Overlay image transition

Additionally, select a transition for the title, meta and content when the overlay appears on hover.

Overlay title transition

There are various options to link the Overlay element. Either link the title separately or link the whole overlay. Additionally, set the hover style for the title. The style is kept even if the whole overlay is linked.

Overlay Option Description
Overlay Link Link the whole overlay if a link exists.

Overlay link

Title Option Description
Title Link Link the title if a link exists.

Overlay title link

Options for the different content fields are very similar across all elements. They are described in the corresponding Headline, Text, Image, Icon and Button element documentation.

Note Mind that multiple overlays can also be displayed in the Gallery and Overlay Slider elements.


Panel Element

The Panel element displays content and an image in one element. It has Title, Meta, Content, Image, Icon and Link fields. Take a look at the panel element demo for a detailed showcase.

Show Panel Demo

The panel has various style options. It can look like a card, tile or a blank panel. If a card style is selected, the image can also be aligned without padding.

Panel style

There are various options to link the Panel element. Either link the title, image and button separately or link the whole panel. Additionally, set hover styles for the title and image. These styles are kept even if the whole panel is linked.

Panel Option Description
Link Link the whole panel if a link exists.

Panel link

Title Option Description
Link Link the title if a link exists.
Hover Style Set the hover style for a linked title.

Panel title link

Image Option Description
Link Link the image if a link exists.
Hover Transition Set the hover transition for a linked image.
Hover Box Shadow Select the image's box shadow size on hover.

Panel image link

The panel title can be aligned to the left of the content. The title column width can be the same size as the title, a fixed width or percentage. Additionally, define the grid gaps and set the breakpoint from which the title stacks. Choose whether the meta text is aligned above or below title or content.

Title Option Description
Alignment Align the title to the top or left in regards to the content.
Grid Width Define the width of the title within the grid. Choose between percent and fixed widths or expand columns to the width of their content.
Grid Column Gap Set the size of the gap between the title and the content.
Grid Row Gap Set the size of the gap if the grid items stack.
Grid Breakpoint Set the breakpoint from which grid items will stack.

Panel title alignment

Meta Option Description
Meta Alignment Align the meta text above or below title or content.

Panel meta alignment

The Panel element also has an option to force left alignment for the content. This way the whole panel can be centered, and only the content is left aligned.

Panel force left alignment

The panel image can be aligned in regard to the content. If aligned to the left or right, the image column width can be the same size as the image, a fixed width or percentage. Additionally, define the grid gaps and set the breakpoint from which the image stacks.

Image Option Description
Alignment Align the image to the top, left, right or place it between the title and the content.
Grid Width Define the width of the image within the grid. Choose between percent and fixed widths or expand columns to the width of their content.
Grid Column Gap Set the size of the gap between the image and the content.
Grid Row Gap Set the size of the gap if the grid items stack.
Grid Breakpoint Set the breakpoint from which grid items will stack.
Vertical Alignment Vertically center grid items.

Panel image alignment

Options for the different content fields are very similar across all elements. They are described in the corresponding Headline, Text, Image, Icon and Button element documentation.

Note Mind that multiple panels can also be displayed in the Grid and Panel Slider elements.


Quotation Element

The Quotation element displays a quotation. It has Content, Author, Author Link and Footer fields. Take a look at the quotation element demo for a detailed showcase.

Show Quotation Demo

The quotation has various link style options.

Quotation link style


Text Element

The Text element displays plain text and therefore has one Content field. Take a look at the text element demo for a detailed showcase.

Show Text Demo

The text can display first letter of the paragraph as a large initial. It also has various style options. Additionally, choose a text size and color.

Option Description
Drop Cap Display the first letter of the paragraph as a large initial.
Text Style Select a predefined text style, including color, font size and font family.
Text Size Select the text size.
Text Color Select the text color.

Text settings

The text can be divided into multiple columns with optional dividers between them. Additionally, select a device for the column breakpoint.

Option Description
Columns Set the number of text columns.
Show dividers Show dividers between text columns.
Column Breakpoint Set the device width from which the text columns should apply.

Text columns


Totop Element

The Totop element displays an icon which scrolls back to the top of the page. It has Title and Link Title fields. Take a look at the to-top element demo for a detailed showcase.

Show To Top Demo

By default, the Totop element only displays an icon. Alternatively, type in the title which will be displayed next to the icon.

Totop link title

Options for the title field are described in the corresponding Headline element documentation.


Video Element

The Video element displays a video file or a YouTube or Vimeo video. It has Video and Poster Frame fields. Take a look at the video element demo for a detailed showcase.

Show Video Demo

Set a box shadow or a box decoration for the video. Additionally, select a floating shadow or a mask as a box decoration.

Option Description
Box Shadow Select the image box shadow size.
Box Decoration Select the video box decoration style.
Inverse Style Inverse the box decoration style.

Video box shadow and decoration

The Video element can be set to loop, autoplay, mute, and it can additionally play inline on mobile devices. Mind that the video file only autoplays on mobile when muted.

Option Description
Show controls Show video controls.
Loop video Loop video.
Mute video Mute video.
Play inline on mobile devices Play the video inline on mobile devices.
Lazy load video Enable lazy loading for the video.
Autoplay Disable autoplay, start autoplay immediately or as soon as the video enters the viewport.

Video options and autoplay

YOOtheme Pro Documentation