Here, you can change the primary color to better fit the design. In the Style tab, you’ll notice a new option for the Drop Cap styling, which was activated when we enabled the Drop Cap in Content.Ĭhange from default to stacked, or framed. And using it together with a different text style, can further enhance your design.įor this example, I’ve already placed the text editor widget and content on the page and styled the text. Looks great!įor our next example, on this Personal Chef landing page, we’ll take a closer look at the drop cap option we saw earlier.Īdding a drop cap, can add a stylistic edge to text. We now have a two column, styled block of text. Next, set the line height, and last but not least, adjust the letter spacing, if desired.Īlternatively, you may use a previously saved global font style.įor more about Global Colors and Fonts, check out our dedicated video, linked in the description.Īnd that’s it. You can also choose from several different Transform, Style, and Decoration options. You can customize the typography options, by clicking the pencil icon. Alternatively, you can select a global color. You can use the color picker, or type in a color code. Click the color swatch to choose a color. You can change it to center, right, or justified alignment. Here, you can adjust the text alignment: by default it’s aligned left. Next, you can adjust the columns gap, which is the amount of space between each column, by using the slider or typing the exact value.
#Text editor pro full#
That’s perfect for this design, so there’s no need to change it.įor more about Responsive editing, check out our full Responsive tutorial, linked in the description below.Ĭlick the Desktop viewport icon, to go back to Desktop view. Now click to switch to mobile view, and as you can see, it’s inherited the tablet settings. In the columns setting, you can change the number of columns displayed on tablet by clicking the tablet icon and adjusting the number of columns. The presence of the viewport icon indicates that this setting may be adjusted for other devices. I’ll select a two column layout, which works well here…in our Desktop view. The text editor widget allows us to separate text into columns. I’ll leave it off for now, and we’ll go over the Drop Cap styling in the next example. Returning to the text editor, you can click this toggle to expand the toolbar for more formatting options.Īdditionally, you can click and drag the corner to expand the text editing area, which is quite helpful for larger text blocks.īelow, you can add a drop cap by toggling it on here. Select text to apply basic text formatting styles, such as bold and italic styling, list options, and more. You can make text edits right here, or directly in the Elementor Editor by double-clicking the text. For this example, there’s no need for dynamic content, so I’ll use the content I typed in before. Note that you can use dynamic content in any setting that has the dynamic tags icon displayed.
#Text editor pro update#
Update it with your own text, by typing or pasting it in.Ĭlick the Dynamic tags icon to display dynamic content, which refers to select content drawn from the website, such as from a blog post.
In the content tab is the standard WordPress editor with its visual…and text tabs.īy default, a short paragraph of placeholder text already appears here. Let’s start by selecting the Text Editor widget, located here in the Basic widgets, and dragging it into place in the Editor. In our first example, we’ll create a block of text with two columns, for a law firm. In this video, we’ll show you different examples of how you can showcase text in your website designs. The Text Editor widget is used to place, edit, and style body text on websites.īody text is required on just about every website, and with the right styling, your website text will draw your visitors’ attention, and encourage them to read on, and engage with your site. In this tutorial, we’ll explore the Text Editor widget.
0 kommentar(er)
