CKEditor5 Content Templates
In the CKEditor5 toolbar there is a template function 
which allows user to select a HTML template from a drop-down and insert it into the CKEditor5 text area. Several templates have been created for you. Template layout displayed in editing page may not look exact as published view. Use Preview tab 
to view published page layout before and after replacing placeholders with your own content.
How to Upload Images and Replace Image Placeholders
1. Click the image placeholder, then click the Insert images icon 
in the toolbar to upload your image.
NOTE: Use the recommended pixel size or aspect ratio in the template for image uploads.
Do not drag image corner to resize image as the width is fixed in published view.
Do not adjust image alignment.
How to Replace Text Placeholders
1. Highlight the text placeholder, then enter your text.
NOTE: Do not shift row for placeholders in the template.
How to Replace Hyperlinks
1. Highlight the link text placeholder, enter your link text, then click on the Edit link icon 
in the
pop-up window to enter your link URL.
NOTE: Do not change link text through the pop-up window to avoid error.
How to Start a New Line after a Template
1. Put the mouse cursor at the very front line below the current template row to start a new line.
NOTE: Do not use "Enter" key at the end of the template row to start a new line.
How to Remove a Placed Template
1. Highlight the whole template and tap Delete, or use the Undo icon 
if newly added.
2. For templates with background block or image, after delete text, tap Backspace key to remove
the background block or image.
NOTE: Do not remove individual items in a single row of a template.
How to Update Content Created with Content Template
1. Highlight the existing text or image and replace with new ones as described above.
2. For deletion, remove the whole row of content.
NOTE: Do not only remove individual items of a template row
Tips for Using Content Template
- Use the Preview tab in editing page to view how does the published view looks like.
- Only replace placeholder image and text, do not try to shift lines for text or adjust image alignment.
- Resize image to the recommended pixel size or aspect ratio with picture editing tool such as Photoshop or Paint app before image upload.
- If messed up template during process, remove the template and insert it again.
Example
The following examples are displayed in the full width container. You may use with container that has left navigation.
Feature Box
Image on the left, text on the right
Your title here
Add your text here. For instructions on using this template, visit: Content Template.
Your title here
Your subhead here
Add your text here. For instructions on using this template, visit: Content Template.
Your title here
Your subhead here
Add your text here. For instructions on using this template, visit: Content Template.
Your title here
Your subhead here
Add your text here. For instructions on using this template, visit: Content Template
Read More
Your title here
Your subhead here
Add your text here. For instructions on using this template, visit: Content Template
Read More
Promo With Round Images
Row of circular Image above center aligned title and text.
Promo With Square Images
Icon image above center aligned title and text
Images With Captions
Images with caption text below the image
Add your caption text here. For instructions on using this template, visit: Content Template
Add your caption text here. For instructions on using this template, visit: Content Template
Add your caption text here. For instructions on using this template, visit: Content Template
Add your caption text here. For instructions on using this template, visit: Content Template
Add your caption text here. For instructions on using this template, visit: Content Template
Text Box With Garnet Border
Text box with header on garnet border
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum tortor eget libero eleifend, a scelerisque quam consectetur.
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum tortor eget libero eleifend, a scelerisque quam consectetur.
Promo
Equal width columns with center aligned title and text
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Promo With Arrows Or Points
Same height text box with an arrow or with a point
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Add your text here. For instructions on using this template, visit: Content Template
Color Block
Full width block with color background and center aligned title and text.
Your title here
Your subhead here
Add your text here. For instructions on using this template, visit: Content Template
Your title here
Your subhead here
Add your text here. For instructions on using this template, visit: Content Template
Image Gallery
Row of images with or without caption
No caption for image
Image with caption
Add your caption text here. For instructions on using this template, visit: Content Template
Secundum praesent ulciscor
exerci te dolore importunus
Duis tamen hos erat vicis
Qui blandit consectetuer
Secundum praesent ulciscor
exerci te dolore importunus
Duis tamen hos erat vicis
Promo With Arrows and Images - Two
Promo With Arrows and Images - Three
Promo With Arrows and Images - Four
Background Image Fixed
Scrolling title text on fixed background image
Use an Image Size of 1600(w) x 758(h) Pixels
To replace the background image, click on the Source tab 
to view source code. Replace the placeholder image url with your image url (highlight in yellow):
<div class="feature fixed-background" style="background-image:url('/sites/default/files/default_images/dodd-cover.jpeg');">
NOTE: If you don't have an image url, you can first upload image in the placeholder block, copy the url of the uploaded image (red text in the example) to replace the placeholder image url as described above. Next, you need to hide but not delete the uploaded image itself, by adding code style="display:none;" to the <img> tag as shown below in yellow. This will allow the image stored in database but not display at the spot.
Example:
<img style="display:none;" data-entity-uuid="87a11d6c-80ee-4981-8839-88754ba76583" data-entity-type="file" src="/sites/default/files/img/Sample%20image%20large_3.jpg" width="1800" height="600" alt="graduation ceremoney">
Background Image Static
Center aligned title text with shadow on a background image
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
To replace the background image, click on the Source tab 
to view source code. Replace the placeholder image url with your image url (highlight in yellow):
<div class="feature static-background" style="background-image:url('/sites/default/files/default_images/1600x758.jpg');">
NOTE: If you don't have an image url, you can first upload image in the placeholder block, copy the url of the uploaded image (red text in the example) to replace the placeholder image url as described above. Next, you need to hide but not delete the uploaded image itself, by adding code style="display:none;" to the <img> tag as shown below in yellow. This will allow the image stored in database but not display at the spot.
Example:
<img style="display:none;" data-entity-uuid="87a11d6c-80ee-4981-8839-88754ba76583" data-entity-type="file" src="/sites/default/files/img/Sample%20image%20large_3.jpg" width="1800" height="600" alt="graduation ceremoney">
To replace the background image, click on the Source tab to view source code. Replace the placeholder image url with your image url (highlight in yellow):
<div class="background s3-gt" style="background-image:linear-gradient(to left, rgba(245, 246, 252, 0.1), rgba(0, 0, 0, 0.8)), url('/sites/default/files/default_images/ratio-3-1-1800x600.jpg');background-size:cover;">
NOTE: If you don't have an image url, you can first upload image in the placeholder block, copy the url of the uploaded image (red text in the example) to replace the placeholder image url as described above. Next, you need to hide but not delete the uploaded image itself, by adding code style="display:none;" to the <img> tag as shown below in yellow. This will allow the image stored in database but not display at the spot.
Example:
<img style="display:none;" data-entity-uuid="87a11d6c-80ee-4981-8839-88754ba76583" data-entity-type="file" src="/sites/default/files/img/Sample%20image%20large_3.jpg" width="1800" height="600" alt="graduation ceremoney">
Footer Link List
Six columns of link lists
Lorem Ipsum Dolor
Consectetur Adipiscing Elit
Sed Do Eiusmod
Ut Enim Ad Minim
Aliqua Ut Enim
Ex Ea Commodo Consequat