Wixでは、スマートフォンのデザインを編集する場合、モバイルエディタを使用する必要があります。
このモバイルエディタでは、少し面倒くさい仕様があります。
通常エディタのデータがモバイルエディタに反映されると言う仕様です。
要するに、PC用のホームページデザインをモバイル用に調整して使用する形になります。
なので、PC版のHPデザインを完成させる前に、モバイル用のデザインを先に作るという流れは事実上不可能になっています。
流れとしては、PC版のデザインを完成させて、モバイル版のデザインを調整する形です。
もう一つルールとして、「モバイルエディタでは、パーツを追加、編集(一部可)することができない、また、モバイル版ではパーツを編集することができない」というものがあります。
要するに、モバイル版のパーツを編集したいならPC版のパーツを編集してね。と言うことですね。
この仕様によって、モバイル版だけデザインを変えたい場合、大変手間が掛かってしまいます。
では、どうやって変更するのかを簡単に説明します。
先ほど、「モバイル版ではパーツの追加、編集ができない」と書きましたが、実はパーツを「非表示」にすることはできます。
これを利用して、PC版のエディタにモバイル版に使用する画像やパーツを配置して、表示非表示で組み合わせてデザインを変更するといった事が可能です。
上記の画像では、モバイル版に使用する「シェイプ」を、PC版エディタの画像の後に隠す形で配置しています。
こうすることで、PC版では表面上に見えなくなります。
上記の画像にある三角形のシェイプが画像の後に隠れています。
余談ですが、配置している画像はアニメーションで動かしているので、サイトを読み込んだ後に、後に隠れているシェイプが見えてしまうので、シェイプにもアニメーションを適用して、画像のアニメーションよりも後に表示されるように設定しています。
後はモバイルエディタを表示させて、先ほど配置したシェイプをモバイルのデザインに組み込んでいきます。
必要のないパーツは非表示にしましょう。
非表示になるのはモバイル版だけなので大丈夫です。
ちなみに上記の画像では、ストリップパーツも3つPC版のエディタに配置して隠しています。
モバイル版のパーツをPC版のエディタに配置して隠すのは大変ですが、このようにパーツを背面に隠すことで、モバイル版の非表示機能を利用してPC版とは別のデザインにすることは可能です。
テキストに関しては、SEO上の問題もあるので、同じようなテキストをPC版のエディタで隠すのはオススメできません。
モバイル版のデザインをちょっとだけ変更したい時などに、この方法をお試しください。