Stucco

Instruction

This explains how to add your own customization to make it like Live Demo site.
日本語はページ中央からご覧いただけます。

Cutomization STEPS

Header "Sample Contents site"

Add navigation content using Content Block to Header Navigation area

  1. Click Header Navigation area or drag and drop to...:
  2. Add a Content block
  3. Add a link
  4. Set up Font Awesome icon（Example: <em class="fa fa-users fa-fw"></em>） http://fontawesome.io/
  5. Apply "stucco-header-navi" custom class to the content block.

 

Live Demo site:

Let's add a Language Swicther block to Header Navigation, and apply the custom templates.

  1. Clock Header Navigation and select add a block, or drag and drop to
  2. Add Language Switcher block
  3. Apply "Stucco Select Language" custom template to the block.

* If you're making a multilingual site, please be careful with Global Areas. I recommend you to use 5.7.5 and later. concrete5.7.5 and earlier version doesn't have multilingual global area support.

 

Global navigation autonav block in "Global Navigation" area can let you customize easily by using its custom templates and custom styles.

  1. Click "Global Navigation" and add a block, or Drag and drop to
  2. Add a autonav block
  3. Apply "Stucco Global Navigation" custom templates
  4. OPTION: You can set the custom class to change the menu to left, center or right align.

You can create the navigation like Header Navigation arrea of Elemental Theme, or add a block to the Global Navigation area.

 

Home (Top page) Sample Content :

Select "Home" page type and "Home" page template

  1. Login as admin
  2. Go to Dashboard > Full sitemap >Home
  3. Select "Design and Type"
  4. Change to "Home" page template
  5. Change to "Home" page type

* If you didn't install Sample Content, please click "Page" or "Blank" page type and select "Home" page template.

 

Add Image Slider block to Hero area

  1. Click "Hero" area and add a block or drag and drop to:
  2. Add a Image Slider block

* If you've installed sample content, the image slider block should already added to Hero area. Please change the image to whatever you like.

You could also use Image block instead. 

 

In the Main area, Advanced Heading Original Block with Center custom class is used.

Advanced Heading block can let you choose the variety of lines including vertical, underline, double-line (on top and bottom), dotted-underline.

  1. Click "Main" area
  2. Click "Layout"
  3. Set up as 4 columns
  4. Add Advanced Heading blocks to each layout.
  5. Select format (H1~6) and styling option ( --none--, Left Border, Under Line, Double Lines, Dotted Under Line)
  6. Select "heading-centering" custom class
  7. Add additional Content Blocks
  8. Select the icons and apply "image-circle" and "image-centering" custom classes.
 

Page List block has "What's New" custom template. If the page is less than 7 days old, "NEW" icon shows up.

  1. Click "Main" area
  2. Click "Add a Layout"
  3. Set up 2 coiumns
  4. Set the image block on the left column
  5. Add "image-border" custom class
  6. Add a Page List block to the right column
  7. Apply "Stucco News List" custom template to it

 

Elemental Pages

Carousel uses Image Slider block, and apply custom templates to Feature block

  1. Click Main area to add a block, or Drag and drop to
  2. Add a Image Slider block
  3. Add a Feature block
  4. Apply "Stucco Card Description" to the feature block

 

Frequently Asked Questions Page

It uses Content block and Link Anchor Point block to indicate internal page link. Two FAQ blocks has been applied to different custom templates.

  1. Decide where you want to add a link anchor point
  2. Add a Link Anchor Point there.
  3. Add a Content block
  4. Refer the ID of Link Achor Point to add the internal page link.
  5. Add a FAQ block to the Section 1 on the top and apply "Stucco FAQ" custom template
  6. Add a FAQ block to the Section 2 on the bottom and apply "Stucco Q&A" custom template

 

Blog Pages

At the bottom of the page, it has a page list block with its own custom template

  1. Click Main area to add a block, or drag & drop to
  2. Add a page list block to the left column block
  3. Apply "Stucco News List" custom template to it.

 

Other pages

Basically, it is almost the same layout and content of Elemental Theme.

The live demo site uses topic andn topic list blocks to categorize portfolio, blog and blog entry pages.

 

日本語の説明はこちらからです。

カスタマイズ手順

ヘッダー Sample Contents site :

Header Navigation エリアに『記事ブロック』を使ったナビゲーションを追加しています。

  1. Header Navigation エリアをクリック
  2. 記事ブロックを追加
  3. リンクを追加
  4. Font Awesome を設定（例: <em class="fa fa-users fa-fw"></em>） http://fontawesome.io/
  5. カスタムクラス『stucco-header-navi』を適用

 

Live Demo site :

Header Navigation エリアに多言語サイト用にカスタムテンプレートを適用した『言語切り替えブロック』を追加しています。

  1. Header Navigation エリアをクリック
  2. 言語切り替えブロックを追加
  3. カスタムテンプレート『Stucco Select Language』を適用

※ 多言語サイトを制作する場合は、グローバルエリアに注意してください。
バージョン5.7.4以前は、各言語用のグローバルエリアが生成されませんので、バージョン5.7.5以降の使用をお薦めします。

多言語サイト作成の手順（注: 日本語のみ）
http://concrete5-japan.org/help/5-7/recipes/i18n/

 

Global Navigation エリアの『オートナビブロック』は、カスタムテンプレート、カスタムクラスを適用することで、左揃え、中央揃え、右揃え、両端揃えを選択できます。

  1. Global Navigation エリアをクリック
  2. オートナビブロックを追加
  3. カスタムテンプレート『Stucco Global Navigation』を適用
  4. オプション: カスタムクラスで左揃え、中央揃え、右揃え、両端揃えを選択

Elemental テーマのような Header Navigation エリアのナビゲーションと Global Navigation エリアのナビゲーションの2通りを選択できます。

 

Home ページ（トップページ） Sample Content :

ページタイプの『ホーム』、ページテンプレートの『ホーム』を選択してください。

  1. 管理画面 > フルサイトマップ > ホームをクリック
  2. デザインとタイプを選択
  3. ページテンプレート『ホーム』を選択
  4. ページタイプは『ホーム』

※ Sample Content をインストールしなかった場合は、ページタイプの『ページ』または『空白のページ』のページテンプレート『ホーム』を選択してください。

 

Hero エリアに『画像スライダーブロック』を使用しています。

  1. Hero エリアをクリック
  2. 画像スライダーブロックを追加

※ Sample Content をインストールした場合は、ページタイプの『ホーム』の『Hero エリア』に『画像スライダーブロック』を設定していますので、お好きな画像に入れ替えてください。
『画像スライダーブロック』のかわりに『画像ブロック』でも OK です。

 

Main エリアに設置したアイコンのタイトルには、カスタムブロック『詳細な見出し（ Advanced Heading ）』を使い、カスタムクラスで中央揃えにしています。
『詳細な見出し（ Advanced Heading ）ブロック』は、縦罫線、アンダーライン、ダブルライン（上下のライン）、ドット・アンダーラインが選択できます。

  1. Main エリアをクリック
  2. レイアウトをクリック
  3. 4カラムに設定
  4. 各カラムに詳細な見出しブロックを追加
  5. フォーマット（ H1～H6 ）、スタイルオプショ（-- なし--、縦罫線、アンダーライン、ダブルライン、ドット・アンダーライン）を選択
  6. カスタムクラス『heading-centering』を適用
  7. 記事ブロックを追加
  8. 各アイコンを選択して、カスタムクラス『image-circle』『image-centering』を適用

 

What's New の『ページリストブロック』はカスタムテンプレートを適用しています。
記事を公開して7日間は、『NEW』アイコンが記事タイトルの横に表示します。

  1. Main エリアをクリック
  2. レイアウトをクリック
  3. 2カラムに設定
  4. 左カラムに画像ブロックを追加
  5. カスタムクラス『image-border』を適用
  6. 右カラムにページリストブロックを追加
  7. カスタムテンプレート『Stucco News List』を適用

 

Elemental ページ

カルーセルは『画像スライダーブロック』、『特色ブロック』はカスタムテンプレートを適用。

  1. Main エリアをクリック
  2. 画像スライダーブロックを追加
  3. 特色ブロックを追加
  4. カスタムテンプレート『Stucco Card Description』を適用

 

Frequently Asked Questions ページ

『記事ブロック』と『リンクアンカーポイント（ Link anchor point ）ブロック』でページ内リンクを設定しています。
2つの『FAQ ブロック』には、それぞれ違う『カスタムテンプレート』を適用しています。

  1. Main エリアをクリック
  2. ページ内の移動したい箇所にリンクアンカーポイントブロックを追加
  3. 記事ブロックを追加
  4. リンクアンカーポイントブロックの ID を参考にリンクを設定
  5. ページ上部（ Section 1 ）の FAQ ブロックにカスタムテンプレート『Stucco FAQ』を適用
  6. ページ下部（ Section 2 ）の FAQ ブロックにカスタムテンプレート『Stucco Q&A』を適用

 

Blog ページ

ページ下部にカスタムテンプレートを適用した『ページリストブロック』を追加しています。

  1. Main エリアをクリック
  2. 左カラムにページリストブロックを追加
  3. カスタムテンプレート『Stucco News List』を適用

 

その他のページ

基本的に Elemental theme のレイアウトや内容と同じです。
Live Demo site は、トピックスを作成して『ポートフォリオ』『ブログ』『ブログ記事』の各ページに『トピックスリスト』を使用しています。