Saltar navegación

Where a WordPress Sites Design Comes From

A website’s design is made up of different components which work together to create the final look. Learn what they are and how to approach them.

What makes up a website’s design

A website’s design is made up of different elements:

  • Page layout
  • Typography
  • Colors
  • Images
  • Spacing

And more.

There are four things that influence the design of a WordPress site:

  • Theme
  • Customizer
  • Plugins
  • Custom CSS

Let’s go through them and see how they impact the design.

WordPress theme

A WordPress theme is the complete design of a website and includes the colors, fonts, widgets, headers, and other styling components. The theme you select is important because it dictates the way that content displays on your site, so you should choose a theme that best represents your brand.

A website using the Kadence Theme

A website using the Astra theme

Finding the right theme

Not every theme offers the same functionality. If you are looking for specific design features, such as the ability to easily adjust colors for all pages on your site, you need to check that your theme has the appropriate tag. For this case, the necessary tag is «Custom Colors».

You can find out what tags a theme has on the WordPress theme repository. Find a theme of interest and click on it. You can find its complete list of tags on the theme’s page.

Once you install a theme you can make certain changes to its styling. You can do this by using the Customizer or adding custom CSS code. And of course, Toolset allows you to style elements directly using the Block Editor’s interface.

WordPress Customizer

The Customizer is a built-in WordPress feature. It allows you to make site-wide changes without editing any code. 

For example, you can adjust the Site Title and Tagline, add Widgets to a Sidebar or Footer, and add custom CSS to your theme. 

Please note that the panels which appear on your Customizer depend on the functionalities present in your theme. 

As you make changes using the Customizer, you can view them in the preview that appears alongside it. Any changes you make can affect the rest of your site design. 

To access the Customizer, go to AppearanceCustomize.  

The theme dictates the panels available on this Customizer

Visit the official WordPress documentation to learn more about using the Customizer.

Plugins

Some plugins offer more design functionality than what comes with your theme, and so they can affect the way your content appears on the front end. You can use plugins to improve the content design or add more design options. 

For example, Toolset enables you to design your blocks individually in the Block Editor, which allows you to create different designs than your theme dictates. You can change things like colors, margins, spacing, and layout of your content.

Single item from a custom list of posts, designed using Toolset

There are also plugins that allow you to bypass design restrictions coming from your theme. For example, if you want to upload a logo but your theme doesn’t allow it, you can install a plugin that uploads your logo for you.  

Custom CSS

Cascading Style Sheets (CSS) is a language that controls how HTML elements appear on a page. Its purpose is to modify the appearance of these elements and can change their sizes, layouts, colors, fonts, and so on. 

This is an optional method for designing your website but is one of the quickest ways you can make site-wide changes. One of the benefits of CSS is that it allows you to make your site more unique because your site theme does not limit it.

Different ways of adding custom CSS

There are different ways to add custom CSS to your site.

Toolset allows you to add custom CSS directly to your Content Templates, WordPress Archives, and Views.

You can also add custom CSS using Customizer. Simply expand the Additional CSS panel. 

Finally, you can adjust the stylesheet of your site’s theme. You should never edit the theme’s CSS files directly because any theme updates will remove your custom styling. Instead, you should create a child theme.

Updated
mayo 11, 2021
  • Más información sobre este tema en los cursos de Herramientas