Bareungyeol theme (corporate website)
Bareungyeol theme (corporate website · corporate media)
This is the manual for Bareungyeol (bareungyeol), a paid Zittme theme for corporate and institutional websites and corporate media (newsrooms · in-house stories). It uses black type on a white background with card layouts where photos take center stage. On the cover, the latest posts from a board rotate as a photo slideshow, followed by featured article · story · recent news cards and a black inquiry call-to-action area. The subpage title band · banner · submenu tabs · content width are also set in the layout settings.
Demo: bareungyeol-demo.zitt.me · Store: zitt.me/store/package/37507
Components
| Component | Location | Role |
|---|---|---|
| Layout | themes/bareungyeol/layouts/bareungyeol | Site frame + built-in theme main page + subpage header |
| Board skin | themes/bareungyeol/modules/board | List · card · large gallery · webzine · FAQ |
| Member · message · Notification Center · system message skins | themes/bareungyeol/modules/{member, communication, ncenterlite, message} | Log in · my page · messages · notifications · system notices |
| Contact · Commerce · zittme Pay skins | themes/bareungyeol/modules/{contact, commerce, zittme_pay} | Applied only on sites where the module is installed. Commerce is for presenting and selling services · products |
Change the accent color (default green #00b04f) and color mode (light by default · dark · device setting) in Layout settings > Basic.
Installing and applying
- After purchasing in the store, register the domain you will use (license activation) to unlock the download. Install it from the engine (Admin > Store) or extract it to
themes/bareungyeol. - Select Bareungyeol in Admin > Design settings and apply it. The layout and module skins change at once.
- Create a board to use for the front page (e.g.,
journal) and add photos to its posts. Enter that board in "Cover slide board (mid)" under Layout settings > Home screen to complete the cover. - Main: The site front page (the site's default module) automatically becomes the main page. To use another page in main form, enter
min that menu's class in the sitemap. - Sub: All other pages. The order is title band → (submenu tabs) → content.
- Full width: Entering
widein the menu class makes the content fill the screen without a width limit (widget pages, etc.). - On the front page, the header overlays the cover photo transparently (white text) and becomes fixed with a white background when you scroll. If you use a logo image, also put a white logo in the "White logo image" field.
- Create the header button with "Header button label · link" in Layout settings > Basic. If empty, it is not shown.
- To hide the log in · account links from the header and keep them only in the mobile drawer, set "Show log in · account in header" to Hide.
- Photo slideshow: If you enter a board in "Cover slide board (mid)," the latest posts from that board that have a featured image become slides. The title appears large in the center of the photo, with a
1 / 4counter and arrows below. You can set the auto-advance interval (off · 4 · 5 · 8 seconds) and the number of slides, and it pauses on hover. - Static cover: If the board is left empty, you get a static cover using a background image · eyebrow line · title · description · button.
- Video cover (1.2.0): Enter an mp4 · webm URL in "Static cover background video" to loop a muted video behind the static cover. The background image is used as the first frame before the video loads. A pause button is added at the bottom right, and it does not autoplay for visitors who have "Reduce motion" turned on on their device.
- Slide auto-advance also gets pause · play buttons. When keyboard focus enters the slides, auto-advance pauses temporarily.
- Height: Full screen · Tall (80%, default) · Medium (620px).
- Small text above title: A short phrase in the accent color above the title (About, Since 2009, etc.).
- Background: None · Light gray · Dark. Gray · dark are painted to the screen edges to separate the section from those before and after. Photo band · inquiry CTA · careers banner · video use their own backgrounds.
- Where to show: If empty, the front page. Entering a page mid shows it on that subpage. Separate multiple places with commas (
about, ceo); to also show it on the front page, includehome. - Position on subpages: Below the content (default) · above the content.
- Turning off the visibility checkbox at the top right of a card hides it temporarily without deleting it. Drag cards to reorder them.
- Header style: Title band (photo background, default) · Title only (white background) · Hidden.
- Default title band background image and height (220 · 320 · 460px). Without a background image, it is a dark solid band.
- Title source: Top-level menu name (default) or the module (board · page) name.
- Breadcrumbs: Home / top-level menu / submenu.
- Submenu tabs: If the current top-level menu has second-level menus, "All · submenus…" tabs appear below the title band.
- Subpage content width: Same as the max content width, or 960px for readability.
- Per-page banners: Enter a page mid · background image · title · subtitle in the repeating field to style that page's title band separately. Entering a top-level menu's mid also applies it to the pages under it.
- The body summary in webzine · large gallery styles only appears when you turn on the "Summary (summary)" item in Board management > List settings. This is because the core only reads the body with the list when the summary item is present.
- Write · edit · delete buttons are visible only to members with permission. For boards only admins write to, like the FAQ, restrict "Write posts" to the admin group in Board management > Permissions.
- Demo menu structure: Stories → Inside (large gallery), Newsroom → Press releases (webzine), Contact → FAQ. Second-level menus automatically appear in the header dropdown and subpage tabs.
- Dark mode toggle button: If the color mode is set to "Match the visitor's device setting," a sun/moon button appears in the header. It follows the device setting at first and remembers the mode the visitor chooses. Board · member · contact · commerce skins switch along with it.
- Scroll reveal animation: Sections float up smoothly as they come into view. You can turn it off in the settings, and it is automatically off for visitors who have "Reduce motion" turned on on their device. Even if the script loads late, all sections become visible after 3 seconds.
- Button contrast: The accent color is used as is, but button backgrounds with white text and accent-color text on white backgrounds are automatically mixed slightly darker to meet WCAG AA (4.5:1) contrast. In dark mode, they are mixed lighter instead. Very light accent colors (yellow · light green) can make button text weak, so medium or darker colors are recommended.
- Keyboard: A "Skip to content" link at the very start, and focus outlines on all buttons · links.
- Printing: Prints in black and white without the header · menu · maps · videos, with FAQs expanded.
Recommended environment: Zittme 1.0.1 or later. Since this is a responsive theme, turning off the mobile-only view is recommended.
Page types
Header
It consists of the logo (image or text) · top menu (second-level menus as dropdowns) · text on the right (slogan) · search · cart (when Commerce is installed) · log in · an accent-color button (e.g., Contact us) · the mobile drawer menu.
Cover (home screen)
Featured image rules
Photos on cards and the cover use the post's featured image (thumbnail). If no thumbnail is found, the first image in the body is used instead. Be sure to include at least one photo in each post. Posts without photos are left out of the cover slideshow.
Built-in theme main page (main composition)
Assemble it in order with the "Main page sections" repeating field on the Main composition tab of Layout settings. If there are none, the default composition (featured articles → stories → recent news → inquiry CTA) is used.
| Section type | Content | Board mid | Count |
|---|---|---|---|
| Featured articles | 1 large card + small cards. Category name as a chip on the photo, board name as the source line | e.g., journal | 5 recommended |
| Stories | 2 wide cards + body summary | Board mid | 2 recommended |
| Recent news | Title on the left, horizontal row of cards on the right, dates | e.g., notice | 4 recommended |
| News | 3-column cards | Board mid | 3 or 6 |
| Company introduction | Small label + one block of large text (uses body) | - | - |
| Business areas | 4-column icon cards from the "Business areas" repeating field | - | - |
| Executives · members | "Executives · members" repeating field. Shows the first letter of the name if there is no photo | - | - |
| Key figures | "Key figures" repeating field. Numbers count up when they come into view | - | - |
| Client · partner logos | "Clients · partners" repeating field. Shows the name as text if there is no logo | - | - |
| Photo band | Full-screen photo + title · sentence · button (uses image · body) | - | - |
| Inquiry CTA | Title · sentence · outlined button on a black band (uses body · button label · link; adding an image makes a photo background) | - | - |
| Products · new products | 4-column Commerce product cards (when Commerce is installed). Shown as "Contact us" if the price is 0 | - | 4 recommended |
| Photo + text (left · right) | One photo side by side with a title · body · link. Alternating the two gives a zigzag layout | - | - |
| CEO message | Portrait photo + title + long body + signature. Enter the signature in the "Button label" field (e.g., CEO Kim Bareun) | - | - |
| History timeline | "History" repeating field (year · title · content · photo). A timeline connected by a vertical line and dots | - | - |
| Org chart | "Org chart" repeating field. Level 1 (top) · 2 (division) · 3 (team under the preceding division) | - | - |
| Awards · certifications | "Awards · certifications" repeating field (mark image · name · organization · year). Star icon if there is no mark | - | - |
| FAQ | "FAQ" repeating field. Title on the left, expandable list on the right | - | Number shown |
| Directions | Google Map + address · transit info (body) · phone · hours · map app buttons. Address goes in the "Board mid · address" field; if empty, the last line of the footer company introduction | - | - |
| Contact info | Title · sentence · contact button + the footer's phone · email · hours list | - | - |
| Careers banner | Accent-color band (adding an image overlays the accent color on the photo) + white button | - | - |
| Video | YouTube · Vimeo URL or mp4 in "Button link." The external player isn't loaded until clicked, so it's fast (YouTube uses the no-cookie URL). The image is the first frame | - | - |
| Resources · IR | Board posts as a table. Shows category · title · date · "N attachments" | e.g., ir | 4–6 |
Common section fields (1.2.0)
Example subpage assembly (same as the demo)
Create a page with short content (a one-line title + an intro sentence), then enter that page's mid in a section's "Where to show" to assemble the subpage from the layout.
| Page (mid) | Sections |
|---|---|
CEO message (ceo) | CEO message → Photo + text (right) |
History · organization (history) | History timeline → Org chart (gray background) |
Directions (location) | Directions → Contact info (gray background) |
About the company (about) | Key figures (dark) → Resources · IR → Awards · certifications |
Contact (contact) | FAQ (with home, contact to also show on the front page) |
Spacing · type system
Spacing between sections, between titles and content, between cards, padding inside band sections, and title · body font sizes are set from a single set of values. They shrink smoothly with screen width (72–120px between sections, 24–36px below titles, 16–28px between cards, 64–112px inside bands). Spacing stays the same in any section order, and adjacent band sections connect without a white gap.
Category chips
The black chip on the photos of featured article · recent news · news cards is the post's category name. Create categories like "People & Culture · Technology · Services · Company" in Board management > Categories and choose a category for each post to get a corporate media front page.
Subpages (settings tab "Subpages")
Board styles (board skin setting "List style")
| Style | Appearance | Demo |
|---|---|---|
| List | Table of number · title · author · date | Newsroom |
| Large gallery | The first post with a large photo + title, followed by 3-column photo cards. Category chips on the photos | Inside |
| Webzine | Thumbnail on the left + title · summary | Press releases |
| Card | Grid of bordered cards | - |
| FAQ | Accordion where clicking a question expands the answer. Grouped by category tabs | FAQ |
Content building blocks (company intro · organization pages)
Using the classes below in the body of a Page module (a regular page, not a widget page) gives you an intro page in the same style as the front page. Paste them in the editor's HTML mode. Wrapping everything in <div class="bg-page"> automatically adds spacing between blocks.
| Block | Markup | Use |
|---|---|---|
| Lead | <section class="bg-page-lead"><span class="bg-eyebrow">About</span><h2>Title</h2><p>Sentence</p></section> | First paragraph of the page |
| Photo + text | <section class="bg-split"><img src="..." /><div class="bg-split-copy"><span class="bg-eyebrow">Label</span><h3>Title</h3><p>Sentence</p></div></section> | Add is-flip to put the photo on the right |
| 3-column cards | <section class="bg-cols"><div class="bg-col"><em>01</em><strong>Title</strong><p>Sentence</p></div>…</section> | Principles · benefits · features |
| History | <section class="bg-timeline"><div class="bg-tl"><em>2009</em><strong>Title</strong><p>Sentence</p></div>…</section> | 4 columns, 2 on mobile |
| Quote | <section class="bg-quote"><blockquote>Sentence</blockquote><cite>Source</cite></section> | One line of large text |
| Photo band | <section class="bg-band" style="background-image:url('...')"><div class="bg-band-copy"><h3>Title</h3><p>Sentence</p></div></section> | Fills the full screen width |
| People list | <section class="bg-roster"><div class="bg-roster-item"><img src="..." /><strong>Name</strong><span>Position</span><em>Department</em></div>…</section> | <span class="bg-roster-photo">K</span> also works instead of a photo |
| Button row | <div class="bg-page-links"><a class="is-primary" href="/contact">Contact</a><a href="/shop">Services</a></div> | End of the page |
The demo's About (/about) · People (/riders) pages are built only with these blocks, so copying and editing their content is a quick way to start.
Services · products (Commerce)
Use the Commerce module to present and sell service products. A product's Summary field appears as the top line of the card (in the accent color), and the front page's product section uses square thumbnails. For quote-based products, setting the price to 0 shows "Contact us" on the front page (the store list shows ₩0, so it's better to enter a price).
Footer
Two colors: light · dark. Company introduction (address), main phone · email · business hours, social links (Instagram · YouTube · Facebook · LinkedIn · Blog), bottom notice text, business · contact info (one item per line), copyright, back-to-top button.
Dark mode · animation · accessibility (1.2.0)
Search engine structured data (1.2.0)
Adds schema.org Organization information to the front page. The company name (legal company name → logo text → site title, in that order), logo, main phone · email, address (the last line of the footer company introduction), and social URLs are taken from the footer settings. You can turn it off in Settings > Basic > "Company info for search engines."
Integrated search
Header search goes to the site's integrated search. The results screen is also drawn in the theme's style (tabs · result list · buttons). You must specify the modules to search in Admin > Integrated search for results to appear (if the target list is empty and set to "Include," "Search is unavailable" is shown).
All layout settings
Basic
Logo image · white logo image · logo text · header right text · header button label · link · accent color · max content width · color mode · use search · show log in · account in header · product store address (mid) · dark mode toggle button · scroll reveal animation · company info for search engines · legal company name · top menu · footer menu
Home screen
Cover display · cover height · cover slide board (mid) · number of slides · auto-advance interval · static cover background image · static cover background video · eyebrow line · title · description · button label · button link
Main composition
Main page sections (type · title · small text above title · body · image · board mid · address · button label · button link · count · background · where to show · position on subpages) · history · org chart · awards · certifications · FAQ · executives · members · business areas · clients · partners · key figures
Subpages
Subpage header · default title band background image · title band height · title source · breadcrumbs · submenu tabs · subpage content width · per-page banners
Footer
Footer color · company introduction · address · main phone · main email · business hours · 5 social URLs · bottom notice text · business · contact info · copyright notice