{"id":37729,"date":"2020-04-14T11:23:41","date_gmt":"2020-04-14T11:23:41","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=37729"},"modified":"2020-04-14T11:23:41","modified_gmt":"2020-04-14T11:23:41","slug":"design-wordpress-site-elementor-theme-style","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/","title":{"rendered":"How to Design Your WordPress Site Using Elementor Theme Style"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"37729\" class=\"elementor elementor-37729\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c2695f1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c2695f1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e05cd56\" data-id=\"e05cd56\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-34838c2 elementor-widget elementor-widget-text-editor\" data-id=\"34838c2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Usually, if you want to change your website&#8217;s global style settings, you&#8217;ll need to edit its Cascading Style Sheets (<a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4364\">CSS<\/a>) or deal with complicated theme customizer tools. Plus, if you change themes, you&#8217;ll likely have to start all over after the switch.<\/p>\n<p>Fortunately, <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\"   title=\"Elementor\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"909\">Elementor<\/a> can help you design your site easily, and preserve your stylistic choices for the long term. When using Elementor, you can manage some of the most common global settings straight from the plugin&#8217;s user panel. Those settings include:<\/p>\n<ul>\n<li>Backgrounds<\/li>\n<li>Heading and link styles<\/li>\n<li>Form fields<\/li>\n<li>Buttons<\/li>\n<li>Images<\/li>\n<\/ul>\n<p>Combine all of those elements together, and you have the foundation for a unique website design. With Elementor, you can customize each of these options in a matter of minutes. In this post, we&#8217;ll show you how to use the theme&#8217;s panel to make those changes (and don&#8217;t forget to check out our powerful <a href=\"https:\/\/elementor.com\/features\/theme-builder\/\">Theme Builder<\/a>).<\/p>\n<p>If you want to check out the video featured above, it covers the same steps we&#8217;re about to discuss here. So you&#8217;re free to follow either tutorial along as you start working on your site&#8217;s styling.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae5bf25 elementor-widget elementor-widget-text-editor\" data-id=\"ae5bf25\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/elementor.com\/blog\/customize-your-theme\/\">Learn How to Customize Your WordPress Theme With Elementor<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e61f46 elementor-widget elementor-widget-heading\" data-id=\"0e61f46\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Access and Change Elementor\u2019s Theme Style Settings (In 5 Steps)\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b35ee16 elementor-widget elementor-widget-text-editor\" data-id=\"b35ee16\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>All of the magic happens within the Elementor panel. So let\u2019s get started by looking at how to access it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f79f489 elementor-widget elementor-widget-heading\" data-id=\"f79f489\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1: Access Your Elementor Panel\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09694c9 elementor-widget elementor-widget-text-editor\" data-id=\"09694c9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can find Elementor\u2019s theme style settings by opening up the editor for any of your website\u2019s pages. Once you\u2019re in, access the menu in the top-left corner of the screen, and select the <strong>Theme Style <\/strong>option under <strong>Global Style<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-670c600 elementor-widget elementor-widget-image\" data-id=\"670c600\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/theme-style-settings-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37740\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/theme-style-settings-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/theme-style-settings-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/theme-style-settings-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/theme-style-settings-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/theme-style-settings.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1e4b77 elementor-widget elementor-widget-text-editor\" data-id=\"b1e4b77\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Before you can make any changes, Elementor will warn you that you\u2019ll need to disable its default color and font settings. Otherwise, the theme style changes you make won\u2019t stick. To disable those settings right away, click on the<strong> Elementor Settings <\/strong>link:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-243e86d elementor-widget elementor-widget-image\" data-id=\"243e86d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/elementor-settings-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37741\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/elementor-settings-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/elementor-settings-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/elementor-settings-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/elementor-settings-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/elementor-settings.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ff57d2 elementor-widget elementor-widget-text-editor\" data-id=\"4ff57d2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor\u2019s settings include options for which pages you want them to affect, as well as the default color and font choices for your site. If you disable both of those settings, Elementor will inherit the styles from whichever theme you\u2019re using instead:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91d45cc elementor-widget elementor-widget-image\" data-id=\"91d45cc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/disable-elementor-default-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37742\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/disable-elementor-default-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/disable-elementor-default-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/disable-elementor-default-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/disable-elementor-default-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/disable-elementor-default.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4ea119 elementor-widget elementor-widget-text-editor\" data-id=\"e4ea119\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>However, since you\u2019re going to override those styles using Elementor\u2019s theme settings, you don\u2019t need to worry about that. Go ahead and disable both settings, then save your changes and return to the <strong>Theme Style<\/strong> section within the Elementor panel.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7f28a2 elementor-widget elementor-widget-heading\" data-id=\"b7f28a2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Change Your Theme\u2019s Background Style\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b10fd9 elementor-widget elementor-widget-text-editor\" data-id=\"6b10fd9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>At this point, you\u2019re ready to start making changes to your site\u2019s styling. Let\u2019s start with something simple, such as changing your default background using Elementor\u2019s theme style settings.<\/p><p>If you open the <strong>Background <\/strong>tab, you can set your website\u2019s backdrop to be either a solid color or a gradient:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f050a4f elementor-widget elementor-widget-image\" data-id=\"f050a4f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/background-color-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37743\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/background-color-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/background-color-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/background-color-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/background-color-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/background-color.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e889d1 elementor-widget elementor-widget-text-editor\" data-id=\"9e889d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For our example, we decided to go with a friendly salmon pink color. If you\u2019d rather <a href=\"https:\/\/elementor.com\/blog\/responsive-image-background\/\" target=\"_blank\" rel=\"noopener\">use a background image<\/a>, you can select or upload a file by clicking on the plus (+) sign.<\/p><p>Remember that although you\u2019re looking at a single page right now, any changes you make through the <strong>Theme Style<\/strong> tab will be applied globally. If you want to see this effect in action for yourself, you can jump to another page without closing the Elementor panel.<\/p><p>To do that, click anywhere within the open page and press either the <strong>Command<\/strong> or the <strong>Control<\/strong> key plus <strong>E<\/strong>. That will trigger the Elementor search bar, which enables you to quickly find pages:<\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0b5500 elementor-widget elementor-widget-image\" data-id=\"f0b5500\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=450\/blog\/wp-content\/uploads\/2020\/04\/search-bar-1024x576.png\" class=\"attachment-large size-large wp-image-37744\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/search-bar-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/search-bar-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/search-bar-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/search-bar-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/search-bar.png 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc319ac elementor-widget elementor-widget-text-editor\" data-id=\"fc319ac\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Using this menu, you&#8217;ll be able to see the<strong> Contact Page <\/strong>with its brand new background. The same applies to any other page you visit:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8bd4dbf elementor-widget elementor-widget-image\" data-id=\"8bd4dbf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/different-page-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37745\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/different-page-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/different-page-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/different-page-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/different-page-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/different-page.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eacef3d elementor-widget elementor-widget-text-editor\" data-id=\"eacef3d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Any changes you make through the theme style settings become the default for your site. However, specific design settings for each page will still override them. To save time, we recommend setting a default background first. Then you can decide on individual choices for particular pages if needed.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-97a8e7e elementor-widget elementor-widget-heading\" data-id=\"97a8e7e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3: Tweak Your Website\u2019s Typography\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-079eaf1 elementor-widget elementor-widget-text-editor\" data-id=\"079eaf1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">The <\/span><em><span style=\"font-weight: 400\"><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"Typography\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5320\">Typography<\/a> <\/span><\/em><span style=\"font-weight: 400\">section within the <\/span><strong>Theme Style<\/strong><span style=\"font-weight: 400\"> tab covers quite a lot of ground. There, you can change your website&#8217;s default fonts and text colors. On top of switching fonts, you can tweak your paragraph spacing settings:\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3f1461 elementor-widget elementor-widget-image\" data-id=\"a3f1461\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/typography-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37746\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/typography-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/typography-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/typography-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/typography-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/typography.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b232f97 elementor-widget elementor-widget-text-editor\" data-id=\"b232f97\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you scroll down, you\u2019ll also find options to change your link and heading styles. You can set unique fonts for different levels of headings, so they stand out from the rest of the text on your pages.<\/p><p>In the example below, we switched the color of our links to red:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b160e4 elementor-widget elementor-widget-image\" data-id=\"2b160e4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/links-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37747\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/links-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/links-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/links-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/links-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/links.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ed797f elementor-widget elementor-widget-text-editor\" data-id=\"6ed797f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As a rule of thumb, you\u2019ll want links to be easy to spot. Changing their typography can accomplish that, but can also be jarring if you tend to include links within text-heavy content. However, changing your links\u2019 colors is a safe choice in most cases.<\/p><p>For all of the elements listed in this tab, you can customize their fonts, sizes, weights, and even the spacing between each letter:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf9f06e elementor-widget elementor-widget-image\" data-id=\"cf9f06e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/font-settings-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37748\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/font-settings-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/font-settings-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/font-settings-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/font-settings-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/font-settings.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1121461 elementor-widget elementor-widget-text-editor\" data-id=\"1121461\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the event that you want to tweak the settings for <a href=\"https:\/\/torquemag.io\/2015\/08\/wordpress-heading-tags\/\" target=\"_blank\" rel=\"noopener\">your site\u2019s headings<\/a>, remember that there should be a hierarchy when it comes to size. It\u2019s also a good idea for your various headings to have a similar style. That means using the same font family and colors, and reducing the size as you make your way down from H1s to lower-level headings.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d11ef0 elementor-widget elementor-widget-heading\" data-id=\"5d11ef0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4: Change Your Button Styles\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d738433 elementor-widget elementor-widget-text-editor\" data-id=\"d738433\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>No modern website is complete without buttons. With Elementor\u2019s theme styles, you can quickly <a href=\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/\" target=\"_blank\" rel=\"noopener\">customize your buttons\u2019<\/a> typography and colors, using the same types of settings we\u2019ve seen throughout the previous sections.<\/p><p>When it comes to buttons, you can set background colors, tweak typography, and choose from among multiple border types. You also get to play with simple effects, such as box and text shadows:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-759ac5b elementor-widget elementor-widget-image\" data-id=\"759ac5b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/buttons-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37754\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/buttons-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/buttons-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/buttons-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/buttons-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/buttons.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a274775 elementor-widget elementor-widget-text-editor\" data-id=\"a274775\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Since we\u2019re talking about buttons, you\u2019ll want to make sure the text they contain is easy to read. That means selecting a text color that contrasts well with the button\u2019s background. It\u2019s also a good idea to add a little padding, which is the extra space between the text and the button\u2019s border.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0a873fb elementor-widget elementor-widget-heading\" data-id=\"0a873fb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 5: Modify Your Form Field Settings\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70d127b elementor-widget elementor-widget-text-editor\" data-id=\"70d127b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you <a href=\"https:\/\/kinsta.com\/blog\/wordpress-contact-form-plugins\/\" target=\"_blank\" rel=\"noopener\">use forms on your site<\/a>, you can play around with the settings for both the text and the fields themselves. To get started, let\u2019s switch up our form\u2019s typography and colors:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-005ddb1 elementor-widget elementor-widget-image\" data-id=\"005ddb1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/form-fields-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37750\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/form-fields-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/form-fields-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/form-fields-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/form-fields-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/form-fields.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cacd686 elementor-widget elementor-widget-text-editor\" data-id=\"cacd686\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Moving on, we can change the field\u2019s border style and color as well. In our example, we set it to a red that matches the rest of our page\u2019s elements:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c2cd4e9 elementor-widget elementor-widget-image\" data-id=\"c2cd4e9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/field-color-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37751\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/field-color-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/field-color-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/field-color-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/field-color-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/field-color.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-791339f elementor-widget elementor-widget-text-editor\" data-id=\"791339f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>One fun aspect of form settings is that you can set different styles for when visitors \u2018focus\u2019 on a field by mousing over it. Once they click on the field, you can also set a transition effect. In our example below, when users click on the field, it will change the border style:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ceba51 elementor-widget elementor-widget-image\" data-id=\"9ceba51\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/focus-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37752\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/focus-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/focus-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/focus-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/focus-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/focus.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28c75bb elementor-widget elementor-widget-text-editor\" data-id=\"28c75bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Focus animations are great from a usability standpoint because they reassure users that the field is working properly. Even a subtle animation can add a unique touch. Plus, since you\u2019re working with the global theme style settings, you\u2019ll only have to configure these options once.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eea5b0b elementor-widget elementor-widget-heading\" data-id=\"eea5b0b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 6: Transform Your Image Styles\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-942552a elementor-widget elementor-widget-text-editor\" data-id=\"942552a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You might assume that there aren\u2019t many ways to style your website\u2019s images. After all, images themselves are a cornerstone of each site\u2019s unique style. With Elementor theme styles, however, you can easily add customizations such as global borders, shadows, and <a href=\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\" target=\"_blank\" rel=\"noopener\">custom CSS filters<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72b1a78 elementor-widget elementor-widget-image\" data-id=\"72b1a78\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=432\/blog\/wp-content\/uploads\/2020\/04\/images-768x432.png\" class=\"attachment-medium_large size-medium_large wp-image-37753\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/04\/images-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/04\/images-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/04\/images-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/04\/images-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1600\/blog\/wp-content\/uploads\/2020\/04\/images.png 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-953df10 elementor-widget elementor-widget-text-editor\" data-id=\"953df10\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>These options enable you to make your images really stand out. Plus, they can help you ensure that your images integrate neatly into the rest of your website&#8217;s styling.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21d9464 elementor-widget elementor-widget-heading\" data-id=\"21d9464\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">And That\u2019s It!\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-306a8d0 elementor-widget elementor-widget-text-editor\" data-id=\"306a8d0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The stylistic choices you make throughout your website will impact the way visitors feel about it. By being consistent, you tell the world: \u201cThis is my brand style, and it looks <em>good.\u201d<\/em> Of course, tweaking every single element on your website usually takes time.<\/p><p>With <a href=\"https:\/\/elementor.com\/blog\/introducing-theme-style\/\" target=\"_blank\" rel=\"noopener\">Elementor theme style<\/a>, on the other hand, you can create a consistent design quickly. Plus, these theme styles are modular \u2014 if you want to change specific settings for each page, Elementor enables you to do that as well. Those individual design choices will override the global settings, so you\u2019re in full control of how your website looks!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Elementor Theme Style allows you to customize your website easily. In this tutorial, we\u2019ll show you how to use the theme style to quickly build a unique and compelling design.<\/p>\n","protected":false},"author":122420,"featured_media":37730,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44],"tags":[79,173],"marketing_persona":[47],"marketing_intent":[49],"class_list":["post-37729","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Design Your WordPress Site Using Elementor Theme Style<\/title>\n<meta name=\"description\" content=\"Elementor Theme Style allows you to customize your website easily. In this tutorial, we\u2019ll show you how to use the theme style to quickly build a unique and compelling design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design Your WordPress Site Using Elementor Theme Style\" \/>\n<meta property=\"og:description\" content=\"Elementor Theme Style allows you to customize your website easily. In this tutorial, we\u2019ll show you how to use the theme style to quickly build a unique and compelling design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-14T11:23:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Simi Zelikovitch\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simi Zelikovitch\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\"},\"author\":{\"name\":\"Simi Zelikovitch\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c8d9279047af45cb7174f677d328d3d7\"},\"headline\":\"How to Design Your WordPress Site Using Elementor Theme Style\",\"datePublished\":\"2020-04-14T11:23:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\"},\"wordCount\":1399,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Elementor\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\",\"url\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\",\"name\":\"How to Design Your WordPress Site Using Elementor Theme Style\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png\",\"datePublished\":\"2020-04-14T11:23:41+00:00\",\"description\":\"Elementor Theme Style allows you to customize your website easily. In this tutorial, we\u2019ll show you how to use the theme style to quickly build a unique and compelling design.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png\",\"width\":1201,\"height\":629},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/category\/elementor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Design Your WordPress Site Using Elementor Theme Style\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c8d9279047af45cb7174f677d328d3d7\",\"name\":\"Simi Zelikovitch\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c9fd9755c57ca20d36099612923a73e4e94843c2aa9cd6d6dd8fb448b4a58f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c9fd9755c57ca20d36099612923a73e4e94843c2aa9cd6d6dd8fb448b4a58f5?s=96&d=mm&r=g\",\"caption\":\"Simi Zelikovitch\"},\"description\":\"Design leader in the Consumer Success team at Elementor, a UX expert with a mission to create outstanding user experience, and not a terrible basketball player.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/simi-zelikovitch\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Design Your WordPress Site Using Elementor Theme Style","description":"Elementor Theme Style allows you to customize your website easily. In this tutorial, we\u2019ll show you how to use the theme style to quickly build a unique and compelling design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/","og_locale":"en_US","og_type":"article","og_title":"How to Design Your WordPress Site Using Elementor Theme Style","og_description":"Elementor Theme Style allows you to customize your website easily. In this tutorial, we\u2019ll show you how to use the theme style to quickly build a unique and compelling design.","og_url":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2020-04-14T11:23:41+00:00","og_image":[{"width":1201,"height":629,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png","type":"image\/png"}],"author":"Simi Zelikovitch","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Simi Zelikovitch"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/"},"author":{"name":"Simi Zelikovitch","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c8d9279047af45cb7174f677d328d3d7"},"headline":"How to Design Your WordPress Site Using Elementor Theme Style","datePublished":"2020-04-14T11:23:41+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/"},"wordCount":1399,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png","keywords":["Build","Video"],"articleSection":["Elementor"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/","url":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/","name":"How to Design Your WordPress Site Using Elementor Theme Style","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png","datePublished":"2020-04-14T11:23:41+00:00","description":"Elementor Theme Style allows you to customize your website easily. In this tutorial, we\u2019ll show you how to use the theme style to quickly build a unique and compelling design.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/04\/Theme-Style-blog-covers-V2-02.png","width":1201,"height":629},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/design-wordpress-site-elementor-theme-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/category\/elementor\/"},{"@type":"ListItem","position":3,"name":"How to Design Your WordPress Site Using Elementor Theme Style"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c8d9279047af45cb7174f677d328d3d7","name":"Simi Zelikovitch","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c9fd9755c57ca20d36099612923a73e4e94843c2aa9cd6d6dd8fb448b4a58f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c9fd9755c57ca20d36099612923a73e4e94843c2aa9cd6d6dd8fb448b4a58f5?s=96&d=mm&r=g","caption":"Simi Zelikovitch"},"description":"Design leader in the Consumer Success team at Elementor, a UX expert with a mission to create outstanding user experience, and not a terrible basketball player.","url":"https:\/\/elementor.com\/blog\/author\/simi-zelikovitch\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/37729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/122420"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=37729"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/37729\/revisions"}],"predecessor-version":[{"id":92588,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/37729\/revisions\/92588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/37730"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=37729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=37729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=37729"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=37729"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=37729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}