logo

Palette - Make it Colorful🎨

Palette - Visual Page Builder, no design degree required.

Live Demo Download Palette

Scroll

Palette: コンポーネント

デザインとレイアウト

  • Section — 上記で説明したデザインラッパー(マージン、パディング、背景、境界線)。
  • Columns — レスポンシブな複数カラムのレイアウト。
  • Text — タイトルとリッチテキスト本文。

ボタンと行動喚起

  • Basic button — リンク、色、ホバー色、形状、サイズ、配置を備えた行動喚起ボタン。
  • CTA — 画像と最大2つの完全にスタイル設定されたボタンを備えた行動喚起ブロック。
  • Hero — タイトル接頭辞、画像、オーバーレイ、最大2つのボタンを備えたヒーローバナー。
  • Modal Dialog — アクセシブルなモーダルダイアログを開くボタン(独自実装、ライブラリ不要)。トリガーボタンはBasic buttonのすべてのスタイル設定オプションを再利用します。
  • Webform Popup — 既存のWebformをポップアップダイアログで開くボタン。Basic buttonの全スタイルを利用可能。

メディア

  • Image — キャプション、リンク、任意のライトボックスを備えた単一画像。
  • Images — 画像のシンプルなグリッド(各要素はImages item)。
  • Image Gallery — GLightboxポップアップで開く画像のグリッド(各要素はImage Gallery item)。
  • Video — アップロード可能なポスター画像を備えた単一動画。
  • Video Gallery — 再生ボタンのオーバーレイ付きで、GLightboxで開く動画と画像のグリッド。リモート(YouTube/Vimeo/MP4)とローカルメディア動画に対応(各要素はVideo Gallery item)。

インタラクティブとスライダー

  • Accordion — 折りたたみ可能なセクション(各要素はAccordion section)。
  • Tabs — 複数のスタイルと、jQuery不要の独自切り替えを備えたタブ付きコンテンツ(各要素はTabs item)。
  • Carousel — tiny-sliderで構築したスライダー(各要素はCarousel item)。
  • Slider — Splideで構築したスライダー、jQuery不要(各要素はSlider item)。
  • Sticky menu — リンクとサブリンクを備えたページ内固定ナビゲーション。

コンテンツとデータ

  • Quote — 著者と任意の画像を備えたプルクオート、複数スタイル。
  • Stats — 統計の行(各要素はStats item)。
  • Counter — スクロールで表示されるとカウントアップする数値、countUp.jsを使用(各要素はCounter item)。
  • Countdown — 指定日付までのアニメーション付きカウントダウン。
  • Tiles — リンク付きタイルのグリッド(各要素はTiles item)。
  • Timeline — マイルストーンの縦型タイムライン(各要素はTimeline item)。

サイト連携

  • Webform — 一覧から選択して既存のWebformを埋め込みます。
  • Views — 既存のビューとディスプレイを、任意の引数付きで埋め込みます。