Arkhe専用のブロックパターンライブラリが公開されました。コピペするだけなので、とっても便利です。CSSコードブロックが付いているので、カスタマイズが出来ます。素晴らしい!!
情報としては大した内容ではありませんが、軽~くカスタマイズしたのでシェアします。初心者さんの助になれば嬉しいです。随時更新してゆく予定です。
ちなみに、Arkheは、基礎となる部分しかないテーマなので、どちらかと言うとWebの知識がある方向けです。ブロックパターンライブラリを使用しても、多くの部分は自作しなければなりません。
Webの知識が無くとも、ポチポチクリックするだけで簡単に見栄え良くサイトを作りたいのであればSWELLをお勧めします。ブロックパターンももっと簡単設定で完成しますし、種類も豊富でオススメです。
準備
WordPressのテーマ「Arkhe」と「Arkhe Block」プラグインが必要です。インストールして下さい。無料版でもいくつかは対応できます。必要に応じてPro版の購入が必要です。
サイトにアクセスし、好みのパターンを見つけます。コピーして、ブロックエディタにペーストするだけ!!
gnRichClmn03(汎用リッチカラム03・コンテンツ右)

画像の高さ(縦横比率)の変更
デフォルトでは3:2に設定されています。好みの比率にカスタマイズできます。2:1にした場合の例です。
※ビジュアルエディタ上では反映されません。
.arkp-gnRichClmn03 .arkp-gnRichClmn03__imgWrapper > img {
aspect-ratio: 3/2 ;
.arkp-gnRichClmn03 .arkp-gnRichClmn03__imgWrapper > img {
aspect-ratio: 2/1 !important;

テキストエリアの背景色の変更
.arkp-gnRichClmn03 {
--arkp--cont--overlap--x: 8rem;
--arkp--cont--bgc: #ココを好きな色にする;
アニメーションで動きをつける
テキストに動きを付けると、グッと変わります。アニメーションの付けたははいろいろありますが、CSSが手軽です。
@keyframesでいろいろ出来ます。とりあえず何かやってみた方が分かり易いと思います。

例えは、scMV03のテキストに動きを付ける場合
/* scMV03 */
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(100px);}
to {
opacity: 1;
transform: translateY(0);}
}
.arkp-scMV03 .ark-block-section__body{
animation-name: fade-in;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: both;
}
scMV05(メインビジュアル05)に付ける場合
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(100px);}
to {
opacity: 1;
transform: translateY(0);}
}
.arkp-scMV05 .ark-block-heading{
animation-name: fade-in;
animation-duration: 2s;
animation-delay: 0.2s;
animation-timing-function:ease;
animation-fill-mode: both;
}

Swiperでスライドにする
中級者以上向け:カスタマイズが必要です。基礎部分はArcheで提供して頂いているので、Swiperに必要な部分を足すだけでお手軽です。

コメント ※ハンドルネームでお願いします