Prebuilt Websites – Avada Website Builder https://avada.com For WordPress & WooCommerce Fri, 13 Sep 2024 08:33:55 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 Avada Campaign: Deconstructing a Prebuilt Website https://avada.com/blog/avada-campaign-deconstructing-a-prebuilt-website/ https://avada.com/blog/avada-campaign-deconstructing-a-prebuilt-website/#respond Fri, 13 Sep 2024 08:33:55 +0000 https://avada.com/blog//

Say hello to Avada Campaign. This Avada prebuilt website is ideal for beginners, marketers, professionals, and anyone in between. Avada Campaign can be imported at the click of a button and is highly flexible. Every aspect of the prebuilt website is easily customizable, and it can be adapted and branded to suit any business model or venture using the Avada Website Builder.

In this article, we will explore the header, footer, and homepage layouts that make up the overall website structure to explore how the Avada Website Builder is used to create successful websites. The Avada Campaign article is a part of a deconstruction series and is the follow-on article that explores the Avada Vape prebuilt website. It is important to highlight that Avada gives you total design freedom to create unique layouts for your website that work, with the only limit being your imagination.

Overview

Styling and Features

Creating a style guide for your website will prove to be invaluable in the future. A style guide will help you to address usability, the user experience, design consistency, and online trends in an organized and consistent manner.

The Avada Website Builder has a vast array of features and styling options; however, you do not need to use all of them for your website, and this is where your style guide comes in. Decide upfront which styling options align with your brand and which design features are needed to make your website stand out.

Performance & Optimization

Optimizing your websites for page load speed can be a seemingly complex subject because so many different facets affect how fast a page loads. It can range from the server’s speed to the options and settings selected, right through to the type and amount of content and even the size of the images added to the page or post.

The Avada Performance Wizard

The Performance Wizard takes the guesswork out of how to best optimize your Avada website. To get you started you are presented with a step-by-step interface that will guide you through the process.

Performance Wizard Start Screen

What is important to note is that you should build your website first before running the Performance Wizard. Creating your website’s structure, placing design elements in situ, and formulating content ensures that the system has something to work with when searching for recommendations at each step of the process. The recommendations provided are for options that can be disabled or enabled to enhance overall performance.

  • Features
    Disable any features not used on the website, thereby reducing the amount of code that is loaded.

  • Avada Icons
    Scan your website for information about icons that are being used. You can also disable unused icon sets and discover how to optimize existing icons.

  • Avada Fonts/Typography
    Check which fonts are being loaded on your website and then optimize how those fonts are served. Fewer variants will mean fewer requests and, therefore, faster loading times.

  • Avada Elements
    Scan your website to discover which Design, Layout, and Form Elements are not used on the website. Disable unused Elements, thereby reducing the amount of code that is loaded.

  • Optimization
    Optimize how the website’s CSS and JS assets should be enqueued. These options can have a significant impact on the performance of the page load. However, some of these options can also break functionality if you use a caching plugin, so proceed with caution.

Above The Fold Optimization

“Above the fold” is the part of a webpage that is immediately visible on your desktop or mobile screen without scrolling down. Traditionally, this digital real estate is where most would choose to display attention-grabbing headlines, important sales/marketing content, images, and even slider plugins as part of the page’s hero.

Above The Fold Optimization

The rate of content delivery for a website, and in particular the perceived speed experienced by the end-user on a mobile device, is at the heart of Google’s Core Web Vitals. Thus, passing Core Web Vitals inevitably leads to a delicate balance between good SEO, attention marketing, and page load times for a website owner.

To assist you with managing your website’s performance and optimization, our team introduced purpose-built tools and features for Avada that can make it possible for you to fine-tune your website’s performance on mobile & desktop.

Generate Critical CSS

Critical CSS is a convenient performance feature. You can enable Critical CSS by going to the Performance Wizard > Optimization tab. Once it has been enabled, you can access the Critical CSS page from the WordPress sidebar at Avada > Critical CSS or Maintenance > Critical CSS from the Avada Dashboard. Both take you to the Critical CSS page to generate Critical CSS for both pages and posts.

Critical CSS

Critical CSS is the CSS necessary to style the above-the-fold content. When generated for a page, it will be loaded into the page head, and the rest of the CSS styles moved to the footer, resulting in less render-blocking and a faster page load time.

Resources

Even with all of the performance options provided, Avada plays a lesser part than you might imagine when it comes to site optimization. Websites running Avada as the primary WordPress theme can be configured to optimize the layouts and structure that can lead to vastly improved page load scores. Still, ultimately, user content will principally dictate how fast and efficient your website will perform according to Google Core Web Vitals.

Color Palette

#be1e2d
#6094e1
#ffffff
#be1e2d
#6094e1
#ffffff
#be1e2d
#6094e1
#ffffff

The color palette selected for the Avada Campaign prebuilt website is a set of monochromatic colors, as seen above. If you would like to change the Avada Campaign color palette, this can be done within the options panel, as explained in this help file and video.

Color increases brand recognition, and it can influence people in how they feel about a website. Colors produce different emotions in people, making it essential to choose the right colors for your website. The balance of white space, contrast, and well thought out color schemes are vital elements of good web design. If you have not already decided on your brand colors, choosing a color palette for your website can be confusing. However, using a handy tool like the Adobe Color Wheel or any of the myriad of app choices online, you can undoubtedly make this task effortless.

We suggest checking out HubSpot’s article on color theory.

Typography

Website Typography can be more important than you realize, from your brand and user perspective to your website’s overall look and style. It is often underrated and is, in fact, an art form and technique in itself. The following HubSpot guide to website typography will give you some great insights into the do’s and dont’s choosing which fonts work best for your Avada website.

The Avada Website Builder has a vast array of Typography controls, options, and font selections to make your job easier. See this detailed help file and video to get you started.

Below are the fonts used for the Avada Campaign prebuilt website:

Headings

H1, H2, Font Family: Outfit
H3, H4, Font Family: Outfit
H5, H6, Font family: Outfit

Body

Font Family: Outfit

We suggest checking out HubSpot’s article on The Ultimate List of Web-Safe HTML and CSS Fonts.

To Get Started You Will Need The Following

To get started with the Avada Website Builder and to create your ideal website, there are a few things that you will need;

Recommended Plugins

What are recommended plugins, and do you need them? In short, it is not the end of the world if you choose not to install and activate the plugins used with any particular Avada prebuilt website. Let’s take the Avada Campaign prebuilt website as an example:

It is created as a WooCommerce focussed site, and therefore the WooCommerce plugin should be installed and activated at the point of installing the prebuilt site.

If you decide not to install the WooCommerce plugin, the full site will still be imported, but the eCommerce aspect will not be active. The following plugins have been used with the Avada Campaign website:

WooCommerce

The Events Calendar is 100% design integrated with the Avada WordPress Website Builder. The Events Calendar plugin offers a Pro version as well as a Free version. If you only want to use the Event Calendar plugin’s core features, then the free version will suffice. However, if you would like to receive premium events plugin support and additional features, then you can purchase the Pro version.

If you decide not to install the The Events Calendar plugin, the full site will still be imported, but the this aspect will not be active.

The Events Calendar

World-Class Support And Resources

Many facets set the Avada Website Builder apart from the competition. None more important is that Avada is not reliant on 3rd party builders and tools to deliver a stable and seamless website building experience. No waiting for external developers and toolset creators to deliver the next update for your theme. We take pride in the fact that Avada is 100% maintained, evolved, and developed according to strict WordPress and PHP coding standards. Avada gives you peace of mind and guarantees that what you have to work with will always be ahead of the latest industry requirements.

What is a Prebuilt Website?

Simply put, prebuilt websites are complete websites that have been designed and built to fit an industry niche. Each website comprises pages, posts, content layouts, images, or various media types representing or showcasing an online presence for a target audience or business type.

Avada prebuilt websites and prebuilt content layouts (individual page or post content, layout sections, Call-to-actions, etc.) are carefully crafted by our talented team of designers to give you, the Avada user, a way to save time when prototyping a new website.

Avada’s prebuilt websites are a fantastic resource for creativity and inspiration. They will make web design a more efficient and productive process for beginners, marketers, and professionals alike. Here are some essential facts:

  • They are created to save you time when building a new website.
  • A prebuilt website can be imported with a few clicks.
  • Each prebuilt website is mobile and SEO friendly.
  • Each prebuilt website is entirely customizable to suit your project and branding needs.
  • You can white-label any prebuilt website for client work.
  • Prebuilt websites are included with your purchase of the Avada Website Builder.
  • Each prebuilt website is optimized for performance.

Fast One-Click Install

Importing any Avada Prebuilt Website is as simple as clicking a button, with pre-import selections making it highly flexible. You can choose to import a full website (more than 109 to choose from) and parts of any other and anything in between. Choose pages, posts, portfolios, images, sliders, theme options, widgets, or uninstall as you prefer.

Avada Prebuilt Website Import

Website Structure

A page or post structure is divided into four main sections: the Header, the Page Title Bar, Content, and the Footer. With the Avada Website Builder, you can independently edit each of these sections to create super flexible and stunning layout designs.

Below is a list of the Avada Campaign pages and posts that have been prebuilt just for you. Once installed, you can change all aspects of each Layout, and at any time, add new pages to suit your online business needs.

Explaining Layouts & Layout Sections

Before we look at the specific Layouts on the Avada Campaign prebuilt website, the first thing to understand is the Layouts and Layout Sections’ architecture. You can think of Layouts as a container for the page content. In contrast, the actual content comes from the various Layout Sections. There are four Layout Sections on a page – the Header, Page Title Bar, Content, and Footer Layout Sections.

There is a default Global Layout, and any Layout Sections added to that will be shown on all pages of your website. There are Conditional Layouts with conditional logic to determine how the Layout will be used.

You can make as many Layouts and Layout Sections as you like, and you can use the Layout Sections in multiple Layouts. But you can only use a specific condition on a single Layout, so the theme knows which one to use.

See Understanding Layouts & Layout Sections and Understanding Conditional Layouts for more info.

Avada Layout Sections Legend

Explaining WordPress Pages vs. Posts

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

What Can I Change? Is the Design Flexible?

The Avada Campaign prebuilt website is exactly that, prebuilt, for you. If the design and style suit your website needs, you can use it as a starting point, and you can change as much or as little as you need to.

The most obvious details that you will want to change at first is the website’s wording, titles, color scheme, and images. You can choose to leave the overall layouts as is or Drag and Drop to rearrange the content’s order. Further to that, you can add or remove any of the Design Elements to fine-tune your preferred business narrative. In short, you can change every single aspect of the prebuilt website’s Layout and content.

Editing a page’s content and layouts is done using the Drag and Drop live editor or using the traditional back-end method. The first image below shows the Live visual Drag and Drop editor is used to edit the content:

Live Editor

The image below shows the traditional back-end method is used to edit the content:

Back-end Editing

A Side By Side Comparison (Builder vs. No Builder)

We have created a side by side point of reference that illustrates the differences in building a website using the Avada Website Builder to design custom Layouts vs. not using The Avada Website Builder and only using predefined options. The latter will allow you only to build a basic site, in comparison.

Exploring The Homepage Layout

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

The Header

For the Avada Campaign prebuilt website, the Header was created using the Avada Header Builder and is set globally across the website. This means that every page and post will use the same Header layout without any further conditions set. For example, you can change this if required by creating a unique Header layout for different pages or posts.

Avada Campaign Header

The Page Content

The content part of the homepage, the area between the Header and Footer, does not use a page title bar. You can change this page’s content in an infinite number of ways to best suit your business marketing and brand requirements.

Page and Post content is structured using Container and Column Elements, and if required, Nested Columns. Check out the help file links below for detailed information and videos explaining what they are and how to use them:

  • What are Containers, and how to use them? Read more here.
  • What are Columns, and how to use them? Read more here.
  • What are Nested Columns, and how to use them? Read more here.

The Hero

Avada Campaign Hero

Instead of using a traditional image slider, like the Avada Slider or Slider Revolution, as the above-the-fold hero section, this prebuilt site uses a Container with a Background Image. The container is structured using one 8% width Column for spacing, one 38% width Column holding a Button Element, a Title Element, a Text Block Element, and a Nested Columns Element.

Simply put, nested columns are columns within columns and this Nested Columns Element is structured with one 1/1 (100% width) Column holding two Button Elements.

This is followed by one 58% width Column holding a Nested Column Element. The Nested Columns Element is structured using one 1/1 (100% width) Column holding an Icon Element, two Text Block Elements, a Title Element, and an Image Element.

Political Banner

Avada Campaign Political Banner

This section was created using a Container structured with one 1/4 (25% width) Column holding an Icon Element and one 3/4 (75% width) Column with a Background Image, holding a Button Element and a Title Element.

Manifesto

Avada Campaign Manifesto

This section was created using a Container with one 2/5 (40% width) Column holding a Title Element and a Nested Columns Element and one 3/5 (60% width) Column holding Text Block Element and Button Element.

The Nested Columns Element is structured with one 1/6 (16.67% width Column holding an Icon Element and one 5/6 (83.33% width) Column holding a Title Element.

Missions

Avada Campaign Missions

This section was built using a Container with one 1/1 (100% width) Column holding a Text Block Element and a Title Element.

This is followed by three 1/3 (33.33% width) Columns, each containing an Image Element, a Section Separator Element, and a Nested Columns Element. The nested columns are structured with one 1/1 (100% width) Column holding an Icon Element, a Title Element, a Text Block Element, and a Button Element.

News Ticker

Avada Campaign News Ticker

This section was created using a Container with one 22% width Column holding a Title Element and one 78% width Column holding a News Ticker Element.

About Us

Avada Campaign About Us

This section was created using a Container with two 25% width Columns collectively holding three Image Elements, with one 4% width Column for spacing. This is followed by one 46% width Column holding two Text Block Elements, a Title Element, a Button Element, and a Nested Columns Element.

The Nested Columns Element is structured with two 14% width Columns each holding an Icon Element and two 30% width Columns each holding a Title Element and a Text Block Element.

Video

Avada Campaign Video

This section was created using a Container with a Video Background and one 3/5 (60% width) Column holding an Icon Element, a Title Element, and a Text Block Element.

Join Our Campaign

Avada Campaign Join Our Campaign

This section was created using a Container with one 1/3 (33.33% width) Column holding a Title Element, one 1/2 (50% width) Columns holding a Text Block Element, and one 1/6 (16.67% width) Column holding an Icon Element.

This is followed by one 1/1 (100% width) Column holding an Avada Forms Element. The Form Builder is very flexible and allows you to create many types of forms that you can use on your Avada website. For any form that you create, you can add them to a page or post as a single instance or you can set the form to display globally across the website, which then allows you to manage one form. If a form is showing on all pages, for example, and you edit the form, the same changes show across all form instances.

Events & Volunteer Banner

Avada Campaign Events & Volunteer Banner

This section was created using a Container with one 60% width Column holding a Title Element, a Text Block Element, a Post Cards Element, a Separator Element, and a Button Element, as well as one 8% width Column used for spacing.

This is followed by one 32% width Column holding two Nested Columns Elements and an Image Element. Each Nested Columns Element holds one 1/1 (100% width) Columns collectively holding three Text Block Elements, two Title Elements, an Image Element, and a Button Element.

News Articles

Avada Campaign News Articles

This section was created using a Container with two 1/1 (100% width) Columns holding an Image Element, a Title Element, a Text Block Element, and a Post Cards Element.

This is followed by one 40% width Column holding an Image Element and one 60% width Column holding a Post Cards Element.

Call-to-Action

Avada Campaign CTA

This section was created using a Container with one 3/5 (60% width) Column holding two Text Block Elements and a Title Element and one 1/3 (33.33% width) Column holding a Button Element, a Text Block Element, and a Title Element.

A website footer aims to help visitors by providing appropriate information and navigation options at the bottom of website pages. Website footer design is underrated and more valuable to your website than you may think and is essential to the overall end-user experience. Three key points stand out, namely:

  • A footer should provide a website visitor with additional choices. If you want people to sign up for your mailing list, view a product demo, or contact you, inviting them at the end of a scroll is a compelling call to action.
  • A footer should create a path for continued engagement by including navigation links to products, services, or other parts of your website.
  • A footer can access essential information like ways to contact your company and customer services, privacy statements, and potential legal disclaimers.

For the Avada Campaign prebuilt website, the Footer was created using the Avada Footer Builder and this particular Footer content and Layout is set to display globally across the website. This means that every page and post will use the same Footer layout without any further conditions set. For example, you can change this if required by creating a unique Footer layout for different pages or posts. Let us take a closer look below:

Footer Content

Avada Campaign Footer

The Footer section is created using a Container holding multiple Columns. These Columns contain Title Elements, Text Block Elements, Menu Elements, Image Elements, an Avada Form Element, and a Social Links Element, with the use of Dynamic Data Options to display the website information.

In Summary

There are 109 Avada prebuilt websites to choose from, with more being added regularly. Our amazing design team created these prebuilt websites as a way to give you a head start when building your next website.

You can change the styling, Layouts, content as much or as little as you need to quickly adapt any individual prebuilt site to suit your chosen niche. Get started with the Avada Website Builder today and launch your business online; Fast.

]]>
https://avada.com/blog/avada-campaign-deconstructing-a-prebuilt-website/feed/ 0
10 Mobile-Friendly Websites Built With Avada And WordPress https://avada.com/blog/10-mobile-friendly-websites-built-with-avada-and-wordpress/ https://avada.com/blog/10-mobile-friendly-websites-built-with-avada-and-wordpress/#respond Fri, 16 Aug 2024 07:12:57 +0000 https://theme-fusion.com/?p=735871

Designing and building a new website can seem complex, yet it is a lot simpler than you may think. Where do you start? Which platform would best suit your brand delivery and workflow?; these are common questions many people ask.

Look no further than Avada! As the #1 selling WordPress theme on the Themeforest marketplace for over 10 years, Avada offers a powerful and versatile platform for building your website. With its intuitive visual front-end design and editing tools, you can create beautiful websites quickly and easily.

Avada is a Website Builder for WordPress with flexible and intuitive website design tools that will empower you to create websites of any style. And the best part is that no coding knowledge is required. Whether you are a beginner, a marketer, or a professional, Avada will give you the confidence to manage your online store stress-free.

The 10 websites that are showcased in this article are popular prebuilt websites downloads. Avada’s prebuilt content and websites are fully customizable and adapted to suit any website type. Also, feel free to check out these 15 best Avada Corporate websites.

Overview

Avada Marketing Consultant

Avada Marketing Consultant

Avada Business Coach

Avada Business Coach

Avada Interior Design

Avada Interior Design

Summary

To get started designing your ideal website, there are a few things that you will need;

These prebuilt websites are designed as a way to give you a head start so that you will save time. You can change the styling, Layouts, and the content as much or as little as you need to quickly adapt any individual prebuilt site to suit your chosen niche. Get started with the Avada today and launch your business online; Fast.

]]>
https://avada.com/blog/10-mobile-friendly-websites-built-with-avada-and-wordpress/feed/ 0
Avada Vape: Deconstructing a Prebuilt Website https://avada.com/blog/avada-vape-deconstructing-a-prebuilt-website/ https://avada.com/blog/avada-vape-deconstructing-a-prebuilt-website/#respond Thu, 01 Aug 2024 08:43:18 +0000 https://avada.com/blog//

Say hello to Avada Vape. This Avada prebuilt website is ideal for beginners, marketers, professionals, and anyone in between. Avada Vape can be imported at the click of a button and is highly flexible. Every aspect of the prebuilt website is easily customizable, and it can be adapted and branded to suit any business model or venture using the Avada Website Builder.

In this article, we will explore the header, footer, and homepage layouts that make up the overall website structure to explore how the Avada Website Builder is used to create successful websites. The Avada Vape article is a part of a deconstruction series and is the follow-on article that explores the Avada Portfolio prebuilt website. It is important to highlight that Avada gives you total design freedom to create unique layouts for your website that work, with the only limit being your imagination.

Overview

Styling and Features

Creating a style guide for your website will prove to be invaluable in the future. A style guide will help you to address usability, the user experience, design consistency, and online trends in an organized and consistent manner.

The Avada Website Builder has a vast array of features and styling options; however, you do not need to use all of them for your website, and this is where your style guide comes in. Decide upfront which styling options align with your brand and which design features are needed to make your website stand out.

Performance & Optimization

Optimizing your websites for page load speed can be a seemingly complex subject because so many different facets affect how fast a page loads. It can range from the server’s speed to the options and settings selected, right through to the type and amount of content and even the size of the images added to the page or post.

The Avada Performance Wizard

The Performance Wizard takes the guesswork out of how to best optimize your Avada website. To get you started you are presented with a step-by-step interface that will guide you through the process.

Performance Wizard Start Screen

What is important to note is that you should build your website first before running the Performance Wizard. Creating your website’s structure, placing design elements in situ, and formulating content ensures that the system has something to work with when searching for recommendations at each step of the process. The recommendations provided are for options that can be disabled or enabled to enhance overall performance.

  • Features
    Disable any features not used on the website, thereby reducing the amount of code that is loaded.

  • Avada Icons
    Scan your website for information about icons that are being used. You can also disable unused icon sets and discover how to optimize existing icons.

  • Avada Fonts/Typography
    Check which fonts are being loaded on your website and then optimize how those fonts are served. Fewer variants will mean fewer requests and, therefore, faster loading times.

  • Avada Elements
    Scan your website to discover which Design, Layout, and Form Elements are not used on the website. Disable unused Elements, thereby reducing the amount of code that is loaded.

  • Optimization
    Optimize how the website’s CSS and JS assets should be enqueued. These options can have a significant impact on the performance of the page load. However, some of these options can also break functionality if you use a caching plugin, so proceed with caution.

Above The Fold Optimization

“Above the fold” is the part of a webpage that is immediately visible on your desktop or mobile screen without scrolling down. Traditionally, this digital real estate is where most would choose to display attention-grabbing headlines, important sales/marketing content, images, and even slider plugins as part of the page’s hero.

Above The Fold Optimization

The rate of content delivery for a website, and in particular the perceived speed experienced by the end-user on a mobile device, is at the heart of Google’s Core Web Vitals. Thus, passing Core Web Vitals inevitably leads to a delicate balance between good SEO, attention marketing, and page load times for a website owner.

To assist you with managing your website’s performance and optimization, our team introduced purpose-built tools and features for Avada that can make it possible for you to fine-tune your website’s performance on mobile & desktop.

Generate Critical CSS

Critical CSS is a convenient performance feature. You can enable Critical CSS by going to the Performance Wizard > Optimization tab. Once it has been enabled, you can access the Critical CSS page from the WordPress sidebar at Avada > Critical CSS or Maintenance > Critical CSS from the Avada Dashboard. Both take you to the Critical CSS page to generate Critical CSS for both pages and posts.

Critical CSS

Critical CSS is the CSS necessary to style the above-the-fold content. When generated for a page, it will be loaded into the page head, and the rest of the CSS styles moved to the footer, resulting in less render-blocking and a faster page load time.

Resources

Even with all of the performance options provided, Avada plays a lesser part than you might imagine when it comes to site optimization. Websites running Avada as the primary WordPress theme can be configured to optimize the layouts and structure that can lead to vastly improved page load scores. Still, ultimately, user content will principally dictate how fast and efficient your website will perform according to Google Core Web Vitals.

Color Palette

#23f878
#05ad48
#ecf5ea
#23f878
#05ad48
#ecf5ea
#23f878
#05ad48
#ecf5ea

The color palette selected for the Avada Vape prebuilt website is a set of monochromatic colors, as seen above. If you would like to change the Avada Vape color palette, this can be done within the options panel, as explained in this help file and video.

Color increases brand recognition, and it can influence people in how they feel about a website. Colors produce different emotions in people, making it essential to choose the right colors for your website. The balance of white space, contrast, and well thought out color schemes are vital elements of good web design. If you have not already decided on your brand colors, choosing a color palette for your website can be confusing. However, using a handy tool like the Adobe Color Wheel or any of the myriad of app choices online, you can undoubtedly make this task effortless.

We suggest checking out HubSpot’s article on color theory.

Typography

Website Typography can be more important than you realize, from your brand and user perspective to your website’s overall look and style. It is often underrated and is, in fact, an art form and technique in itself. The following HubSpot guide to website typography will give you some great insights into the do’s and dont’s choosing which fonts work best for your Avada website.

The Avada Website Builder has a vast array of Typography controls, options, and font selections to make your job easier. See this detailed help file and video to get you started.

Below are the fonts used for the Avada Vape prebuilt website:

Headings

H1, H2, Font Family: Sofia Sans Semi Condensed
H3, H4, Font Family: Sofia Sans Semi Condensed
H5, H6, Font family: Sofia Sans Semi Condensed

Body

Font Family: Sofia Sans

We suggest checking out HubSpot’s article on The Ultimate List of Web-Safe HTML and CSS Fonts.

To Get Started You Will Need The Following

To get started with the Avada Website Builder and to create your ideal website, there are a few things that you will need;

Recommended Plugins

What are recommended plugins, and do you need them? In short, it is not the end of the world if you choose not to install and activate the plugins used with any particular Avada prebuilt website. Let’s take the Avada Vape prebuilt website as an example:

It is created as a WooCommerce focussed site, and therefore the WooCommerce plugin should be installed and activated at the point of installing the prebuilt site.

If you decide not to install the WooCommerce plugin, the full site will still be imported, but the eCommerce aspect will not be active. The following plugins have been used with the Avada Vape website:

WooCommerce

World-Class Support And Resources

Many facets set the Avada Website Builder apart from the competition. None more important is that Avada is not reliant on 3rd party builders and tools to deliver a stable and seamless website building experience. No waiting for external developers and toolset creators to deliver the next update for your theme. We take pride in the fact that Avada is 100% maintained, evolved, and developed according to strict WordPress and PHP coding standards. Avada gives you peace of mind and guarantees that what you have to work with will always be ahead of the latest industry requirements.

What is a Prebuilt Website?

Simply put, prebuilt websites are complete websites that have been designed and built to fit an industry niche. Each website comprises pages, posts, content layouts, images, or various media types representing or showcasing an online presence for a target audience or business type.

Avada prebuilt websites and prebuilt content layouts (individual page or post content, layout sections, Call-to-actions, etc.) are carefully crafted by our talented team of designers to give you, the Avada user, a way to save time when prototyping a new website.

Avada’s prebuilt websites are a fantastic resource for creativity and inspiration. They will make web design a more efficient and productive process for beginners, marketers, and professionals alike. Here are some essential facts:

  • They are created to save you time when building a new website.
  • A prebuilt website can be imported with a few clicks.
  • Each prebuilt website is mobile and SEO friendly.
  • Each prebuilt website is entirely customizable to suit your project and branding needs.
  • You can white-label any prebuilt website for client work.
  • Prebuilt websites are included with your purchase of the Avada Website Builder.
  • Each prebuilt website is optimized for performance.

Fast One-Click Install

Importing any Avada Prebuilt Website is as simple as clicking a button, with pre-import selections making it highly flexible. You can choose to import a full website (more than 109 to choose from) and parts of any other and anything in between. Choose pages, posts, portfolios, images, sliders, theme options, widgets, or uninstall as you prefer.

Avada Prebuilt Website Import

Website Structure

A page or post structure is divided into four main sections: the Header, the Page Title Bar, Content, and the Footer. With the Avada Website Builder, you can independently edit each of these sections to create super flexible and stunning layout designs.

Below is a list of the Avada Vape pages and posts that have been prebuilt just for you. Once installed, you can change all aspects of each Layout, and at any time, add new pages to suit your online business needs.

Explaining Layouts & Layout Sections

Before we look at the specific Layouts on the Avada Vape prebuilt website, the first thing to understand is the Layouts and Layout Sections’ architecture. You can think of Layouts as a container for the page content. In contrast, the actual content comes from the various Layout Sections. There are four Layout Sections on a page – the Header, Page Title Bar, Content, and Footer Layout Sections.

There is a default Global Layout, and any Layout Sections added to that will be shown on all pages of your website. There are Conditional Layouts with conditional logic to determine how the Layout will be used.

You can make as many Layouts and Layout Sections as you like, and you can use the Layout Sections in multiple Layouts. But you can only use a specific condition on a single Layout, so the theme knows which one to use.

See Understanding Layouts & Layout Sections and Understanding Conditional Layouts for more info.

Avada Layout Sections Legend

Explaining WordPress Pages vs. Posts

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

What Can I Change? Is the Design Flexible?

The Avada Vape prebuilt website is exactly that, prebuilt, for you. If the design and style suit your website needs, you can use it as a starting point, and you can change as much or as little as you need to.

The most obvious details that you will want to change at first is the website’s wording, titles, color scheme, and images. You can choose to leave the overall layouts as is or Drag and Drop to rearrange the content’s order. Further to that, you can add or remove any of the Design Elements to fine-tune your preferred business narrative. In short, you can change every single aspect of the prebuilt website’s Layout and content.

Editing a page’s content and layouts is done using the Drag and Drop live editor or using the traditional back-end method. The first image below shows the Live visual Drag and Drop editor is used to edit the content:

Live Editor

The image below shows the traditional back-end method is used to edit the content:

Back-end Editing

A Side By Side Comparison (Builder vs. No Builder)

We have created a side by side point of reference that illustrates the differences in building a website using the Avada Website Builder to design custom Layouts vs. not using The Avada Website Builder and only using predefined options. The latter will allow you only to build a basic site, in comparison.

Exploring The Homepage Layout

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

The Header

For the Avada Vape prebuilt website, the Header was created using the Avada Header Builder and is set globally across the website. This means that every page and post will use the same Header layout without any further conditions set. For example, you can change this if required by creating a unique Header layout for different pages or posts.

Avada Vape Header

The Page Content

The content part of the homepage, the area between the Header and Footer, does not use a page title bar. You can change this page’s content in an infinite number of ways to best suit your business marketing and brand requirements.

Page and Post content is structured using Container and Column Elements, and if required, Nested Columns. Check out the help file links below for detailed information and videos explaining what they are and how to use them:

  • What are Containers, and how to use them? Read more here.
  • What are Columns, and how to use them? Read more here.
  • What are Nested Columns, and how to use them? Read more here.

The Hero

Avada Vape Hero

Instead of using a traditional image slider, like the Avada Slider or Slider Revolution, as the above-the-fold hero section, this prebuilt site uses a Container with a Background Image. The container is structured using one 2/3 (33.33% width) Column holding two Title Elements, a Text Block Element, and a Button Element.

Banner

Avada Vape Banner

This section was created using a Container with one 1/1 (100% width) Column holding a Title Element.

Categories

Avada Vape Categories

This section was created using a Container with two 1/2 (50% width) Columns collectively holding a Title Element and a Button Element. This is followed by one 1/1 (100% width) Column holding a Post Cards Element.

More Information

Avada Vape More Information

This section was built using a Container with one 3/5 (60% width) Column holding two Title Elements and a Content Boxes Element. This is followed by one 2/5 (40% width) Column with a Background Image.

Latest Products

Avada Vape Latest Products

This section was created using a Container with one 1/1 (100% width) Column holding a Section Separator Element and two 1/2 (50% width) Column collectively holding a Title Element, a Text Block Element, and a Button Element.

This is followed by three 33.20% width column each containing a Post Cards Element and two 1px Columns for spacing on either side of the middle column

More Information

Avada Vape More Information 1

This section was created using using a Container with one 1/1 (100% width) Column holding a Section Separator Element. This is followed by three one 28% width Column holding an Image Element, a Title Element, and a Text Block Element; one 35% width Column holding an Image Element; and one 36.33% width Column holding a Title Element, a Text Block Element, and a Button Element.

Banner

Avada Vape More Information 1

This section was created using a Container with one 1/1 (100% width) Column holding a Title Element.

More Information

Avada Vape More Information 2

This section was created using a Container holding two 1/2 (50% width) Columns, The Left column holds a Title Element, and a Text Block Element and the right column has a Background Image.

This is followed by three 1/3 (33.33% width) Columns each containing an Icon Element, a Title Element, and a Text Block Element.

A website footer aims to help visitors by providing appropriate information and navigation options at the bottom of website pages. Website footer design is underrated and more valuable to your website than you may think and is essential to the overall end-user experience. Three key points stand out, namely:

  • A footer should provide a website visitor with additional choices. If you want people to sign up for your mailing list, view a product demo, or contact you, inviting them at the end of a scroll is a compelling call to action.
  • A footer should create a path for continued engagement by including navigation links to products, services, or other parts of your website.
  • A footer can access essential information like ways to contact your company and customer services, privacy statements, and potential legal disclaimers.

For the Avada Vape prebuilt website, the Footer was created using the Avada Footer Builder and this particular Footer content and Layout is set to display globally across the website. This means that every page and post will use the same Footer layout without any further conditions set. For example, you can change this if required by creating a unique Footer layout for different pages or posts. Let us take a closer look below:

Footer Content

Avada Vape Footer

The Footer section is created using a Container holding multiple Columns. These Columns contain an Image Element, six Title Elements, two Separator Elements, three Text Block Elements, a Menu Element, an Avada Form Element, and a Social Links Element, with the use of the Dynamic Data Options to display the website information.

In Summary

There are 109 Avada prebuilt websites to choose from, with more being added regularly. Our amazing design team created these prebuilt websites as a way to give you a head start when building your next website.

You can change the styling, Layouts, content as much or as little as you need to quickly adapt any individual prebuilt site to suit your chosen niche. Get started with the Avada Website Builder today and launch your business online; Fast.

]]>
https://avada.com/blog/avada-vape-deconstructing-a-prebuilt-website/feed/ 0
10 WordPress Portfolio Websites For Professionals https://avada.com/blog/10-wordpress-portfolio-websites-for-professionals/ https://avada.com/blog/10-wordpress-portfolio-websites-for-professionals/#respond Wed, 24 Jul 2024 11:12:15 +0000 https://avada.com/blog//

Are you looking for the best Portfolio website for WordPress? Or do you want to rebrand your existing website? Avada is a Website Builder for WordPress with flexible and intuitive website design tools that will empower you to create websites of any style. And the best part is that no coding knowledge is required. Whether you are a beginner, a marketer, or a professional, Avada will give you the confidence to manage your website stress-free.

The 10 websites that are showcased in this article are popular downloads in the Avada Portfolio category. Avada’s prebuilt content and websites are fully customizable and adapted to suit any website type. Also feel free to check out these 15 Corporate websites.

Overview

Avada Digital Agency

Avada Digital Agency

Avada Marketing Consultant

Avada Marketing Consultant

Avada Interior Design

Avada Interior Design

Summary

To get started designing your dream website there are a few things that you will need;

These prebuilt websites are created as a way to give you a head start. You can change the styling, Layouts, content as much or as little as you need to quickly adapt any individual prebuilt site to suit your chosen niche. Get started with the Avada today and launch your business online; Fast.

With your purchase of Avada, a host of resources are available for you to take advantage of. Resources include access to 109 professionally designed prebuilt websites, 450+ individual Avada Studio prebuilt content blocks, 200+ tutorial videos, 600+ help files, and a 24/7 world-class support team to assist and guide you.

]]>
https://avada.com/blog/10-wordpress-portfolio-websites-for-professionals/feed/ 0
The 10 Best Avada Education Websites For WordPress https://avada.com/blog/the-10-best-avada-education-websites-for-wordpress/ https://avada.com/blog/the-10-best-avada-education-websites-for-wordpress/#respond Wed, 17 Jul 2024 13:00:28 +0000 https://avada.com/blog//

Are you looking for the best Education website for WordPress? Or do you want to rebrand your existing website? Avada is a Website Builder for WordPress with flexible and intuitive website design tools that will empower you to create websites of any style. And the best part is that no coding knowledge is required. Whether you are a beginner, a marketer, or a professional, Avada will give you the confidence to manage your website stress-free.

The 15 websites that are showcased in this article are popular downloads in the Avada Education category. Avada’s prebuilt content and websites are fully customizable and adapted to suit any website type. Also feel free to check out these 15 Creative websites.

Overview

Avada Business Coach

Avada Business Coach

Summary

To get started designing your dream website there are a few things that you will need;

These prebuilt websites are created as a way to give you a head start. You can change the styling, Layouts, content as much or as little as you need to quickly adapt any individual prebuilt site to suit your chosen niche. Get started with the Avada today and launch your business online; Fast.

With your purchase of Avada, a host of resources are available for you to take advantage of. Resources include access to 109 professionally designed prebuilt websites, 450+ individual Avada Studio prebuilt content blocks, 200+ tutorial videos, 600+ help files, and a 24/7 world-class support team to assist and guide you.

]]>
https://avada.com/blog/the-10-best-avada-education-websites-for-wordpress/feed/ 0
Avada Portfolio: Deconstructing a Prebuilt Website https://avada.com/blog/avada-portfolio-deconstructing-a-prebuilt-website/ https://avada.com/blog/avada-portfolio-deconstructing-a-prebuilt-website/#respond Wed, 10 Jul 2024 12:36:57 +0000 https://avada.com/blog//

Say hello to Avada Portfolio. This Avada prebuilt website is ideal for beginners, marketers, professionals, and anyone in between. Avada Portfolio can be imported at the click of a button and is highly flexible. Every aspect of the prebuilt website is easily customizable, and it can be adapted and branded to suit any business model or venture using the Avada Website Builder.

In this article, we will explore the header, footer, and homepage layouts that make up the overall website structure to explore how the Avada Website Builder is used to create successful websites. The Avada Portfolio article is a part of a deconstruction series and is the follow-on article that explores the Avada Investment prebuilt website. It is important to highlight that Avada gives you total design freedom to create unique layouts for your website that work, with the only limit being your imagination.

Overview

Styling and Features

Creating a style guide for your website will prove to be invaluable in the future. A style guide will help you to address usability, the user experience, design consistency, and online trends in an organized and consistent manner.

The Avada Website Builder has a vast array of features and styling options; however, you do not need to use all of them for your website, and this is where your style guide comes in. Decide upfront which styling options align with your brand and which design features are needed to make your website stand out.

Performance & Optimization

Optimizing your websites for page load speed can be a seemingly complex subject because so many different facets affect how fast a page loads. It can range from the server’s speed to the options and settings selected, right through to the type and amount of content and even the size of the images added to the page or post.

The Avada Performance Wizard

The Performance Wizard takes the guesswork out of how to best optimize your Avada website. To get you started you are presented with a step-by-step interface that will guide you through the process.

Performance Wizard Start Screen

What is important to note is that you should build your website first before running the Performance Wizard. Creating your website’s structure, placing design elements in situ, and formulating content ensures that the system has something to work with when searching for recommendations at each step of the process. The recommendations provided are for options that can be disabled or enabled to enhance overall performance.

  • Features
    Disable any features not used on the website, thereby reducing the amount of code that is loaded.

  • Avada Icons
    Scan your website for information about icons that are being used. You can also disable unused icon sets and discover how to optimize existing icons.

  • Avada Fonts/Typography
    Check which fonts are being loaded on your website and then optimize how those fonts are served. Fewer variants will mean fewer requests and, therefore, faster loading times.

  • Avada Elements
    Scan your website to discover which Design, Layout, and Form Elements are not used on the website. Disable unused Elements, thereby reducing the amount of code that is loaded.

  • Optimization
    Optimize how the website’s CSS and JS assets should be enqueued. These options can have a significant impact on the performance of the page load. However, some of these options can also break functionality if you use a caching plugin, so proceed with caution.

Above The Fold Optimization

“Above the fold” is the part of a webpage that is immediately visible on your desktop or mobile screen without scrolling down. Traditionally, this digital real estate is where most would choose to display attention-grabbing headlines, important sales/marketing content, images, and even slider plugins as part of the page’s hero.

Above The Fold Optimization

The rate of content delivery for a website, and in particular the perceived speed experienced by the end-user on a mobile device, is at the heart of Google’s Core Web Vitals. Thus, passing Core Web Vitals inevitably leads to a delicate balance between good SEO, attention marketing, and page load times for a website owner.

To assist you with managing your website’s performance and optimization, our team introduced purpose-built tools and features for Avada that can make it possible for you to fine-tune your website’s performance on mobile & desktop.

Generate Critical CSS

Critical CSS is a convenient performance feature. You can enable Critical CSS by going to the Performance Wizard > Optimization tab. Once it has been enabled, you can access the Critical CSS page from the WordPress sidebar at Avada > Critical CSS or Maintenance > Critical CSS from the Avada Dashboard. Both take you to the Critical CSS page to generate Critical CSS for both pages and posts.

Critical CSS

Critical CSS is the CSS necessary to style the above-the-fold content. When generated for a page, it will be loaded into the page head, and the rest of the CSS styles moved to the footer, resulting in less render-blocking and a faster page load time.

Resources

Even with all of the performance options provided, Avada plays a lesser part than you might imagine when it comes to site optimization. Websites running Avada as the primary WordPress theme can be configured to optimize the layouts and structure that can lead to vastly improved page load scores. Still, ultimately, user content will principally dictate how fast and efficient your website will perform according to Google Core Web Vitals.

Color Palette

#ff5d29
#666666
#e8dbe8
#ff5d29
#666666
#e8dbe8
#ff5d29
#666666
#e8dbe8

The color palette selected for the Avada Portfolio prebuilt website is a set of pastel colors, as seen above. If you would like to change the Avada Portfolio color palette, this can be done within the options panel, as explained in this help file and video.

Color increases brand recognition, and it can influence people in how they feel about a website. Colors produce different emotions in people, making it essential to choose the right colors for your website. The balance of white space, contrast, and well thought out color schemes are vital elements of good web design. If you have not already decided on your brand colors, choosing a color palette for your website can be confusing. However, using a handy tool like the Adobe Color Wheel or any of the myriad of app choices online, you can undoubtedly make this task effortless.

We suggest checking out HubSpot’s article on color theory.

Typography

Website Typography can be more important than you realize, from your brand and user perspective to your website’s overall look and style. It is often underrated and is, in fact, an art form and technique in itself. The following HubSpot guide to website typography will give you some great insights into the do’s and dont’s choosing which fonts work best for your Avada website.

The Avada Website Builder has a vast array of Typography controls, options, and font selections to make your job easier. See this detailed help file and video to get you started.

Below are the fonts used for the Avada Portfolio prebuilt website:

Headings

H1, H2, Font Family: Inter Tight
H3, H4, Font Family: Inter Tight
H5, H6, Font family: Inter Tight

Body

Font Family: Inter Tight

We suggest checking out HubSpot’s article on The Ultimate List of Web-Safe HTML and CSS Fonts.

To Get Started You Will Need The Following

To get started with the Avada Website Builder and to create your ideal website, there are a few things that you will need;

Recommended Plugins

What are recommended plugins, and do you need them? In short, it is not the end of the world if you choose not to install and activate the plugins used with any particular Avada prebuilt website. Let’s take the Avada Portfolio prebuilt website as an example: This prebuilt website was built without using any of the Avada bundled plugins.

When an Avada prebuilt website is built without using bundled plugins, you can still install and activate any of them, should it be needed for your website. Any of the prebuilt websites can be modified to fit your project needs.

World-Class Support And Resources

Many facets set the Avada Website Builder apart from the competition. None more important is that Avada is not reliant on 3rd party builders and tools to deliver a stable and seamless website building experience. No waiting for external developers and toolset creators to deliver the next update for your theme. We take pride in the fact that Avada is 100% maintained, evolved, and developed according to strict WordPress and PHP coding standards. Avada gives you peace of mind and guarantees that what you have to work with will always be ahead of the latest industry requirements.

What is a Prebuilt Website?

Simply put, prebuilt websites are complete websites that have been designed and built to fit an industry niche. Each website comprises pages, posts, content layouts, images, or various media types representing or showcasing an online presence for a target audience or business type.

Avada prebuilt websites and prebuilt content layouts (individual page or post content, layout sections, Call-to-actions, etc.) are carefully crafted by our talented team of designers to give you, the Avada user, a way to save time when prototyping a new website.

Avada’s prebuilt websites are a fantastic resource for creativity and inspiration. They will make web design a more efficient and productive process for beginners, marketers, and professionals alike. Here are some essential facts:

  • They are created to save you time when building a new website.
  • A prebuilt website can be imported with a few clicks.
  • Each prebuilt website is mobile and SEO friendly.
  • Each prebuilt website is entirely customizable to suit your project and branding needs.
  • You can white-label any prebuilt website for client work.
  • Prebuilt websites are included with your purchase of the Avada Website Builder.
  • Each prebuilt website is optimized for performance.

Fast One-Click Install

Importing any Avada Prebuilt Website is as simple as clicking a button, with pre-import selections making it highly flexible. You can choose to import a full website (more than 109 to choose from) and parts of any other and anything in between. Choose pages, posts, portfolios, images, sliders, theme options, widgets, or uninstall as you prefer.

Avada Prebuilt Website Import

Website Structure

A page or post structure is divided into four main sections: the Header, the Page Title Bar, Content, and the Footer. With the Avada Website Builder, you can independently edit each of these sections to create super flexible and stunning layout designs.

Below is a list of the Avada Portfolio pages and posts that have been prebuilt just for you. Once installed, you can change all aspects of each Layout, and at any time, add new pages to suit your online business needs.

Explaining Layouts & Layout Sections

Before we look at the specific Layouts on the Avada Portfolio prebuilt website, the first thing to understand is the Layouts and Layout Sections’ architecture. You can think of Layouts as a container for the page content. In contrast, the actual content comes from the various Layout Sections. There are four Layout Sections on a page – the Header, Page Title Bar, Content, and Footer Layout Sections.

There is a default Global Layout, and any Layout Sections added to that will be shown on all pages of your website. There are Conditional Layouts with conditional logic to determine how the Layout will be used.

You can make as many Layouts and Layout Sections as you like, and you can use the Layout Sections in multiple Layouts. But you can only use a specific condition on a single Layout, so the theme knows which one to use.

See Understanding Layouts & Layout Sections and Understanding Conditional Layouts for more info.

Avada Layout Sections Legend

Explaining WordPress Pages vs. Posts

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

What Can I Change? Is the Design Flexible?

The Avada Portfolio prebuilt website is exactly that, prebuilt, for you. If the design and style suit your website needs, you can use it as a starting point, and you can change as much or as little as you need to.

The most obvious details that you will want to change at first is the website’s wording, titles, color scheme, and images. You can choose to leave the overall layouts as is or Drag and Drop to rearrange the content’s order. Further to that, you can add or remove any of the Design Elements to fine-tune your preferred business narrative. In short, you can change every single aspect of the prebuilt website’s Layout and content.

Editing a page’s content and layouts is done using the Drag and Drop live editor or using the traditional back-end method. The first image below shows the Live visual Drag and Drop editor is used to edit the content:

Live Editor

The image below shows the traditional back-end method is used to edit the content:

Back-end Editing

A Side By Side Comparison (Builder vs. No Builder)

We have created a side by side point of reference that illustrates the differences in building a website using the Avada Website Builder to design custom Layouts vs. not using The Avada Website Builder and only using predefined options. The latter will allow you only to build a basic site, in comparison.

Exploring The Homepage Layout

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

The Header

For the Avada Portfolio prebuilt website, the Header was created using the Avada Header Builder and is set globally across the website. This means that every page and post will use the same Header layout without any further conditions set. For example, you can change this if required by creating a unique Header layout for different pages or posts.

The Page Content

The content part of the homepage, the area between the Header and Footer, does not use a page title bar. You can change this page’s content in an infinite number of ways to best suit your business marketing and brand requirements.

Page and Post content is structured using Container and Column Elements, and if required, Nested Columns. Check out the help file links below for detailed information and videos explaining what they are and how to use them:

  • What are Containers, and how to use them? Read more here.
  • What are Columns, and how to use them? Read more here.
  • What are Nested Columns, and how to use them? Read more here.

The Hero (Desktop)

Avada Portfolio Hero

Instead of using a traditional image slider, like the Avada Slider or Slider Revolution, as the above-the-fold hero section, this prebuilt site uses a Containers with one 1/1 (100% width) Column containing a Title Element and a Nested Columns Element.

Simply put, nested columns are columns within columns. This Nested Columns Element is structured holding one 42% width Column containing a Title Element and one 1/1 (100% width) Column containing a Button Element and a Title Element.

About

Avada Portfolio About

This pop-up opens from the Header in the sidebar. This section was created using the Off-Canvas builder. It consists of a Container that holds two 1/2 (50% width) Columns with the left containing an Icon Element and the right containing a Button Element.

This is followed by two 1/1 (100% width) Columns with each containing a Title Element and one 64% width column holding two Nested Columns Elements and one 32% width Column holding an Image Element and a Separator Element.

The first Nested columns Elements contains two 1/2 (50% width) Columns each containing a Title Element and a Text Block Element and the second column contains one 1/1 (100% width) Column containing an Image Carousal Element.

Services

Avada Portfolio Services

This pop-up opens from the Header in the sidebar. This section was created using the Off-Canvas builder. It consists of a Container which holds two 1/2 (50% width) Columns with the left containing an Icon Element and the right containing a Button Element.

This is followed by two 26% width Columns each holding a Title Element and a Nested Columns Element. The Nested Columns each contains one 1/1 (100% width) Column holding a Text Block Element and two 1/2 (50% width) Columns collectively holding two Title Elements and an Image Element.

This is continued with one 65% width Column containing five Nested Columns Elements. These Nested Columns are all structured with three 1/3 (33.33% width) Columns each containing two Title Elements, a Checklist Element, and an Image Element.

Projects

This section is located in the Global header as one 1/1 (100% width) Column within a Container, holding a Post Cards Element.

Newsroom

Avada Portfolio Newsroom

This pop-up opens from the Header in the sidebar. This section was created using the Off-Canvas builder. It consists of a Container which holds two 1/2 (50% width) Columns with the left containing an Icon Element and the right containing a Button Element.

This is followed by two 1/1 (100% width) Columns containing a Title Element and a Post Cards Element.

Book a call

Avada Portfolio Book A Call

This pop-up opens from the Header in the sidebar. This section was created using the Off-Canvas builder. It consists of a Container which holds two 1/2 (50% width) Columns with the left containing an Icon Element and the right containing a Button Element.

This is followed by two 32% width Columns each containing a Title Element and a Nested Columns Element that is structured with two 1/1 (100% width) Columns holding two Title Elements and a Menu Element.

This section continues with one 65% width Column holding a Title Element and the Avada Form Element.

A website footer aims to help visitors by providing appropriate information and navigation options at the bottom of website pages. Website footer design is underrated and more valuable to your website than you may think and is essential to the overall end-user experience. Three key points stand out, namely:

  • A footer should provide a website visitor with additional choices. If you want people to sign up for your mailing list, view a product demo, or contact you, inviting them at the end of a scroll is a compelling call to action.
  • A footer should create a path for continued engagement by including navigation links to products, services, or other parts of your website.
  • A footer can access essential information like ways to contact your company and customer services, privacy statements, and potential legal disclaimers.

For the Avada Portfolio prebuilt website, the Footer was created using the Avada Footer Builder and this particular Footer content and Layout is set to display globally across the website. This means that every page and post will use the same Footer layout without any further conditions set. For example, you can change this if required by creating a unique Footer layout for different pages or posts. Let us take a closer look below:

Footer Content

Avada Portfolio Footer

The Footer section is created using a Container holding one 1/1 (100% width) Column containing two Title Elements with the use of the Dynamic Data Options to display the website information.

In Summary

There are 109 Avada prebuilt websites to choose from, with more being added regularly. Our amazing design team created these prebuilt websites as a way to give you a head start when building your next website.

You can change the styling, Layouts, content as much or as little as you need to quickly adapt any individual prebuilt site to suit your chosen niche. Get started with the Avada Website Builder today and launch your business online; Fast.

]]>
https://avada.com/blog/avada-portfolio-deconstructing-a-prebuilt-website/feed/ 0
Avada Investment: Deconstructing a Prebuilt Website https://avada.com/blog/avada-investment-deconstructing-a-prebuilt-website/ https://avada.com/blog/avada-investment-deconstructing-a-prebuilt-website/#respond Wed, 29 May 2024 14:44:06 +0000 https://avada.com/blog//

Say hello to Avada Investment. This Avada prebuilt website is ideal for beginners, marketers, professionals, and anyone in between. Avada Investment can be imported at the click of a button and is highly flexible. Every aspect of the prebuilt website is easily customizable, and it can be adapted and branded to suit any business model or venture using the Avada Website Builder.

In this article, we will explore the header, footer, and homepage layouts that make up the overall website structure to explore how the Avada Website Builder is used to create successful websites. The Avada Investment article is a part of a deconstruction series and is the follow-on article that explores the Avada Vegan Store prebuilt website. It is important to highlight that Avada gives you total design freedom to create unique layouts for your website that work, with the only limit being your imagination.

Overview

Styling and Features

Creating a style guide for your website will prove to be invaluable in the future. A style guide will help you to address usability, the user experience, design consistency, and online trends in an organized and consistent manner.

The Avada Website Builder has a vast array of features and styling options; however, you do not need to use all of them for your website, and this is where your style guide comes in. Decide upfront which styling options align with your brand and which design features are needed to make your website stand out.

Performance & Optimization

Optimizing your websites for page load speed can be a seemingly complex subject because so many different facets affect how fast a page loads. It can range from the server’s speed to the options and settings selected, right through to the type and amount of content and even the size of the images added to the page or post.

The Avada Performance Wizard

The Performance Wizard takes the guesswork out of how to best optimize your Avada website. To get you started you are presented with a step-by-step interface that will guide you through the process.

Performance Wizard Start Screen

What is important to note is that you should build your website first before running the Performance Wizard. Creating your website’s structure, placing design elements in situ, and formulating content ensures that the system has something to work with when searching for recommendations at each step of the process. The recommendations provided are for options that can be disabled or enabled to enhance overall performance.

  • Features
    Disable any features not used on the website, thereby reducing the amount of code that is loaded.

  • Avada Icons
    Scan your website for information about icons that are being used. You can also disable unused icon sets and discover how to optimize existing icons.

  • Avada Fonts/Typography
    Check which fonts are being loaded on your website and then optimize how those fonts are served. Fewer variants will mean fewer requests and, therefore, faster loading times.

  • Avada Elements
    Scan your website to discover which Design, Layout, and Form Elements are not used on the website. Disable unused Elements, thereby reducing the amount of code that is loaded.

  • Optimization
    Optimize how the website’s CSS and JS assets should be enqueued. These options can have a significant impact on the performance of the page load. However, some of these options can also break functionality if you use a caching plugin, so proceed with caution.

Above The Fold Optimization

“Above the fold” is the part of a webpage that is immediately visible on your desktop or mobile screen without scrolling down. Traditionally, this digital real estate is where most would choose to display attention-grabbing headlines, important sales/marketing content, images, and even slider plugins as part of the page’s hero.

Above The Fold Optimization

The rate of content delivery for a website, and in particular the perceived speed experienced by the end-user on a mobile device, is at the heart of Google’s Core Web Vitals. Thus, passing Core Web Vitals inevitably leads to a delicate balance between good SEO, attention marketing, and page load times for a website owner.

To assist you with managing your website’s performance and optimization, our team introduced purpose-built tools and features for Avada that can make it possible for you to fine-tune your website’s performance on mobile & desktop.

Generate Critical CSS

Critical CSS is a convenient performance feature. You can enable Critical CSS by going to the Performance Wizard > Optimization tab. Once it has been enabled, you can access the Critical CSS page from the WordPress sidebar at Avada > Critical CSS or Maintenance > Critical CSS from the Avada Dashboard. Both take you to the Critical CSS page to generate Critical CSS for both pages and posts.

Critical CSS

Critical CSS is the CSS necessary to style the above-the-fold content. When generated for a page, it will be loaded into the page head, and the rest of the CSS styles moved to the footer, resulting in less render-blocking and a faster page load time.

Resources

Even with all of the performance options provided, Avada plays a lesser part than you might imagine when it comes to site optimization. Websites running Avada as the primary WordPress theme can be configured to optimize the layouts and structure that can lead to vastly improved page load scores. Still, ultimately, user content will principally dictate how fast and efficient your website will perform according to Google Core Web Vitals.

Color Palette

#47b5ff
#e7cea6
#256d85
#47b5ff
#e7cea6
#256d85
#47b5ff
#e7cea6
#256d85

The color palette selected for the Avada Investment prebuilt website is a set of pastel colors, as seen above. If you would like to change the Avada Investment color palette, this can be done within the options panel, as explained in this help file and video.

Color increases brand recognition, and it can influence people in how they feel about a website. Colors produce different emotions in people, making it essential to choose the right colors for your website. The balance of white space, contrast, and well thought out color schemes are vital elements of good web design. If you have not already decided on your brand colors, choosing a color palette for your website can be confusing. However, using a handy tool like the Adobe Color Wheel or any of the myriad of app choices online, you can undoubtedly make this task effortless.

We suggest checking out HubSpot’s article on color theory.

Typography

Website Typography can be more important than you realize, from your brand and user perspective to your website’s overall look and style. It is often underrated and is, in fact, an art form and technique in itself. The following HubSpot guide to website typography will give you some great insights into the do’s and dont’s choosing which fonts work best for your Avada website.

The Avada Website Builder has a vast array of Typography controls, options, and font selections to make your job easier. See this detailed help file and video to get you started.

Below are the fonts used for the Avada Investment prebuilt website:

Headings

H1, H2, Font Family: Plus Jakarta Sans
H3, H4, Font Family: Plus Jakarta Sans
H5, H6, Font family: Plus Jakarta Sans

Body

Font Family: Plus Jakarta Sans

We suggest checking out HubSpot’s article on The Ultimate List of Web-Safe HTML and CSS Fonts.

To Get Started You Will Need The Following

To get started with the Avada Website Builder and to create your ideal website, there are a few things that you will need;

Recommended Plugins

What are recommended plugins, and do you need them? In short, it is not the end of the world if you choose not to install and activate the plugins used with any particular Avada prebuilt website. Let’s take the Avada Investment prebuilt website as an example:

It is created using Advanced Custom Fields Pro, which is a WordPress plugin that allows you to add extra content fields to your WordPress edit screens. Therefore the ACF Pro plugin should be installed and activated at the point of installing the prebuilt site.

If you decide not to install the ACF Pro plugin, the full site will still be imported, but the option to add extra content fields will not be active. The following plugins have been used with the Avada Investment website:

ACF Pro

World-Class Support And Resources

Many facets set the Avada Website Builder apart from the competition. None more important is that Avada is not reliant on 3rd party builders and tools to deliver a stable and seamless website building experience. No waiting for external developers and toolset creators to deliver the next update for your theme. We take pride in the fact that Avada is 100% maintained, evolved, and developed according to strict WordPress and PHP coding standards. Avada gives you peace of mind and guarantees that what you have to work with will always be ahead of the latest industry requirements.

What is a Prebuilt Website?

Simply put, prebuilt websites are complete websites that have been designed and built to fit an industry niche. Each website comprises pages, posts, content layouts, images, or various media types representing or showcasing an online presence for a target audience or business type.

Avada prebuilt websites and prebuilt content layouts (individual page or post content, layout sections, Call-to-actions, etc.) are carefully crafted by our talented team of designers to give you, the Avada user, a way to save time when prototyping a new website.

Avada’s prebuilt websites are a fantastic resource for creativity and inspiration. They will make web design a more efficient and productive process for beginners, marketers, and professionals alike. Here are some essential facts:

  • They are created to save you time when building a new website.
  • A prebuilt website can be imported with a few clicks.
  • Each prebuilt website is mobile and SEO friendly.
  • Each prebuilt website is entirely customizable to suit your project and branding needs.
  • You can white-label any prebuilt website for client work.
  • Prebuilt websites are included with your purchase of the Avada Website Builder.
  • Each prebuilt website is optimized for performance.

Fast One-Click Install

Importing any Avada Prebuilt Website is as simple as clicking a button, with pre-import selections making it highly flexible. You can choose to import a full website (more than 109 to choose from) and parts of any other and anything in between. Choose pages, posts, portfolios, images, sliders, theme options, widgets, or uninstall as you prefer.

Avada Prebuilt Website Import

Website Structure

A page or post structure is divided into four main sections: the Header, the Page Title Bar, Content, and the Footer. With the Avada Website Builder, you can independently edit each of these sections to create super flexible and stunning layout designs.

Below is a list of the Avada Investment pages and posts that have been prebuilt just for you. Once installed, you can change all aspects of each Layout, and at any time, add new pages to suit your online business needs.

Explaining Layouts & Layout Sections

Before we look at the specific Layouts on the Avada Investment prebuilt website, the first thing to understand is the Layouts and Layout Sections’ architecture. You can think of Layouts as a container for the page content. In contrast, the actual content comes from the various Layout Sections. There are four Layout Sections on a page – the Header, Page Title Bar, Content, and Footer Layout Sections.

There is a default Global Layout, and any Layout Sections added to that will be shown on all pages of your website. There are Conditional Layouts with conditional logic to determine how the Layout will be used.

You can make as many Layouts and Layout Sections as you like, and you can use the Layout Sections in multiple Layouts. But you can only use a specific condition on a single Layout, so the theme knows which one to use.

See Understanding Layouts & Layout Sections and Understanding Conditional Layouts for more info.

Avada Layout Sections Legend

Explaining WordPress Pages vs. Posts

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

What Can I Change? Is the Design Flexible?

The Avada Investment prebuilt website is exactly that, prebuilt, for you. If the design and style suit your website needs, you can use it as a starting point, and you can change as much or as little as you need to.

The most obvious details that you will want to change at first is the website’s wording, titles, color scheme, and images. You can choose to leave the overall layouts as is or Drag and Drop to rearrange the content’s order. Further to that, you can add or remove any of the Design Elements to fine-tune your preferred business narrative. In short, you can change every single aspect of the prebuilt website’s Layout and content.

Editing a page’s content and layouts is done using the Drag and Drop live editor or using the traditional back-end method. The first image below shows the Live visual Drag and Drop editor is used to edit the content:

Live Editor

The image below shows the traditional back-end method is used to edit the content:

Back-end Editing

A Side By Side Comparison (Builder vs. No Builder)

We have created a side by side point of reference that illustrates the differences in building a website using the Avada Website Builder to design custom Layouts vs. not using The Avada Website Builder and only using predefined options. The latter will allow you only to build a basic site, in comparison.

Exploring The Homepage Layout

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

The Header

For the Avada Investment prebuilt website, the Header was created using the Avada Header Builder and is set globally across the website. This means that every page and post will use the same Header layout without any further conditions set. For example, you can change this if required by creating a unique Header layout for different pages or posts.

Avada Investment Header

The Page Content

The content part of the homepage, the area between the Header and Footer, does not use a page title bar. You can change this page’s content in an infinite number of ways to best suit your business marketing and brand requirements.

Page and Post content is structured using Container and Column Elements, and if required, Nested Columns. Check out the help file links below for detailed information and videos explaining what they are and how to use them:

  • What are Containers, and how to use them? Read more here.
  • What are Columns, and how to use them? Read more here.
  • What are Nested Columns, and how to use them? Read more here.

The Hero

Avada Investment Hero

Instead of using a traditional image slider, like the Avada Slider or Slider Revolution, as the above-the-fold hero section, this prebuilt site uses three Containers with the first holding a one 1/1 (100% width) Column containing a Title Element and a Text Block Element.

The second container is structured using one 1/1 (100% width) Column holding an Image Element, with the third container using one 1/1 (100% width) Column holding a Section Separator Element.

Stats

Avada Investment Stats

This section was built using a Container with one 50% width Column for spacing and one 45% width Column holding a Counter Boxes Element.

Features

Avada Investment Features

This section was built using a Container holding one 3/4 (75% width) Column containing a Title Element and one 1/4 (25% width) Column containing a Button Element.

This is followed by one 1/1 (100% width) Column holding a Separator Element and three 1/3 (33.33% width) Columns each holding two Nested Columns Elements. Simply put, nested columns are columns within columns and these Nested Columns are structured with one 1/1 (100% width) Column with the first Holding an Icon Element, a Title Element, and a Text Block Element, and the second holding a Button Element that appears on hovering over each block.

About

Avada Investment About

To create this layout, two Containers were used. The first container has one 56% width Column holding two Text Block Elements, a Title Element, a Separator Element, a Nested Columns Element, and a Button Element, and the second holds one 44% width Column containing a Nested Columns Element.

The first Nested Columns Element is structured using two 1/2 (50% width) Columns collectively holding an Icon Element, three Title Elements, two Text Block Elements, and a Checklist Element, with the second Nested Columns Element structured using one 1/1 (100% width) Column holding an Image Element.

This is followed by the second container using one 1/1 (100% width) Column holding a Section Separator Element.

Services

Avada Investment Services

This section was built using a Container structured with two 1/2 (50% width) Columns holding a Title Element and two Text Block Elements, one 1/1 (100% width) Column holding a Separator Element, and six 1/3 (33.33% width) Columns each containing a Nested Columns Element.

These Nested Columns each have a background image and is structured using one 92% width Column containing a Text Block Element and a Title Element.

Text Scroller

Avada Investment Text Scroller

This section was built using a Container and one 1/1 (100% width) Column holding a Title Element.

Info Section

Avada Investment Info Section

This section was built using two Containers. The first one is structured using two 50% width Columns collectively holding a Title Element, three Text Block Elements, a Separator Element, a Button Element, a Checklist Element, and a Nested Columns Element.

The Nested Columns Element is structured using one 1/4 (25% width) Column holding an Icon Element and one 2/3 (66.67% width) Column holding a Text Block Element and a Title Element.

The second container is structured using one 1/1 (100% width) Column holding a Section Separator Element.

Advisors

Avada Investment Advisors

This section was built using a Container and two 1/2 (50% width) Columns. The left column holds an Image Element and the right column holds a Nested Columns Element, a Title Element, a Text Block Element, a Separator Element, and a Button Element.

The Nested Columns Element is structured with one 1/1 (100% width) Column holding a Text Block Element.

Mission Values

Avada Investment Mission Values

This section was built using a Container and two 1/2 (50% width) Columns. The right column holds an Image Element and the left column holds a Nested Columns Element, a Title Element, a Text Block Element, a Separator Element, and a Button Element.

The Nested Columns Element is structured with one 1/1 (100% width) Column holding a Text Block Element.

Benefits

Avada Investment Benefits

This section was built using a Container and two 1/2 (50% width) Columns. The left column holds an Image Element and the right column holds a Nested Columns Element, a Title Element, a Text Block Element, a Separator Element, and a Button Element.

The Nested Columns Element is structured with one 1/1 (100% width) Column holding a Text Block Element.

Reviews

Avada Investment Reviews

This section was built using two Containers with the first structured using one 2/5 (40% width) Columns holding a Title Element, two Text Block Elements, and a Star Rating Element, and one 3/5 (60% width) Column holding a Post Cards Element.

This is followed by the second container structured using one 1/1 (100% width) Column holding a Section Separator Element.

News Insights

Avada Investment New Insights

This section was built using a Container structured using one 2/3 (66.67% width) Column holding a Title Element, one 1/3 (33.33% width) Column holding a Button Element, and two 1/1 (100% width) Columns with one holding a Separator Element, and one holding a Post Cards Element.

Logos

Avada Investment Logos

This section was built using two Containers with the first structured using one 1/1 (100% width) Column holding a Separator Element and the second column is structured using five 1/5 (20% width) Columns each containing an Image Element.

A website footer aims to help visitors by providing appropriate information and navigation options at the bottom of website pages. Website footer design is underrated and more valuable to your website than you may think and is essential to the overall end-user experience. Three key points stand out, namely:

  • A footer should provide a website visitor with additional choices. If you want people to sign up for your mailing list, view a product demo, or contact you, inviting them at the end of a scroll is a compelling call to action.
  • A footer should create a path for continued engagement by including navigation links to products, services, or other parts of your website.
  • A footer can access essential information like ways to contact your company and customer services, privacy statements, and potential legal disclaimers.

For the Avada Investments prebuilt website, the Footer was created using the Avada Footer Builder and this particular Footer content and Layout is set to display globally across the website. This means that every page and post will use the same Footer layout without any further conditions set. For example, you can change this if required by creating a unique Footer layout for different pages or posts. Let us take a closer look below:

Footer Content

Avada Investment Footer

The Footer section is created using a Container with Multiple Columns. These columns include an Image Element, four Title Elements, three Text Block Elements, a Button Element, two Separator Elements, a Nested Columns Element, and a Social links Element, with the use of the Dynamic Data Options to display the website information.

The Nested Columns Element is structured using two 1/2 (50% width) Columns collectively six Button Elements.

In Summary

There are 109 Avada prebuilt websites to choose from, with more being added regularly. Our amazing design team created these prebuilt websites as a way to give you a head start when building your next website.

You can change the styling, Layouts, content as much or as little as you need to quickly adapt any individual prebuilt site to suit your chosen niche. Get started with the Avada Website Builder today and launch your business online; Fast.

]]>
https://avada.com/blog/avada-investment-deconstructing-a-prebuilt-website/feed/ 0
7 Key Elements of a Great Photography WordPress Website https://avada.com/blog/7-key-elements-of-a-great-photography-wordpress-website/ https://avada.com/blog/7-key-elements-of-a-great-photography-wordpress-website/#respond Tue, 21 May 2024 08:30:52 +0000 http://theme-fusion.com/?p=407874

In today’s digital age, where visual content reigns supreme, photographers must extend their artistry beyond the lens to their online presence. A well-crafted website is a digital gallery, portfolio, and client communication hub. However, if the thought of tackling the design and development of your site sounds overwhelming, you’ll likely need a helping hand—something with great foundations that can be built upon to match your unique requirements.

Avada is the ideal platform for WordPress to build an engaging visual portfolio website. It provides you with 109 professionally prebuilt websites and Avada Studio content that inspire and deliver a solid starting point for designing your perfect website. This article will demonstrate using the Avada Photography website, which is tailor-made for photographers and has almost all of the functionality you’ll require to create an outstanding website with minimal effort. Also, feel free to check out the Avada Photography Light website, an alternative take on a classic style. Let’s get started!

Overview

What Makes a Beautiful Photography Website?

A website is often the first point of contact for potential clients. It sets the tone for the brand, showcases the artist’s portfolio, and acts as a hub for client interactions. In a saturated market, a beautifully designed website can be the differentiator that attracts and retains clients, and photographers need a professional platform to showcase their creative work. Let us take a closer look at some key points that should be considered when setting up your photography website.

1: Stunning and Prominent Visuals

The goal is to ensure your images are prominent and captivating throughout your site. Photographers are all about composition and visual appeal; therefore, how your pictures are presented represents your ability and taste, so showcasing them well is paramount.

Fortunately, Avada has you covered! Whether you are redesigning your current website or this is your first website, creating the perfect aesthetic is of the utmost importance. This website’s first focus point is a beautiful 100% full-screen static hero image with a Call-To-Action (CTA).

Avada Photography

The homepage hero section is a critical component of web design (typically a large, high-quality image or video), pivoting in capturing attention, communicating key messages, and guiding user actions. By combining striking visuals, engaging headlines, and clear CTAs, a well-executed hero section can significantly enhance a website’s effectiveness, driving user engagement and conversions.

The prebuilt Avada website we explore in this article uses a 100% full-screen static image instead of an image slider. If you would prefer to use an image slider or media like a video, Avada does include the Avada Slider Element and the option to add a background video to the Container Element.

2: An Effective Website Navigation Menu is Essential

The importance of an easy-to-use website menu navigation can’t be understated. Effective navigation enhances user satisfaction by making it easy for visitors to find what they need, reducing frustration, and keeping users engaged. Navigation must also work seamlessly across all devices, from desktops to tablets to smartphones.

In addition, search engines prioritize user-friendly websites. Therefore, carefully considering SEO techniques improves site structure, making it easier for search engines to index content and understand the site’s hierarchy, leading to better rankings. A technically sound navigation design should also consider all users by allowing accessibility options.

Avada Menu

Practicality is an important aspect of an effective menu; an engaging design is another. Avada offers endless possibilities for designing a custom menu layout that will best suit your website’s design and goals. An Avada Flyout Menu was used (shown above) to maximize the visual appeal of this photography website. Another great option is the Avada Mega Menu Builder, which can be used to create a media-rich menu system for any website. Always remember a well-designed navigation system can enhance a website’s overall functionality and success by focusing on clarity, simplicity, and user needs.

3: An Easy to Navigate Portfolio Gallery

Much like using images correctly, a captivating and easy-to-navigate portfolio should be central to your website—after all, it will often be a significant source of traffic. Avada includes traditional WordPress Custom Post Types (CPTs) set up as standard (Blog, Portfolio, FAQ).

Avada Portfolio Post Card

To add a new entry, navigate to Portfolio > Add New. (For help setting up an Avada portfolio, see this help file.)

Avada Portfolio Edit

Now that the individual portfolio items are set up, the Avada Post Card Element is used to display the portfolio to maximize customizability and visual flexibility.

4: A Convincing About Page

A website offering some ‘behind the lens’ context to you or your team brings a desirable human element to your brand and allows visitors to connect with what you do – which could potentially increase sales. By once again using a selection of Avada Design Elements, you too can create a captivating About page:

Avada Photography About Page

5: A Practical Contact Page

Always remember, less is more. A website contact page primarily serves as the crucial connection point between you, existing customers, and potential new customers. Offering clear and accessible contact information facilitates communication, allowing clients, customers, or partners to reach out easily with inquiries, feedback, or requests for assistance. Being visible and easily contactable ultimately leads to customer satisfaction and loyalty.

Moreover, a well-designed contact page enhances a business’s credibility and trustworthiness. When a website openly displays its contact details, it reassures visitors that the company is legitimate and approachable. This transparency can significantly influence customers’ perceptions, making them more likely to engage with the business. In addition, the contact page plays a vital role in lead generation. Visitors who use the contact form or other means provided often express genuine interest in the business’s products or services.

Avada Photography Contact Page

For the Avada Photography website, we opted for a minimalist approach. The contact form is built using the Avada Form Builder, which gives you unlimited design and layout customization possibilities. Sometimes, design inspiration goes a long way if you want to redesign your contact page to suit your style.

From an SEO perspective, a contact page that includes relevant keywords and local information can improve a website’s visibility in search engine results (SERPs), particularly for local searches. This optimization helps potential customers find the business or services more easily.

6: SEO Optimization

Search engine optimization (SEO) is vital for increasing the website’s visibility in search engine results. For photographers, this means using SEO best practices to attract potential clients who are searching for photography services. Essential techniques include optimizing image alt text, using relevant keywords in page titles and meta descriptions, and creating high-quality content that appeals to users and search engines. A well-optimized website can significantly boost organic traffic and lead generation.

An effective way to drive organic search engine traffic to your website is through blogging content about your services, expert photography advice, client testimonials, or whatever you feel would serve your audience.

7: Monetize Your Photography Business

E-commerce functionality is a must for photographers looking to sell prints or digital downloads. Numerous options are available for WordPress to sell your photography online. Some examples include Envira Gallery (which integrates with WooCommerce), Easy Digital Downloads, MemberPress, Kestrel (a WooCommerce extension), and more.

For the purpose of this article, we’ll focus on WooCommerce and MemberPress, both of which work perfectly with Avada.

Option 1: Photography For WooCommerce

WooCommerce Logo

Integrating an e-commerce platform like WooCommerce allows photographers to manage their online store directly from their WordPress website. Features such as secure payment gateways, customizable product pages, digital product downloads, and easy order management enhance the shopping experience for customers and provide a seamless way to monetize photography.

The Kestrel WooCommerce extension will empower photographers in the seamless presentation and sale of their photography through WooCommerce. The extension allows you to upload multiple photographs simultaneously, create distinct photo products, and organize them seamlessly within collections. Additionally, you can customize your sales strategy by making your photos accessible to anyone or restricting access to users with specific permissions, granting you a dynamic level of control over your digital storefront.

Option 2: MemberPress Business Model For Photography

MemberPress Logo

MemberPress makes selling photography online easy. It lets you sell memberships, create paywalls to limit access to your photos, and start earning recurring revenue several other ways. There are multiple ways to monetize your services and photography stock.

You can charge for membership tiers, sell downloads, offer photo shoots, and even sell photography courses. In a recent article, we demonstrated that MemberPress is perfectly compatible with Avada; therefore, setting up an online photography business could not be easier.

Summary

This post emphasizes creating an impactful online presence for photographers, highlighting the importance of captivating visuals, effective navigation, an easy-to-navigate portfolio gallery, creating a compelling contact page, and how to monetize your photography business. Avada offers flexibility and customizability to simplify the design process and empower you to build a professional website with minimal effort.

]]>
https://avada.com/blog/7-key-elements-of-a-great-photography-wordpress-website/feed/ 0
Avada Vegan Store: Deconstructing a Prebuilt Website https://avada.com/blog/avada-vegan-store-deconstructing-a-prebuilt-website/ https://avada.com/blog/avada-vegan-store-deconstructing-a-prebuilt-website/#respond Wed, 08 May 2024 14:30:17 +0000 https://avada.com/blog//

Say hello to Avada Vegan Store. This Avada prebuilt website is ideal for beginners, marketers, professionals, and anyone in between. Avada Vegan Store can be imported at the click of a button and is highly flexible. Every aspect of the prebuilt website is easily customizable, and it can be adapted and branded to suit any business model or venture using the Avada Website Builder.

In this article, we will explore the header, footer, and homepage layouts that make up the overall website structure to explore how the Avada Website Builder is used to create successful websites. The Avada Vegan Store article is a part of a deconstruction series and is the follow-on article that explores the Avada Tattoo prebuilt website. It is important to highlight that Avada gives you total design freedom to create unique layouts for your website that work, with the only limit being your imagination.

Overview

Styling and Features

Creating a style guide for your website will prove to be invaluable in the future. A style guide will help you to address usability, the user experience, design consistency, and online trends in an organized and consistent manner.

The Avada Website Builder has a vast array of features and styling options; however, you do not need to use all of them for your website, and this is where your style guide comes in. Decide upfront which styling options align with your brand and which design features are needed to make your website stand out.

Performance & Optimization

Optimizing your websites for page load speed can be a seemingly complex subject because so many different facets affect how fast a page loads. It can range from the server’s speed to the options and settings selected, right through to the type and amount of content and even the size of the images added to the page or post.

The Avada Performance Wizard

The Performance Wizard takes the guesswork out of how to best optimize your Avada website. To get you started you are presented with a step-by-step interface that will guide you through the process.

Performance Wizard Start Screen

What is important to note is that you should build your website first before running the Performance Wizard. Creating your website’s structure, placing design elements in situ, and formulating content ensures that the system has something to work with when searching for recommendations at each step of the process. The recommendations provided are for options that can be disabled or enabled to enhance overall performance.

  • Features
    Disable any features not used on the website, thereby reducing the amount of code that is loaded.

  • Avada Icons
    Scan your website for information about icons that are being used. You can also disable unused icon sets and discover how to optimize existing icons.

  • Avada Fonts/Typography
    Check which fonts are being loaded on your website and then optimize how those fonts are served. Fewer variants will mean fewer requests and, therefore, faster loading times.

  • Avada Elements
    Scan your website to discover which Design, Layout, and Form Elements are not used on the website. Disable unused Elements, thereby reducing the amount of code that is loaded.

  • Optimization
    Optimize how the website’s CSS and JS assets should be enqueued. These options can have a significant impact on the performance of the page load. However, some of these options can also break functionality if you use a caching plugin, so proceed with caution.

Above The Fold Optimization

“Above the fold” is the part of a webpage that is immediately visible on your desktop or mobile screen without scrolling down. Traditionally, this digital real estate is where most would choose to display attention-grabbing headlines, important sales/marketing content, images, and even slider plugins as part of the page’s hero.

Above The Fold Optimization

The rate of content delivery for a website, and in particular the perceived speed experienced by the end-user on a mobile device, is at the heart of Google’s Core Web Vitals. Thus, passing Core Web Vitals inevitably leads to a delicate balance between good SEO, attention marketing, and page load times for a website owner.

To assist you with managing your website’s performance and optimization, our team introduced purpose-built tools and features for Avada that can make it possible for you to fine-tune your website’s performance on mobile & desktop.

Generate Critical CSS

Critical CSS is a convenient performance feature. You can enable Critical CSS by going to the Performance Wizard > Optimization tab. Once it has been enabled, you can access the Critical CSS page from the WordPress sidebar at Avada > Critical CSS or Maintenance > Critical CSS from the Avada Dashboard. Both take you to the Critical CSS page to generate Critical CSS for both pages and posts.

Critical CSS

Critical CSS is the CSS necessary to style the above-the-fold content. When generated for a page, it will be loaded into the page head, and the rest of the CSS styles moved to the footer, resulting in less render-blocking and a faster page load time.

Resources

Even with all of the performance options provided, Avada plays a lesser part than you might imagine when it comes to site optimization. Websites running Avada as the primary WordPress theme can be configured to optimize the layouts and structure that can lead to vastly improved page load scores. Still, ultimately, user content will principally dictate how fast and efficient your website will perform according to Google Core Web Vitals.

Color Palette

#76b62b
#ffa42d
#ffffff
#76b62b
#ffa42d
#ffffff
#76b62b
#ffa42d
#ffffff

The color palette selected for the Avada Vegan Store prebuilt website is a set of bright colors, as seen above. If you would like to change the Avada Vegan Store color palette, this can be done within the options panel, as explained in this help file and video.

Color increases brand recognition, and it can influence people in how they feel about a website. Colors produce different emotions in people, making it essential to choose the right colors for your website. The balance of white space, contrast, and well thought out color schemes are vital elements of good web design. If you have not already decided on your brand colors, choosing a color palette for your website can be confusing. However, using a handy tool like the Adobe Color Wheel or any of the myriad of app choices online, you can undoubtedly make this task effortless.

We suggest checking out HubSpot’s article on color theory.

Typography

Website Typography can be more important than you realize, from your brand and user perspective to your website’s overall look and style. It is often underrated and is, in fact, an art form and technique in itself. The following HubSpot guide to website typography will give you some great insights into the do’s and dont’s choosing which fonts work best for your Avada website.

The Avada Website Builder has a vast array of Typography controls, options, and font selections to make your job easier. See this detailed help file and video to get you started.

Below are the fonts used for the Avada Vegan Store prebuilt website:

Headings

H1, H2, Font Family: Sen
H3, H4, Font Family: Sen
H5, H6, Font family: Sen

Body

Font Family: Sen

We suggest checking out HubSpot’s article on The Ultimate List of Web-Safe HTML and CSS Fonts.

To Get Started You Will Need The Following

To get started with the Avada Website Builder and to create your ideal website, there are a few things that you will need;

Recommended Plugins

What are recommended plugins, and do you need them? In short, it is not the end of the world if you choose not to install and activate the plugins used with any particular Avada prebuilt website. Let’s take the Avada Vegan Store prebuilt website as an example:

It is created using Advanced Custom Fields Pro, which is a WordPress plugin that allows you to add extra content fields to your WordPress edit screens. Therefore the ACF Pro plugin should be installed and activated at the point of installing the prebuilt site.

This prebuilt website is also a WooCommerce focussed site, and therefore the WooCommerce plugin should be installed and activated at the point of installing the prebuilt site.

If you decide not to install the ACF Pro plugin or WooCommerce, the full site will still be imported, but the option to add extra content fields and the eCommerce aspects will not be active. The following plugins have been used with the Avada Vegan Store website:

WooCommerce
ACF Pro

World-Class Support And Resources

Many facets set the Avada Website Builder apart from the competition. None more important is that Avada is not reliant on 3rd party builders and tools to deliver a stable and seamless website building experience. No waiting for external developers and toolset creators to deliver the next update for your theme. We take pride in the fact that Avada is 100% maintained, evolved, and developed according to strict WordPress and PHP coding standards. Avada gives you peace of mind and guarantees that what you have to work with will always be ahead of the latest industry requirements.

What is a Prebuilt Website?

Simply put, prebuilt websites are complete websites that have been designed and built to fit an industry niche. Each website comprises pages, posts, content layouts, images, or various media types representing or showcasing an online presence for a target audience or business type.

Avada prebuilt websites and prebuilt content layouts (individual page or post content, layout sections, Call-to-actions, etc.) are carefully crafted by our talented team of designers to give you, the Avada user, a way to save time when prototyping a new website.

Avada’s prebuilt websites are a fantastic resource for creativity and inspiration. They will make web design a more efficient and productive process for beginners, marketers, and professionals alike. Here are some essential facts:

  • They are created to save you time when building a new website.
  • A prebuilt website can be imported with a few clicks.
  • Each prebuilt website is mobile and SEO friendly.
  • Each prebuilt website is entirely customizable to suit your project and branding needs.
  • You can white-label any prebuilt website for client work.
  • Prebuilt websites are included with your purchase of the Avada Website Builder.
  • Each prebuilt website is optimized for performance.

Fast One-Click Install

Importing any Avada Prebuilt Website is as simple as clicking a button, with pre-import selections making it highly flexible. You can choose to import a full website (more than 109 to choose from) and parts of any other and anything in between. Choose pages, posts, portfolios, images, sliders, theme options, widgets, or uninstall as you prefer.

Avada Prebuilt Website Import

Website Structure

A page or post structure is divided into four main sections: the Header, the Page Title Bar, Content, and the Footer. With the Avada Website Builder, you can independently edit each of these sections to create super flexible and stunning layout designs.

Below is a list of the Avada Vegan Store pages and posts that have been prebuilt just for you. Once installed, you can change all aspects of each Layout, and at any time, add new pages to suit your online business needs.

Explaining Layouts & Layout Sections

Before we look at the specific Layouts on the Avada Vegan Store prebuilt website, the first thing to understand is the Layouts and Layout Sections’ architecture. You can think of Layouts as a container for the page content. In contrast, the actual content comes from the various Layout Sections. There are four Layout Sections on a page – the Header, Page Title Bar, Content, and Footer Layout Sections.

There is a default Global Layout, and any Layout Sections added to that will be shown on all pages of your website. There are Conditional Layouts with conditional logic to determine how the Layout will be used.

You can make as many Layouts and Layout Sections as you like, and you can use the Layout Sections in multiple Layouts. But you can only use a specific condition on a single Layout, so the theme knows which one to use.

See Understanding Layouts & Layout Sections and Understanding Conditional Layouts for more info.

Avada Layout Sections Legend

Explaining WordPress Pages vs. Posts

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

What Can I Change? Is the Design Flexible?

The Avada Vegan Store prebuilt website is exactly that, prebuilt, for you. If the design and style suit your website needs, you can use it as a starting point, and you can change as much or as little as you need to.

The most obvious details that you will want to change at first is the website’s wording, titles, color scheme, and images. You can choose to leave the overall layouts as is or Drag and Drop to rearrange the content’s order. Further to that, you can add or remove any of the Design Elements to fine-tune your preferred business narrative. In short, you can change every single aspect of the prebuilt website’s Layout and content.

Editing a page’s content and layouts is done using the Drag and Drop live editor or using the traditional back-end method. The first image below shows the Live visual Drag and Drop editor is used to edit the content:

Live Editor

The image below shows the traditional back-end method is used to edit the content:

Back-end Editing

A Side By Side Comparison (Builder vs. No Builder)

We have created a side by side point of reference that illustrates the differences in building a website using the Avada Website Builder to design custom Layouts vs. not using The Avada Website Builder and only using predefined options. The latter will allow you only to build a basic site, in comparison.

Exploring The Homepage Layout

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

The Header

For the Avada Vegan Store prebuilt website, the Header was created using the Avada Header Builder and is set globally across the website. This means that every page and post will use the same Header layout without any further conditions set. For example, you can change this if required by creating a unique Header layout for different pages or posts.

Avada Vegan Store Header

The Page Content

The content part of the homepage, the area between the Header and Footer, does not use a page title bar. You can change this page’s content in an infinite number of ways to best suit your business marketing and brand requirements.

Page and Post content is structured using Container and Column Elements, and if required, Nested Columns. Check out the help file links below for detailed information and videos explaining what they are and how to use them:

  • What are Containers, and how to use them? Read more here.
  • What are Columns, and how to use them? Read more here.
  • What are Nested Columns, and how to use them? Read more here.

The Hero

Avada Vegan Store Hero

Instead of using a traditional image slider, like the Avada Slider or Slider Revolution, as the above-the-fold hero section, this prebuilt site uses a single Container with a Background Image. The Container is structured using one 2/3 (66.67% width) Column holding a Title Element, a Text Block Element, and a Nested Columns Element.

Simply put, nested columns are columns within columns. This Nested Columns Elements is structured holding two Button Elements.

Features

Avada Vegan Store Features

This section was built using a Container with three 1/3 (33.33% width) Columns. Each column contains a Nested Columns Element.

The Nested Columns Elements are structured with one 25% width Column holding an Icon Element and one 75% width Column holding a Title Element and Text Block Element.

Categories

Avada Vegan Store Categories

This section was built using a Container, holding four 1/4 (25% width) Columns with each containing an Image Element and a Title Element.

New Arrivals

Avada Vegan Store New Arrivals

To create this layout, a Container with one 1/1 (100% width) Column was used. The container is structured using a Title Element and a Post Cards Element.

Vegan Meals Banner

Avada Vegan Store Vegan Meals Banner

This section was built using a Container holding one 1/1 (100% width) Column containing a Nested Columns Element.

The Nested Columns Element is structured using one 3/4 (75% width) Column holding a Title Element and a Text Block Element, followed by one 1/4 (25% width) Column holding a Button Element.

Drinks / Beverages

Avada Vegan Store Drinks Beverages

This section was built using a Container with one 30% width Column holding a Title Element and a Button Element, followed by one 70% width Column holding a Post Cards Element.

Big Day Flash Deals

Avada Vegan Store Big Day Flash Deals

This section was built using a Container with two 1/1 (100% width) Columns. The first column is structured using a Title Element and a Countdown Element, and the second holds a Post Cards Element.

Best Selling Products

Avada Vegan Store Best Selling Products

This section was built using a Container holding one 1/1 (100% width) Column with a Title Element and three 1/3 (33.33% width) Columns each containing a Post Cards Element.

Buyer Reviews

Avada Vegan Store Buyer Reviews

This section was built using a Container with one 28% width Column holding a Title Element, two Text Block Elements, and a Star Rating Element. This is followed by one 72% width Column holding a Post Cards Element.

News Articles

Avada Vegan Store News Articles

This section was built using a Container with two 1/2 (50% width) Columns holding a Title Element and a Button Element. This is followed by one 1/1 (100% width) Column holding a Post Cards Element.

Vegan Store CTA

Avada Vegan Store CTA

This section was built using a Container with a Background Image. The container is structured with one 1/1 (100% width) Column holding a Text Block Element, a Nested Columns Element, a Title Element, and a Button Element.

The Nested Columns Element is structured with one 1/1 (100% width) Column holding two Title Elements and an Image Element.

A website footer aims to help visitors by providing appropriate information and navigation options at the bottom of website pages. Website footer design is underrated and more valuable to your website than you may think and is essential to the overall end-user experience. Three key points stand out, namely:

  • A footer should provide a website visitor with additional choices. If you want people to sign up for your mailing list, view a product demo, or contact you, inviting them at the end of a scroll is a compelling call to action.
  • A footer should create a path for continued engagement by including navigation links to products, services, or other parts of your website.
  • A footer can access essential information like ways to contact your company and customer services, privacy statements, and potential legal disclaimers.

For the Avada Vegan Store prebuilt website, the Footer was created using the Avada Footer Builder and this particular Footer content and Layout is set to display globally across the website. This means that every page and post will use the same Footer layout without any further conditions set. For example, you can change this if required by creating a unique Footer layout for different pages or posts. Let us take a closer look below:

Footer Content

Avada Vegan Store Footer

The Footer section is created using two Containers structured using multiple Columns. These columns hold two Image Elements, five Text Block Elements, three Title Elements, two Menu Elements, an Avada Form Element, a Social Links Element, and a Nested Columns Element, with the use of the Dynamic Data Options to display the website information.

The Nested Columns Element is structured with one 1/1 (100% width) Column holding a Text Block Element and two Image Elements.

In Summary

There are 109 Avada prebuilt websites to choose from, with more being added regularly. Our amazing design team created these prebuilt websites as a way to give you a head start when building your next website.

You can change the styling, Layouts, content as much or as little as you need to quickly adapt any individual prebuilt site to suit your chosen niche. Get started with the Avada Website Builder today and launch your business online; Fast.

]]>
https://avada.com/blog/avada-vegan-store-deconstructing-a-prebuilt-website/feed/ 0
Avada Tattoo: Deconstructing a Prebuilt Website https://avada.com/blog/avada-tattoo-deconstructing-a-prebuilt-website/ https://avada.com/blog/avada-tattoo-deconstructing-a-prebuilt-website/#respond Tue, 30 Apr 2024 14:59:38 +0000 https://avada.com/blog//

Say hello to Avada Tattoo. This Avada prebuilt website is ideal for beginners, marketers, professionals, and anyone in between. Avada Tattoo can be imported at the click of a button and is highly flexible. Every aspect of the prebuilt website is easily customizable, and it can be adapted and branded to suit any business model or venture using the Avada Website Builder.

In this article, we will explore the header, footer, and homepage layouts that make up the overall website structure to explore how the Avada Website Builder is used to create successful websites. The Avada Tattoo article is a part of a deconstruction series and is the follow-on article that explores the Avada Dance Studio prebuilt website. It is important to highlight that Avada gives you total design freedom to create unique layouts for your website that work, with the only limit being your imagination.

Overview

Styling and Features

Creating a style guide for your website will prove to be invaluable in the future. A style guide will help you to address usability, the user experience, design consistency, and online trends in an organized and consistent manner.

The Avada Website Builder has a vast array of features and styling options; however, you do not need to use all of them for your website, and this is where your style guide comes in. Decide upfront which styling options align with your brand and which design features are needed to make your website stand out.

Performance & Optimization

Optimizing your websites for page load speed can be a seemingly complex subject because so many different facets affect how fast a page loads. It can range from the server’s speed to the options and settings selected, right through to the type and amount of content and even the size of the images added to the page or post.

The Avada Performance Wizard

The Performance Wizard takes the guesswork out of how to best optimize your Avada website. To get you started you are presented with a step-by-step interface that will guide you through the process.

Performance Wizard Start Screen

What is important to note is that you should build your website first before running the Performance Wizard. Creating your website’s structure, placing design elements in situ, and formulating content ensures that the system has something to work with when searching for recommendations at each step of the process. The recommendations provided are for options that can be disabled or enabled to enhance overall performance.

  • Features
    Disable any features not used on the website, thereby reducing the amount of code that is loaded.

  • Avada Icons
    Scan your website for information about icons that are being used. You can also disable unused icon sets and discover how to optimize existing icons.

  • Avada Fonts/Typography
    Check which fonts are being loaded on your website and then optimize how those fonts are served. Fewer variants will mean fewer requests and, therefore, faster loading times.

  • Avada Elements
    Scan your website to discover which Design, Layout, and Form Elements are not used on the website. Disable unused Elements, thereby reducing the amount of code that is loaded.

  • Optimization
    Optimize how the website’s CSS and JS assets should be enqueued. These options can have a significant impact on the performance of the page load. However, some of these options can also break functionality if you use a caching plugin, so proceed with caution.

Above The Fold Optimization

“Above the fold” is the part of a webpage that is immediately visible on your desktop or mobile screen without scrolling down. Traditionally, this digital real estate is where most would choose to display attention-grabbing headlines, important sales/marketing content, images, and even slider plugins as part of the page’s hero.

Above The Fold Optimization

The rate of content delivery for a website, and in particular the perceived speed experienced by the end-user on a mobile device, is at the heart of Google’s Core Web Vitals. Thus, passing Core Web Vitals inevitably leads to a delicate balance between good SEO, attention marketing, and page load times for a website owner.

To assist you with managing your website’s performance and optimization, our team introduced purpose-built tools and features for Avada that can make it possible for you to fine-tune your website’s performance on mobile & desktop.

Generate Critical CSS

Critical CSS is a convenient performance feature. You can enable Critical CSS by going to the Performance Wizard > Optimization tab. Once it has been enabled, you can access the Critical CSS page from the WordPress sidebar at Avada > Critical CSS or Maintenance > Critical CSS from the Avada Dashboard. Both take you to the Critical CSS page to generate Critical CSS for both pages and posts.

Critical CSS

Critical CSS is the CSS necessary to style the above-the-fold content. When generated for a page, it will be loaded into the page head, and the rest of the CSS styles moved to the footer, resulting in less render-blocking and a faster page load time.

Resources

Even with all of the performance options provided, Avada plays a lesser part than you might imagine when it comes to site optimization. Websites running Avada as the primary WordPress theme can be configured to optimize the layouts and structure that can lead to vastly improved page load scores. Still, ultimately, user content will principally dictate how fast and efficient your website will perform according to Google Core Web Vitals.

Color Palette

#89392a
#f5b997
#111111
#89392a
#f5b997
#111111
#89392a
#f5b997
#111111

The color palette selected for the Avada Tattoo prebuilt website is a set of warm colors, as seen above. If you would like to change the Avada Tattoo color palette, this can be done within the options panel, as explained in this help file and video.

Color increases brand recognition, and it can influence people in how they feel about a website. Colors produce different emotions in people, making it essential to choose the right colors for your website. The balance of white space, contrast, and well thought out color schemes are vital elements of good web design. If you have not already decided on your brand colors, choosing a color palette for your website can be confusing. However, using a handy tool like the Adobe Color Wheel or any of the myriad of app choices online, you can undoubtedly make this task effortless.

We suggest checking out HubSpot’s article on color theory.

Typography

Website Typography can be more important than you realize, from your brand and user perspective to your website’s overall look and style. It is often underrated and is, in fact, an art form and technique in itself. The following HubSpot guide to website typography will give you some great insights into the do’s and dont’s choosing which fonts work best for your Avada website.

The Avada Website Builder has a vast array of Typography controls, options, and font selections to make your job easier. See this detailed help file and video to get you started.

Below are the fonts used for the Avada Tattoo prebuilt website:

Headings

H1, H2, Font Family: Rakkas
H3, H4, Font Family: Rakkas
H5, H6, Font family: Rakkas

Body

Font Family: Poza Libre

We suggest checking out HubSpot’s article on The Ultimate List of Web-Safe HTML and CSS Fonts.

To Get Started You Will Need The Following

To get started with the Avada Website Builder and to create your ideal website, there are a few things that you will need;

Recommended Plugins

What are recommended plugins, and do you need them? In short, it is not the end of the world if you choose not to install and activate the plugins used with any particular Avada prebuilt website. Let’s take the Avada Tattoo prebuilt website as an example:

This prebuilt website was built without using any of the Avada bundled plugins.

When an Avada prebuilt website is built without using bundled plugins, you can still install and activate any of them, should it be needed for your website. Any of the prebuilt websites can be modified to fit your project needs.

World-Class Support And Resources

Many facets set the Avada Website Builder apart from the competition. None more important is that Avada is not reliant on 3rd party builders and tools to deliver a stable and seamless website building experience. No waiting for external developers and toolset creators to deliver the next update for your theme. We take pride in the fact that Avada is 100% maintained, evolved, and developed according to strict WordPress and PHP coding standards. Avada gives you peace of mind and guarantees that what you have to work with will always be ahead of the latest industry requirements.

What is a Prebuilt Website?

Simply put, prebuilt websites are complete websites that have been designed and built to fit an industry niche. Each website comprises pages, posts, content layouts, images, or various media types representing or showcasing an online presence for a target audience or business type.

Avada prebuilt websites and prebuilt content layouts (individual page or post content, layout sections, Call-to-actions, etc.) are carefully crafted by our talented team of designers to give you, the Avada user, a way to save time when prototyping a new website.

Avada’s prebuilt websites are a fantastic resource for creativity and inspiration. They will make web design a more efficient and productive process for beginners, marketers, and professionals alike. Here are some essential facts:

  • They are created to save you time when building a new website.
  • A prebuilt website can be imported with a few clicks.
  • Each prebuilt website is mobile and SEO friendly.
  • Each prebuilt website is entirely customizable to suit your project and branding needs.
  • You can white-label any prebuilt website for client work.
  • Prebuilt websites are included with your purchase of the Avada Website Builder.
  • Each prebuilt website is optimized for performance.

Fast One-Click Install

Importing any Avada Prebuilt Website is as simple as clicking a button, with pre-import selections making it highly flexible. You can choose to import a full website (more than 109 to choose from) and parts of any other and anything in between. Choose pages, posts, portfolios, images, sliders, theme options, widgets, or uninstall as you prefer.

Avada Prebuilt Website Import

Website Structure

A page or post structure is divided into four main sections: the Header, the Page Title Bar, Content, and the Footer. With the Avada Website Builder, you can independently edit each of these sections to create super flexible and stunning layout designs.

Below is a list of the Avada Tattoo pages and posts that have been prebuilt just for you. Once installed, you can change all aspects of each Layout, and at any time, add new pages to suit your online business needs.

Explaining Layouts & Layout Sections

Before we look at the specific Layouts on the Avada Tattoo prebuilt website, the first thing to understand is the Layouts and Layout Sections’ architecture. You can think of Layouts as a container for the page content. In contrast, the actual content comes from the various Layout Sections. There are four Layout Sections on a page – the Header, Page Title Bar, Content, and Footer Layout Sections.

There is a default Global Layout, and any Layout Sections added to that will be shown on all pages of your website. There are Conditional Layouts with conditional logic to determine how the Layout will be used.

You can make as many Layouts and Layout Sections as you like, and you can use the Layout Sections in multiple Layouts. But you can only use a specific condition on a single Layout, so the theme knows which one to use.

See Understanding Layouts & Layout Sections and Understanding Conditional Layouts for more info.

Avada Layout Sections Legend

Explaining WordPress Pages vs. Posts

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

What Can I Change? Is the Design Flexible?

The Avada Tattoo prebuilt website is exactly that, prebuilt, for you. If the design and style suit your website needs, you can use it as a starting point, and you can change as much or as little as you need to.

The most obvious details that you will want to change at first is the website’s wording, titles, color scheme, and images. You can choose to leave the overall layouts as is or Drag and Drop to rearrange the content’s order. Further to that, you can add or remove any of the Design Elements to fine-tune your preferred business narrative. In short, you can change every single aspect of the prebuilt website’s Layout and content.

Editing a page’s content and layouts is done using the Drag and Drop live editor or using the traditional back-end method. The first image below shows the Live visual Drag and Drop editor is used to edit the content:

Live Editor

The image below shows the traditional back-end method is used to edit the content:

Back-end Editing

A Side By Side Comparison (Builder vs. No Builder)

We have created a side by side point of reference that illustrates the differences in building a website using the Avada Website Builder to design custom Layouts vs. not using The Avada Website Builder and only using predefined options. The latter will allow you only to build a basic site, in comparison.

Exploring The Homepage Layout

Website pages are allocated for static content such as your website’s homepage, about, contact page, and so on, and are timeless entities.

Website posts are allocated to blog content listed in reverse (newest to the oldest) chronological order and are timely. Older posts are archived based on month and year. You can also create content for custom post types or CPT. In Avada, an example of this is the Portfolio post type. Check out this detailed WordPress article for more information.

The Header

For the Avada Tattoo prebuilt website, the Header was created using the Avada Header Builder and is set globally across the website. This means that every page and post will use the same Header layout without any further conditions set. For example, you can change this if required by creating a unique Header layout for different pages or posts.

Avada Tattoo Header

The Page Content

The content part of the homepage, the area between the Header and Footer, does not use a page title bar. You can change this page’s content in an infinite number of ways to best suit your business marketing and brand requirements.

Page and Post content is structured using Container and Column Elements, and if required, Nested Columns. Check out the help file links below for detailed information and videos explaining what they are and how to use them:

  • What are Containers, and how to use them? Read more here.
  • What are Columns, and how to use them? Read more here.
  • What are Nested Columns, and how to use them? Read more here.

The Hero

Avada Tattoo Hero

Instead of using a traditional image slider, like the Avada Slider or Slider Revolution, as the above-the-fold hero section, this prebuilt site uses a single Container with a Background Image. The container holds two 1/2 (50% width) Columns with the left column holding a Title Element, a Text Block Element, and a Button Element, with the right column holding a Nested Columns Element.

Simply put, Nested Columns are columns within columns. This Nested Columns Element holds four 1/2 (50% width) Columns, collectively containing two Icon Elements and two Image Elements.

Features

Avada Tattoo Features

This section was built using a Container with three 1/3 (33.33% width) Columns. Each column contains a Nested Columns Element and a Text Block Element.

The Nested Columns Element are structures with one 1/4 (25% width) Column holding an Icon Element and one 3/4 (75% width) Column holding a Title Element.

Section Separators

Avada Tattoo Separators

This section was built using two Containers, each holding one 1/1 (100% width) Column collectively containing a Section Separator Element and an Image Element.

About

Avada Tattoo About

To create this layout, a Container with one 55% width Column holding a Nested Columns Element and one 45% width Column holding a Title Element, a Text Block Element, a Checklist Element, and a Separator Element.

The first Nested Columns Element holds two 1/2 (50% width) Columns containing two Image Elements, with the second Nested Columns Element holding one 1/1 (100% width) Column containing Text Block Element.

Get A Tattoo

Avada Tattoo Get a Tattoo

This section was built using two Containers with the first holding one 1/1 (100% width) Column containing a Section Separator Element and the second has a Background Image holding two 1/4 (25% width) Columns on either side of one 1/2 (50% width) Columns holding a Text Block Elements and a Title Element.

Tattoo Styles

Avada Tattoo Tattoo Styles

This section was built using a Container holding four 1/4 (25% width) Columns, where two columns contain an Image Element and the other two columns contain an Icon Element, a Title Element, and a Text Block Element.

Artists

Avada Tattoo Artists

This section was built using two Containers with the first having a Background Image holding two 1/4 (25% width) Columns on either side of one 1/2 (50% width) Columns holding a Text Block Element and a Title Element, which is followed by one 5/6 (83.88% width) Column holding a Post Cards Element. The second Container is structured with one 1/1 (100% width) Column holding a Title Element.

Factors to Consider

Avada Tattoo Factors to Consider

This section was built using two Containers, with the first holding one 1/1 (100% width) Column containing a Section Separator Element and the second having a Background Image, holding one 2/3 (66.67% width) Column holding a Text Block Element, a Title Element and a Nested Columns Element, and one 1/3 (33.33% width) Column containing an Image Element.

The Nested Columns Element is structured with two 1/2 (50% width) Columns with the left containing a Text Block Element and a Button Element, and the right column containing a Content Boxes Element.

Reviews

Avada Tattoo Reviews

This section was built using two Containers with the first holding one 1/1 (100% width) Column containing an Image Element. The second container holds two 1/5 (20% width) Columns, each containing an Image Element, on either side of one 3/5 (60% width) Column containing an Icon Element and a Nested Columns Element.

The Nested Column is structured with one 1/1 (100% width) Column containing three Button Elements. This is followed by four 1/2 (50% width) Columns collectively holding two Image Elements, two Text Block Elements, and two Nested Columns Elements.

This Nested Columns Element is structured with one 1/5 (20% width) Column holding an Image Element and one 4/5 (80% width) Column containing two Text Block Elements and a Star Rating Element.

News & Articles

Avada Tattoo News & Articles

This section was built using two Containers with the first holding one 1/1 (100% width) Column containing a Section Separator Element and the second holding two 1/4 (25% width) Columns on either side of one 1/2 (50% width) Column containing a Text Block Element and a Title Element. This is followed by one 1/1 (100% width) Column holding a Post Cards Element.

A website footer aims to help visitors by providing appropriate information and navigation options at the bottom of website pages. Website footer design is underrated and more valuable to your website than you may think and is essential to the overall end-user experience. Three key points stand out, namely:

  • A footer should provide a website visitor with additional choices. If you want people to sign up for your mailing list, view a product demo, or contact you, inviting them at the end of a scroll is a compelling call to action.
  • A footer should create a path for continued engagement by including navigation links to products, services, or other parts of your website.
  • A footer can access essential information like ways to contact your company and customer services, privacy statements, and potential legal disclaimers.

For the Avada Tattoo prebuilt website, the Footer was created using the Avada Footer Builder and this particular Footer content and Layout is set to display globally across the website. This means that every page and post will use the same Footer layout without any further conditions set. For example, you can change this if required by creating a unique Footer layout for different pages or posts. Let us take a closer look below:

Footer Content

Avada Tattoo Footer

The Footer section is created using three Containers. The first container holds one 1/1 (100% width) Column containing a Section Separator Element, the second container holds multiple columns containing an Image Element, a Social Links Element, nine Title Elements, three Text Block Elements, a Button Element, and the Avada Form Element.

The last container is structured holding one 1/1 (100% width) Column containing a Text Block Element, with the use of the Dynamic Data Options to display the website information.

In Summary

There are 109 Avada prebuilt websites to choose from, with more being added regularly. Our amazing design team created these prebuilt websites as a way to give you a head start when building your next website.

You can change the styling, Layouts, content as much or as little as you need to quickly adapt any individual prebuilt site to suit your chosen niche. Get started with the Avada Website Builder today and launch your business online; Fast.

]]>
https://avada.com/blog/avada-tattoo-deconstructing-a-prebuilt-website/feed/ 0