What are HTML Blocks
An HTML block is a standard block used to add text, multimedia, widgets etc to a standard web page.
HTML Blocks in YumpeeCMS are the basic foundation of a YumpeeCMS powered site. You can add, move, and combine blocks on a page to create a custom layout. Each block is designed to add different types of content to different and most areas of your site.
The HTML block is flexible and can incorporate a variety of functions and uses in the content area. It has the standard tinymce Text editor for formatting text, adding images or creating links, switching to code view and allows any valid HTML mark-up to be used. This enables embedding video, sounds, Flash, and other files which can add unique elements to a course or site page.
How to create HTML Blocks in YumpeeCMS
In this section, you’ll learn how to add a new HTML block in YumpeeCMS. Blocks create a custom layout of text, images, videos, forms, and other content.
This is explained in the following steps;
Step 1: Hover your cursor over the Web menu option in the left hand navigation menu and in the drop-down menu, click the Blocks menu. You will be presented with a page similar to the screenshot below.
Step 2: Enter all the detail required of the Block- Give your block a unique name, Title and enter the contents of your block in the content area of the Standard Text Editor provided.
Please note that you can add HTML codes on your block content area, using the ‘source view’. Scroll Down to click on the Save Button.
Step 3: Refresh the page that you are and scroll down, you will find your new block created listed among the block created on your site. See the screenshot below
How to embed HTML Blocks on a page
One beautiful thing about HTML Blocks is that you can render the blocks anywhere within the content area of your web pages or posts.
This section will tell you how you can embed HTML Blocks on a standard page.
-
You can embed or render an HTML Block created on a webpage on yumpeeCMS, using the shortcode;
where “xxx” represents the name of the block that is already defined in yumpeeCMS
(You will learn more about yumpeeCMS shortcodes in subsequent chapters)
-
Remember in the previous section, we learned how to create HTML Blocks in yumpeecms. Now we will learn how to embed that defined block on a standard page
-
click on the Web --> Pages menu option at the left navigation pane.
-
Add the shortcode;
on the page content area where you want the block to render
-
Click Save
-
When you refresh the page and view it on a browser, you will see the HTML Block rendered on the page. See Screenshot below.