How to Design WordPress Themes

You can learn how to customise and design WordPress themes in this emindsca article. emindsca theme design from scratch can be a time-consuming process that requires a significant amount of coding, but there are apps that can make the process more manageable. One such app is a WordPress plugin known as Elementor, which can be downloaded and installed directly from the WordPress dashboard.

Part 1 Installing Elementor

1. Log in to your WordPress account. As soon as you have successfully installed WordPress on your server, you can access the WordPress dashboard by entering the URL for your website in a web browser, followed by the /wp-admin prefix (for example, www.mywebsite.com/wp-admin). Then enter your username and password to complete the login process.

To learn more about how to instal WordPress on your web server, please visit this page.

2. Click Plugins. It’s in the sidebar to the left. It’s next to an icon that resembles an electric plug.

3. Click Add New. It’s in the upper-left corner of the Plugins page.

4. Type Elementor in the search bar and press ↵ Enter. This will display a list of plugins that match your search.

5. In the box that says “Elementor Page Builder,” select Install Now from the drop-down menu. Specifically, it is the plugin with a purple and pink icon with four white bars forming the shape of a capital “E.” This will enable the Elementor Page Builder plugin to be installed on your WordPress website.

6. To activate the feature, click Activate. The following button will appear next to the header in the Elementor Plugins box after Elementor has been successfully installed.

Part 2 Creating a New Page With Elementor

1. Click Dashboard. It’s at the top of the sidebar to the left of WordPress.

2. Select + Create New Page from the drop-down menu. It’s located directly across from the Elementor, beneath the header that says “Elementor Overview.” It’s in the first column, as you can see. This will open a visual page editor in a new window.

3. Click. It’s the gear-shaped icon in the lower-left corner of the sidebar, which you can access by clicking on it. The settings menu will be displayed as a result of this action.

4. Create a title for your document. Fill in the blanks below “Title” with the title of your page using the text box. The title will be placed at the top of the page to distinguish it from others.

If you don’t want to have a title, you can turn off the feature by clicking the switch opposite “Hide Title.”

5. Choose a page layout from the drop-down menu. Make your selection from the drop-down menu below “Page Layout” to create a template for your webpage.

Part 3 Selecting Default Colors

1. Click ☰. It’s in the upper-left corner of the Elementor sidebar to the left.

2. Click Default Colors. It’s the first option in the sidebar menu under the “Style” header.

3. Choose a colour scheme for your project. To choose a colour for the primary, secondary, text, and accent colours, click the boxes at the top of the sidebar that say “More Palettes.” You can also select a colour for the primary, secondary, text, and accent colours by clicking the boxes at the top of the sidebar that say “More Palettes.” To choose a colour, use the colour box at the top of the page, or type in the colour hex code in the bar at the top of the page.

4. Click Apply. It’s in the upper-right corner of the sidebar menu.

Part 4 Selecting Default Fonts

1. Click ☰. It’s in the upper-left corner of the Elementor sidebar to the left.

2. Click Default Fonts. It’s the second option under the “Style” header in the sidebar.

3. Click Primary Headline. It’s the first option in the Default Fonts menu.

4. Select a font family. Use the drop-down menu to select a font family.

5. Choose a weight from the drop-down menu. The thickness of the font can be selected from a drop-down menu. In addition, you can choose “Bold” from the drop-down menu.

6. Click Secondary Headline. It’s the first option in the Default Fonts menu.

7. Select a font family. Use the drop-down menu to select a font family.

8. Select a weight. Use the drop-down menu to select how thick the font is.

9. Click Body text. It’s the first option in the Default Fonts menu.

10. Select a font family. Use the drop-down menu to select a font family.

11. Select a weight. Use the drop-down menu to select how thick the font is.

12. Click Accent text. It’s the first option in the Default Fonts menu.

13. Select a font family. Use the drop-down menu to select a font family.

14. Select a weight. Use the drop-down menu to select how thick the font is.

15. Click Apply. It’s in the upper-right corner of the sidebar.

Part 5 Adding A Headling

1. Click outside the sidebar. This will return the sidebar to the default menu.

2. Drag the Heading square to the beginning of the section. The heading box is the box with a large capital “T” in the centre. It’s located at the very top of the sidebar menu. On the main page, the section is represented by the square with a dotted outline. This will convert the section’s heading text into heading text. The heading will be replaced by a new blank section below it.

3. Fill in the blanks with the heading. You have two options for entering the heading: either click on the heading on the main page and type the heading, or use the text box in the sidebar.

4. Choose the size of the heading. To change the size of the heading, select it from the drop-down menu next to “Size.”

You can also change the font size by dragging the HTML tag box around.

5. Alignment can be selected. To change the alignment of the sidebar menu, select one of the four squares at the bottom of the sidebar menu. You have the option of aligning the text to the left, to the centre, to the right, or to be justified throughout the section.

Changing the font or colour of the text is easy; simply click “Style” at the top of the sidebar menu and choose a different colour and font for the text to replace the defaults.

Part 6 Adding Body Text

1. To create a new section, select New Section. This will give you the option to create sections within a section if you so desire. You will be presented with a list of possible divisions for the section.

2. Select a section structure from the drop-down menu. There are a variety of ways in which you can divide the chapter. You have the option of adding multiple columns, as well as a sidebar to the left or right, or even both. Select the button with the image that most closely resembles the way you want the layout of your body text to appear on the screen.

3. Drag the Text Editor box to the section(s) where you want to add text and release the mouse button to finish. The text editor is the second box on the left-hand side of the screen. There are several lines that look like lines of text in it. You can move it to any section of the main page by dragging it there.

4. Fill in the blanks with body text. To type your body text, use the text box located in the sidebar. You can use the toolbar at the top of the text box to add bold, italics, underline, numbered and bullet lists, and hyperlinks to your text, among other things. The final button, which looks like two rectangles with boxes inside them, allows you to expand the toolbar and access additional formatting options.

Changing the font or colour of the text is easy; simply click “Style” at the top of the sidebar menu and choose a different colour and font for the text to replace the defaults.

Part 7 Adding An Image

1. Drag the Image box into a section with your mouse. The Image box is represented by an icon that looks like a picture of mountains and the sun.

2. Select an image by clicking on it. It’s the large grey box at the bottom of the sidebar. This will cause a popup window to appear.

3. Select the files you want to use by clicking Select Files. It’s the large button in the middle of the popup window that you need to click on. This will launch a file browser, which you can use to browse through and select image files.

4. Select an image file from your computer’s hard drive. Navigate to the image you want to upload and click on it using the file browser on your computer. There is a limit of 2 megabytes for file size.

5. To open the file, click the Open button. In the file browser, it’s in the lower-right corner on the left side. This will cause the image file to be uploaded and displayed in the section.

6. Make a selection for the image size. To change the image size, use the drop-down menu located beneath the image. There are a number of different sizes and dimensions to select from.

7. Alignment can be selected. To select the image alignment, use the three boxes below the drop-down menu for image size and alignment. You have the option of aligning the image to the left, centre, or right of the section you’re working on.

8. Add a caption to your picture (optional). In order to add a caption to the image, type it into the text box that appears across from the word “Caption.”

9. Add a link to your website (optional). If you want to include a link, you can do so by selecting it from the drop-down menu at the bottom of the sidebar and entering the URL or media file.

Part 8 Adding Video

1. Drag video box to section. The video box has an icon that resembles the YouTube logo.

2. Choose a video format. Make your selection from the drop-down menu next to “Video Type” by selecting either YouTube or Vimeo.

3. Include a link to a video. Copy and paste the video link from YouTube or Vimeo into the box underneath the link.

4. Make changes to the video settings. Toggle the following options on or off by pressing the appropriate buttons.

When you click on Autoplay, the video will begin to play as soon as the page loads.

When the video has finished playing, the Suggested Videos section will display a list of suggested videos.

Player Control provides the viewer with the ability to pause or resume the video, as well as to skip to specific sections of the video.

The Player Title and Actions section displays the title of the video as well as various options in the upper-right corner of the screen.

When Privacy Mode is enabled, no information about visitors will be stored.

5. Overlay an image on top of the text (optional). The “Image Overlay” button is located at the bottom of the sidebar and can be used to add an image overlay. To upload an image to be used as an overlay, first click the switch next to “Image overlay,” and then click the large grey box to the right of the switch.

Part 9 Adding Buttons

1. To create a new section, select New Section. This will give you the option to create sections within a section if you so desire. You will be presented with a list of possible divisions for the section.

2. Select a section structure from the drop-down menu. There are a variety of ways in which you can divide the chapter. You have the option of adding multiple columns, as well as a sidebar to the left or right, or even both. The button with the image that most closely resembles the way you want the layout of your buttons to be clicked will be highlighted.

3. Drag the Buttons box into a section of your choice. The Button box is represented by an icon that looks like a mouse cursor pressing a button.

4. Fill in the blanks with the button text. In the text box to the right of “Text,” type the text you want the button to display.

5. Add a link to a button. You can enter the URL of the page where you would like the button to link into the box next to “Link.”

6. Alignment of the buttons can be selected. You can align the button across the entire section using the four boxes below “Alignment.” Use the boxes to the left, right, centre, or justified to do so.

7. Choose the size of the button. You can change the size of the button by selecting it from the drop-down menu next to “Size.” You have the option of choosing extra small, small, medium, large, or extra large sizes.

8. Select button icon. Use the pulldown menu to select an icon to go next to the button text.

9. Choose the location of the icon. Using the next drop-down menu, you can choose whether the icon should be placed before or after the text.

10. Choose a button style from the options (optional). Alternatively, you can access additional styling options by selecting “Style” at the top of the sidebar. You can change the colour of the button, the text colour, and the font, as well as the border around the button, in this section.

Part 10 Adding A Divider

1. Drag the divider box into a section with your mouse. On a web page, dividers are solid lines that are used to separate sections.

2. Choose a divider style from the drop-down menu. To change the line style, use the drop-down menu next to the word “Style.” You have the option of selecting solid, double, dotted, or dashed lines.

3. Select weight. Use the slider bar under “Weight” to adjust the line thickness.

4. Select color. Click the box across from color to select the color of the line.

5. Line width can be selected. You can change how much of the section the line will take up by adjusting the slider bar below “width.”

6. Alignment can be selected. To change the line alignment, select one of the three boxes below “alignment.” You have the option of aligning it to the left, right, or centre of the section you are editing.

Part 11 Adding Widgets and Publish

1. Drag any widget to the desired section with your mouse. You can customise the sidebar with a variety of widgets, such as tabs, image galleries, social media icons, sidebars, and other elements, among others. There are numerous things to experiment with and play with.

2. To publish your work, click Publish. To access it, click on the green button in the lower left corner of the sidebar. When you have finished designing your theme and its pages, return to this page.

Creative Commons License

Visit for: |  Auto  |  Games  |  Health  |  How To  |  Latest Review  |  News  |  Sports   |  Tech  |  Outsourcing  |