Text Element Topics
The Text Element is the primary element that allows you to enter in content throughout the website. Below is a comprehensive list of all the Text Element features.
Clear Formatting: Click to clear selected text of all formatting. Note: Style tags (P, H1, H2, etc) will remain after you clear formatting.
Bold (B), Italic (I), Underline (U): Click to apply to selected text.
Align (Left, Center, Right): Click to align selected text or images. Note: If you align an image left or right, the text will float up against the image.
Insert/Edit Link and Unlink: Apply or remove a link from your selected text or image.
How to insert a link:
To insert a link, highlight your text or image then click the Insert/Edit Link icon (). In the pop-up window that appears, add in your link to the URL field then click Ok. Please is an example link
Note: When linking to an internal page of your website, the full URL is not required. You will just need everything after the '.com'. Links to external website require the full URL. If you are linking to an external website, make sure to set the Target to 'New Window'. This will make the link open in a new tab of the user's browser when clicked on. This is a general best web practice for external links.
Additional guides on inserting a link:
- Video - Inserting a Link
- Video - How to create a button with a link
- Inserting a link to a PDF/Document
Paste As Text: If you copied text from an external program and paste it into the Text Element, the styling of your copied text will not transfer over. By default, this options is turned on. If you would like retain the styling of your text when pasted in, turn this icon off by clicking on it so its no longer highlighted. This option is turned on by default as most stylings from other documents are not in a web friendly font or format.
Bullet and Number List: Click to insert a number of bullet list. If you client an the small down arrow next to each icon, you can select different styles.
Color: Click to apply a text or background color behind the text
Both the Text and Background Color icons open a color picker that display basic color options. You can also apply your own custom color by clicking Custom. Under Custom you can enter in a Hex Color Code (#000000) or a RGB Color Code (0,0,0).
Insert/Edit Image: Click to insert an image from the File Manager.
How to insert an image:
- Click to place your cursor within your content to where you want the image to appear.
- Click on the Insert/Edit Image icon which will open up another window.
- In here, click on the the Finder Icon that is to the right of the Source field.
- This will open up a your website's File Manger in which you can upload and select an image.
- Once an image is selected, click Accept at the very top right.
- The same window from step #3 will appear again. In here, you can adjust other properties of the image.
Image Description: This field allows you to assign an Alt Tag to your image. An Alt Tag is used to assign SEO (Search Engine Optimization) value to the image.
Image Title: This field allows you to assign a Title Tag to the image. When a user hover overs an image, the Title Tag will appear after a few seconds.
Dimensions: This field allows you to adjust the overall dimensions of an image. The first box is the Width and the second box is the Height. You can assign a pixel or a percent value. Note: If you add percent, please include the % symbol, example 100%. If using a pixel value, just include the number.
Class: This field is not currently utilized at this time.
- Click Ok
- Make sure to click Save Changes to save the element
Additional guides on inserting an image
Horizontal Line: Click to insert a simple horizontal line to help divide text.
Source Code: This is is an advance feature to access the HTML coding of just this Text Element. This feature is very helpful if you need to copy the content of a Text Element and retain the styling to either duplicate it or move it to another page. Here is a helpful overview guide on duplicating a Text Element.
Edit Dropdown Menu
Undo: Undoes the previous action
Redo: Puts back the previous deletion
Cut: Cut selected area from your style editor
Copy: Copy selected area from your style editor
Select All: Select all in your style editor
Find and Replace: Find and replace something in the style editor
Clear Formatting: Clear selected area of all formatting but leaves the base style tag (same above).
Insert Dropdown Menu
Image: Browse your directory to insert an image.
Media: This option allows you to insert a video, such as one from YouTube
Link: Insert a link to the selected text
Page Break: Inserts a page break
Horizontal Line: Adds a horizontal line (same as the Horizontal line icon).
Special Character: Select from a huge assortment of special characters you want to include in your text
Anchor: Add an HTML anchor. Please see our guide here on how to add an anchor.
Insert date/time: Select a time to add
Nonbreaking space: Adds an HTML space
Template: Add a templated layout to the content. Note: This feature is not currently utilized in our template system.
View Dropdown Menu
Show invisible characters: Display hidden characters, such as blank spaces. (Great trick to find where extra spaces are coming from.)
Show blocks: Highlights text in faint grey background to indicate the style tag applied. To learn more about this feature, please see our guide here.
Visual aids: When enabled, tables inserted without a border will have a dotted line to help indicate where the table is.
Preview: Popups a window to preview the text
Fullscreen: Expand the window to be fully screen.
Source code: This is is an advance feature to access the HTML coding of just this Text Element. (Same as the source code icon above.)
Table Dropdown Menu
Tables can be inserted to help organize your text and/or images inside a Text Element. To insert a table, hover over Table and select the table size you wish to created.
Once a table is created, you can use the icons that appear below the table to add and remove columns/rows. The action is based off the current table cell you are clicked into.
Under the Table dropdown, you can also select Table Properties to adjust the dimensions, add a border, add colors, and much more.
Note: Tables with a set pixel width may not appear well on mobile devices due to the limited screen sizes.
Formats Dropdown Menu
Styles: You can select and apply a pre-made CSS styles to apply to your text. For example, the Title 1 correspond with the same styling set for your Heading 1 tag. Note: The 'custom colors' styles are only used on some of our custom design and not in our templates.
Headers: Apply a heading HTML tag, such as Heading 1 (H1) to your selected text. Under the 'Design' tab, you can adjust the properties, such as font-size and color, to the Heading tags.
Inline: Apply additional formatting to your selected text, such as strikethrough, superscript, subscript.
Blocks: Apply a Paragraph (also known as Main Text), Blockquote, Div, or pre HTML tag to your text.
Alignment: Apply left, right, center, or justified alignment to your selected text or image. (Same as the Align icons above.)
Font Family: Apply a font family to your selected text. Note: Each font name is also displayed in the font family to help provide a quick preview.
Font Size: Apply a font size to your selected text.
This tab allows for advance modifications
Display: Set the display of an element for mobile or full viewing. Note: If you are on a responsive template, this setting is not supported.
Align: Aligns the enter element to be inherit, left, center, or right.
Class: Apply a CSS class to the entire element. Note: If you are on a custom design, this may be used for some of your design.
Title: Set an title tag to the entire element. Note: This feature is currently no longer used.
Cache for: This feature is currently no longer supported due to our new platform wide caching system.
I'm not able to right click and paste text?
With our Text Element, you will have to use your keyboard shortcuts to paste in text.
Copy: ⌘ + C
Paste: ⌘ + V
⌘ is the command key
Copy: Control + c
Paste: Control + V
Is there a built in spell checker?
Text will be underline with a red squiggly line if misspelled, however, there are not suggested corrections.
Can I make the Text Element window bigger?
Click and drag the half dotted triangle in the lower left hand corner to expand the Text Element window
Can I upload or use other font families?
The font families included in our platform are popular Google Web Fonts. We are looking to add more Google Web Fonts in a future release.