Posted on

Desain Ulang Website Freshplus62.Com

wpJakarta.Com – Desain Ulang Website Freshplus62.Com. Belum lama ini kami baru saja mendesain ulang website fresh (+62) (freshplus62.com). Website jaringan (NetWork) kami yang juga berjalan pada platform CMS WordPress. Freshplus62.com yang fokus pada penjualan sayuran dan bahan makanan baik untuk kebutuhan harian rumah tangga maupun untuk pasokan usaha restoran. Karena fungsinya sebagai e-commerce atau toko online, freshplus62.com menggunakan plugin WooCommerce untuk mendukung fungsinya sebagai online store.

wp jakarta tips-trik wordpresswp jakarta tips-trik wordpress

Artikel ini akan sedikit memberikan informasi tentang bagaimana kami men desain ulang website freshplus62.com baru-baru ini. Terutama pada tampilan homepage. Pada artikel ini juga mungkin kami akan menuliskan selector css, atau script html dan css yang sebetulnya dimaksudkan sebagai dokumentasi internal kami sendiri. wpJakarta sejatinya adalah dokumentasi internal dari setiap kustomisasi yang dilakukan pada website jaringan kami sendiri. Note : Di masa mendatang artikel ini mungkin menjadi tidak relevan apabila terdapat lagi perubahan atau desain ulang website freshplus62.com.

Artikel lainnya

Sebelum desain ulang website Freshplus62.Com

Desain Ulang Website Freshplus62.Com

Sebelum di desain ulang, desain lama website freshplus62.com sebelumnya terlihat begitu “native” namun dengan banyak kustomisasi, kebanyakan pada fungsi plugin WooCommerce dan kustomisasi tema website yang digunakan -storefront. Misalnya : Hanya menampilkan harga hanya pada logged-in. Harga yang ditampilkan berbeda pada masing-masing kustomer yang berbeda. Penambahan meta “unit harga” karena menjual produk berdasarkan kilogram dan pcs. Setiap kustomisasi tersebut sudah pernah kami tuliskan di website ini pada halaman kategori WooCommerce maupun artikel yang di tag “storefront”.

Native karena memang freshplus62.com menggunakan tema dasar storefront by WooCommerce. Tidak banyak kustomisasi visual karena ingin mengedepankan performa. Storefront juga dipilih karena freshplus62.com adalah toko online dengan plugin utama WooCommerce. Agar WooCommerce dapat berjalan sempurna, maka tentu saja storefront adalah pasangan yang paling ideal. Namun pada desain sebelumnya, tampilan visualnya agak kaku dan tidak memberikan informasi yang maksimal terhadap para pengunjung atau calon kustomernya.

Artikel lainnya

Desain ulang website Freshplus62.Com (header)

Pada tampilan baru, freshplus62.com tetap ingin terlihat native namun memberikan informasi yang jelas tentang apa dan bisnis apa yang dijalankan. Freshplus62.com tetap ingin mengandalkan performa (pagespeed), dan tidak ingin ada banyak plugin yang terinstal, termasuk tanpa elementor. Maka baik halaman frontpage maupun halaman lainnya tetap menggunakan editor default WordPress (gutenberg). Plugin lainnya yang digunakan juga besifat fungsional, artinya hanya plugin esensial yang digunakan. Keamanan, Caching dan SEO.

Meskipun di desain ulang, website freshplus62.com tetap ingin terlihat “native”, maka tidak ada perubahan pada header. Hanya sedikit kustomisasi dengan menambahkan topbar yang memberikan informasi terkait promo, produk atau layanan. Lalu pada bagian hero menggunakan gambar yang tidak terlalu tinggi, gambar yang sederhana namun mampu “berbicara banyak” memberikan informasi tentang bisnis yang dijalankan. Di bagian bawah hero ada CTA yang tetap dipertahankan tentang bagaimana kemudahan melakukan pemesanan di freshplus62.com.

Artikel lainnya

Desain ulang website Freshplus62.Com (content)

Pada bagian content di tampilkan kategori produk menggunakan shortcode WooCommerce dengan bingkai border . Lalu produk per kategori, produk paling laris serta informasi yang ingin di sampaikan kepada pengunjung atau calon kustomer perihal produk yang di tawarkan. Tidak lupa di tampilkan “why us”, seksi dimana biasanya website perusahaan menampilkan keuntungan yang di tawarkan layanannya.

 [product_categories ids=" " orderby="include" columns="5"],

Selanjutnya masih pada bagian tengah homepage (konten), freshplus62.com menampilkan seksi blog dan info, seksi dimana terdapat tampilan grid artikel-artikel terbaru dari informasi perusahaan maupun blog-blog yang terkait dengan usaha atau layanan perusahaan. Artikel atau blog di freshplus62.com memang terdapat pada folder root yang sama dengan instalasi WordPress, alias tidak di tempatkan pada subdomain. Untuk membuatnya rapih tentu saja artikel selalu di lengkapi dengan “featured image” dengan ukuran yang di standarkan yaitu 1024 x 640 px. Tidak seperti artikel di wpJakarta.Com yang kadang tidak di lengkapi dengan gambar, heheheheh.

Desain ulang website Freshplus62.Com (content / footer)

Masih di bagian konten, tepatnya di bawah. Tetap di tempatkan beberapa paragraph informasi yang menjadi kesimpulan dari bisnis atau layanan freshplus62.com. Termasuk terms yang digunakan sebagai penjelasan dari beberapa terms yang di tulis pada bagian hero header. Selain informasi kepada pengunjung ini juga untuk mengakomodasi SEO, pada paragraph tersebut sebenarnya terdapat keyword yang sebenarnya juga di gunakan sebagai layanan inti dari freshplus62.com.

Dokumentasi CSS

#homepg > div.entry-content > div.wp-block-cover.alignfull {
 margin-bottom:0;
}

.page-template-template-fullwidth-php .site-main ul.products.columns-5 li.product {
 border:1px solid #71b02f;
 padding:0 0.2em;
}

.prod-home-border {
 border:1px solid #71b02f;
 padding:2em 1em;
}

@media only screen and (max-width: 767px) {
 .wc-block-grid__products .wc-block-grid__product-image img {
 width: 46.411765%;
 float:left;
 margin-right:5.8823529412%;
 }
}

.inner-fprod-home-border {
 border:1px solid #aaa;
 padding:0.5em;
 text-align:justify;
}

@media only screen and (min-width: 768px) {
 #post-4244 > div.entry-content > div.wp-block-columns.alignwide.prod-home-border > div:nth-child(1n) > div > ul > li:nth-child(1n) > div.wp-block-button.wc-block-grid__product-add-to-cart {
 display:none !important;
 }
}

.p-home {
 padding-left:1em;
 border-left:3px solid #71b02f;
}

.wp-block-image figcaption {
 text-align-last:left;
}

Desain ulang website Freshplus62.Com (footer/site-info)

Yang terakhir pada bagian footer (widget dan site-info). Di bagian footer hanya menggunakan beberapa widget WordPress. Sementara pada bagian footer site-info, selain merubah storefront credits, kami tambahkan (lagi) paragraph tentang informasi layanan dan keuntungan berbelanja online di freshplus62.com.