INTRODUCTION TO BUILDING TEMPLATES
III. How Do You Use the Code Editor?
What are groups and why use one? What type of groups can you create?
Groups are essential for providing some rigid structure to responsive design. By grouping modules, it adds them to a parent DIV.
Grouping also ensures that the modules stick together. So if you size and resize the screen, they are not going to break apart and appear on different parts of the page.
Global groups — Used when the group or module must be used across multiple page templates
Local groups — Used to ensure that specific modules always stick together and for cohesive styling.
What types of modules are available to you?
Text Module, Visual Content Module, Header Module, Social Sharing Module, Conversion-related Module, Navigation Module,
A rich text module is the most commonly used module as it can contain text, images, videos, call-to-action and more.
One line of text module. This can help guide the content creator if you wish to prevent the content creator from writing a paragraph of text in a particular space or prevent them from changing the text styling.
Basic page footer module that pulls the company name and copyright information from Content Settings. While this is a good starting point, you might want to customize this
module to include contact information, a navigation menu, or even a map.
Pro tip: add descriptive filler text to a text module to give the content creator an idea of how the module should appear when filled out.
Visual Content Modules
Logo- The end user’s logo, which can be uploaded under their Content Settings.
Image- A module meant specifically for uploading an image.
A one line text header.
A one line text header with a smaller subheader.
Header values (ex. <h1> or <h2>) are chosen within the module’s Edit Options menu.
Social Sharing Modules
This module enables easy sharing across the end user’s preferred social networks.
This module pulls information from the end user’s Social settings, making it easy to follow their company’s social media accounts.
This menu is static and used on a page-by-page basis.
This menu can be used on multiple templates in either a horizontal or vertical orientation.
A column that allows for adding more modules to a group from the Content Editor.
Custom HTML or HubL Template:
A module for adding custom markup and embeddable items
such as a Twitter feed.
A module that adds a new DIV to keep two modules separate.
Define how much space in the CSS.
Why is place holder text important?
Add descriptive filler text to a text module to give the content creator an idea of how the module should appear when filled out.
How are modules moved and split?
CSS or Cascading Style Sheets are coded files that select elements of your page and control their presentation. You can think of the templates that you create and their HTML as the bones of your website, and the CSS as the skin of your site.
What modules are used for lead generation?
Call-to-Action - A module for buttons that create an offer, such as a free guide or whitepaper.
They typically direct visitors to Landing Pages.
Form - Used on Landing Pages or Contact Us pages.
Forms convert site visitors into leads by gathering information in exchange for an offer.
What modules are specific to blog layouts?
Blog Content- The most basic element of a blog template. It displays blog posts from the Blogging tool.
Post Listing- Creates a list of blog posts by date or by popularity.
Post Filter-This module creates a list filtered by different criteria, such as authors or topics.
Blog Email Subscription- A simple form that allows visitors to subscribe to the site’s blog.
What are body classes?