torque Alert
アラートを出すためのもの。アイコンの有無、アイコンは左の上・真ん中・下から選べる。何故かmarginが効かない。何故か消すボタンが出ない。
これは type danger
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これは type Warning
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これは type info
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これは type Light
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これは type dark
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これは type light dark
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
torque Animated Text
下の例はinline だけど、blockにも出来る。
前のテキスト 後ろのテキスト
テキストTilt
- テキストを
- 変えられる
- 増やせる
後ろのテキスト
- テキストを
- 変えられる
- 増やせる
テキストTilt
- テキストを
- 変えられる
- 増やせる
後ろのテキスト
- テキストを
- 変えられる
- 増やせる
torque Business Hour
営業時間
torque Card
↓入れただけの状態
Your title goes here...
Your content goes here. Edit or remove this text inline or in the module content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
でも、これじゃない感。
高さが揃ってないんですよね。
いや、モバイルでは１カラムになるんで、全く問題ないんだけど。
タイトルテキスト１
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトルテキスト２
Your content goes here. Edit or remove this text inline or in the module content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
で、「行」の「詳細」→「カスタムcss」→「main」に以下を追加。
display:flex;
align-items: stretch;
更に各列に以下を追加。
display:flex;
※「カスタムcss」でタブレット以下では以下にする
dispaly:block;
すると↓になる。
タイトルテキスト１
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトルテキスト２
Your content goes here. Edit or remove this text inline or in the module content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
悪くないんだけど、やっぱりボタンもそろって欲しい。（あくまでPCでの話）
そこで、まずtorque card の境界線borderを０に。
代わりに列の境界線を１pxにする。
「行」のcssは以下のまま。
display:flex;
align-items: stretch;
各列のカスタムcssに記述した以下を消す。
display:flex;
で、torque cardモジュールの下に普通の「ボタン」モジュールを追加。
で、その「ボタン」モジュールの「詳細」→「位置」を「絶対の」にして位置を下の真ん中にする。
そして、「垂直オフセット」を30pxとか好みで入力する。
最後に「列」の「デザイン」→「余白」 でパディングのボトムを70pxくらいにする。
すると↓な感じ。
タイトルテキスト１
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトルテキスト２
ダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
タイトルテキスト３
説明文エリアにはメディアも挿入できる
なんか複雑になったので json ファイルを置いておきます。
使われる方は自己責任でご自由に。
※ダウンロードしたzipファイルを解凍すると「torque-card-3-clm.json」があります。
それを「ダッシュボード」→「Divi」→「Diviライブラリー」→「Import & Export」からインポートできます。
新しい「行」を追加する際に「ライブラリから追加」ってのがあると思いますが、そこから追加します。
torque CF7 styler
contact form 7 のスタイルを調整できる。
torque Diviber
Awesome
基本線
タイトル
torque Dual Button
二つボタンを作る。間の文字は消せる。２つのボタンの間隔も調整可能。
torque Image Carousel
イメージ、タイトル、説明文、ボタンのカルーセル。
イメージタイトル２
サブタイトル２
torque Info Box
card とか info box とか icon box とか似たようなモジュールがあります。これはYOUTUBEを選ぶところがあるのが特徴かな。
Your title goes here...
Your content goes here. Edit or remove this text inline or in the module content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
torque Logo Grid
使いどころはよく分からん。
torque Skill Bars
ビヨーンって伸びるのかと思ったらそのままなのね。
torque Team
elementor とかでもたくさんあるモジュール
でも使う機会がほとんどない。
Jane Doe
torque Testimonial
モジュールの説明
いろいろ弄ってこんな感じにしてみました。全体をセンター寄せにすると、ここの文字もセンターになるので、全体で左寄せに。
カスタムCSSのReviewの場所で text-align:left; を設定しても、ブラウザでは反映されない。あと、タグを書くとそのまま書き出されるように見えるが、ブラウザでは反映されている。
とあるレビュアーさん
いや、出来た。 p style="text-align:left;" にしたら左寄せになった。編集画面ではタグがそのまま見えて、左寄せにならなかったから出来ないものだと思っていたが、ブラウザでは反映されていた。