Menu

Headings & Paragraph Font

Headings can be added as their own element or within a Rich Text Editor. To add within a rich text editor, type your text, highlight it, then select the appropriate heading from the "Formats" dropdown.

<H1> Open Sans Light 40px

<H2> Open Sans Light | Bold 24px

<H3> Open Sans Light | Bold 20px

<H4> Open Sans Light | SemiBold | Bold 18px

<H5> Open Sans Light | Regular | Bold 16px
<H6> Open Sans Light | Regular | Bold 14px

<BODY>Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Cras dapibus. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.

<BOLD>Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Cras dapibus.

<ITALICS>Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Cras dapibus. 

Paragraph before bulleted list.

  • List item
  • List item
  • List item

Paragraph after bulleted list.

  1. Numbered list
  2. Numbered list
  3. Numbered list

This is hyperlink text. Add Rich Text Editor, type your text, highlight all the characters you want linked, then click the "insert/edit link" icon.

BUTTONS

Buttons are only added within Rich Text Editors. You can align buttons using the align icons in the rich text toolbar. The KauligMedia.com site only uses 3 button colors: blue, black, and white.

Formats dropdown: You may not be able to see or access all the button options listed in the Formats dropdown depending on your screen/window size. To access all the styles, open the dropdown and hit the "down" arrow on your keyboard. You should see "Heading 1" highlighted. Next hit the "up" arrow, and the dropdown should scroll to the bottom and highlight the last item in the list.

Steps

1. Type your button text & highlight the text.

2. Click the "Formats" dropdown in the rich text editor toolbar, and choose "Button". (the default color is blue).

3. Re-select the "Formats" dropdown and choose your button color or style (only if you want a different color/style than the default blue). There is an inverted color style, a smaller, and a smallest button style that can be added with any color.

3. With the button text still highlighted (or re-highlight/select button text) click the link icon in the toolbar and link your button.

4. Alignment: default is left-aligned. Double click within the button to highlight the text and select a different alignment from the toolbar.

White Button

IMAGES

  • Rich Text Editor: images added within the editor will display true to its dimensions. Images larger than the container will stay contained.
  • Image element: images added using the Image element will fill the container (column width) it is added within, no matter its dimensions. This means if your image is smaller than the column container, the image will be stretched to fill it.

Image added within a Rich Text Editor

Image added using the "Image" element

Full Width Setting applied to row settings

Cyan Sugar - Formats Dropdown

Background Image

Change the text color within the row settings. That way it keeps the text black in the editor but changes it on the frontend. If you change the text color using the Formats dropdown, it will change it in the editor and you won't be able to see it if you change it to white.

Fixed Background Image

The settings listed here are specific to this image and its usage. However, the same general steps apply to any fixed background image.

1. On a Full Width row, add the background image within the row settings. (to access row settings, click the row title, "Full Width", then click the gear icon that appears on the far right)
2. Row Settings: check the "Fixed Background" class, Padding Top = Large, Padding Bottom = Large, (Set background image), Background Position = Center Bottom, Background Repeat = No Repeat, Background Size = Contain, Alignment = Center.
3. Column Settings: Padding Top & Bottom = Medium.

ELEMENTS

This is the "Quote" (singular) element
This is the "Quotes" (plural) element. It is used for Testimonials. Row Settings: Full Width. Lorem ipsum dolor sit amet. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Name Field Role / Title / Location

FEATURE BLOCK

Image/Content Row

400x400.png

Cyan Sugar + Heading 2

This element makes it easy to add an image + content row. There's a toggle labeled "Swap Image on Desktop" that allows you to change which side the image appears on desktop screens.

As companies execute digital marketing methods to reach their audiences, the need to have an effective lead nurturing strategy becomes obvious. Kaulig Media can help you accomplish your goals with several marketing strategies to drive conversions and generate revenue, including:

SLIDER

This element is versatile. It can be used as a video litebox player, or an image slider. It has the ability to add a slide title, description, image, and/or video link. If used as a video litebox, you'll want to add another mobile specific slider element without a slide title; hide it on desktop & tablet, and hide the desktop one on mobile via row settings.

Video Reel

MACROS

Formulte Form

Breadcrumbs

This macro allows you to add breadcrumbs anywhere on the page. Gives you more control/freedom over what to do in the header area. In Umbraco while editing the page at the very bottom there's a toggle called "Omit Breadcrumbs". This toggle will hide the programmed breadcrumbs, allowing you to then add the "Breadcrumbs" macro anywhere throughout the page.

Social Icons

This macro pulls the sites social media profiles & links into the page. Center aligns automatically. Social profiles are managed on the homepage node within umbraco.