Sections and columns in Elementor - Part 1/2

> Sections and columns

In this first part we will look at the Layout tab for both sections and columns, leaving the Editor Style tab for the second part.

What is a section?

The sections in Elementor are container type building blocks, inside the sections are the columns which is where we will finally place our layout widgets, a section always has at least one column.

Sections can be manipulated and designed through the options in the Elementor Panel on the left or by right-clicking on the Section controller and choosing from the context menu that appears.

Right-click options

If you want to duplicate a section, right-click on its section identifier Elementor section selector and click Duplicate from the context menu. You can also copy and paste a section elsewhere in the same document you are editing and even in another document (page, template, …) as long as it is from the same website, using the Copy and Paste options. You can also copy and paste just the style (without the content) from one section to another. Click Save as template to save the section as a template that can be inserted anywhere later. Clicking on Navigator here will open the Navigator already configured for that particular section. And, of course, clicking Delete here will delete the section.

Context menu Elementor section

If you click on Edit Section, the column options will be displayed in the Elementor Panel on the left with all the following options available to you.

Layout tab

Layout tab of an Elementor section

If you click on Edit Section, the column options will be displayed in the Elementor Panel on the left with all the following options available.

  1. Content Width: sets the content width to Box or Full Width. If you select Box, the default width for the content will be 1140px (this can be changed from the hamburger menu (top left) Elementor Editor hamburger menu > Site settings > Layout), although you can use the slider to set your preferred width.
  2. Column spacing: the default column spacing is 20px, but you can change it from this selector (No spacing, Narrow, Extended, Wide, Widest and Custom).
  3. Height: By default the section adjusts its height to the content, but you have two more options:
    • Fit to screen: the section is adjusted to completely fill the screen.
      • Column position: if you select Fit to screen, this other option will be displayed, allowing you to vertically align the column position (stretch, top, middle, bottom).
    • Minimum height: this option allows you to set a minimum height through the slider, but you have to take into account that if you set a value lower than the height of the content it will have no effect.
      • Column position: if you select Fit to screen, this other option will be displayed, allowing you to vertically align the column position (stretch, top, middle, bottom).
  4. Vertical alignment: allows you to set the vertical alignment of the widgets you add, but for this to make sense the height of the section must be set to Fit to screen or a minimum height greater than the height occupied by the existing content on the screen. Anyway the Column has another control equal to this one for vertical alignment that takes precedence over this one, so my recommendation for vertical alignment is to use the vertical alignment control of the column.
  5. Overflow: select how to handle content that overflows your container. The default value allows overflow. Select Hidden to hide the overflowing content. For example, using Motion Effects from the Advanced tab, content can enter from outside the column through an animation, if this control is set. Default the animated element will be displayed in its entire path, however with Hidden Overflow, we will only see the animated element in the area bounded by the column. This is shown much more clearly in the video tutorial on this topic.
  6. Stretch section: forces the section to stretch to the full width of the page using JavaScript. We will use this option only in case we have set the control at the beginning of this Content Width box to Full Width and it has no effect.
  7. HTML tag: set an HTML tag for your section, this point is developed below.

How to add HTML tags to my section and column

HTML tags are essential for the SEO of your site. Using them correctly will have a positive impact on your website traffic.

If you are editing the header, use the header

  1. Go to the settings of your Elementor section selectorsection orElementor Columncolumn .
  2. Under Layout, click the HTML Tag drop-down menu.
  3. Choose the label you want to use.
Elementor HTML tag

These are the different types of HTML tags you can choose from:

  1. <div> : defines a division. This tag allows you to group several block elements (paragraphs, headings, lists, tables, divisions, etc).
  2. <header> defines a header for a document or section. This is useful when you are creating a header template. It can contain the elements related to the header of a website such as the logo, a navigation menu, a search form, …
  3. <footer> defines a footer for a document or section. This is useful when you are creating a footer template. Represents a footer that typically contains information about the author of the website, links to legal texts and copyright.
  4. <main>: Represents the main content of a document. This content should be unique to the document, excluding any content that is repeated in other documents such as sidebars, navigation links, copyright information, site logos and search forms (unless, of course, the primary function of the document is a search form).
  5. <article>represents an independent and complementary composition to the main content of the document, for example it could be a message in a forum, a magazine or newspaper article, a blog entry, a user comment, an interactive widget or gadget, or any other element independent of the content.
  6. <section> : designed to contain a thematically defined part of a document. The contents of a section element are usually preceded by a heading. Authors usually use the section element to divide a large document into chapters, to separate the different tabs in an application or to thematically divide the sections of a document (announcements section, latest published articles section, related links section, etc.).
  7. <aside> represents a section of a page consisting of content that is indirectly related to the main content of the document. These sections are often represented as sidebars or as inserts and contain an explanation in the margin such as a glossary definition, indirectly related elements such as advertising.
  8. <nav> represents a part of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents and indexes.

Structure tab

When a section has more than one column we can use these default column layout settings, the numbers indicate the percentage of width of each column with respect to the total 100.

Regardless of the structure we select, which by default is columns of equal width, we can define the width of columns as we wish, either by dragging in the intermediate space between columns or by entering a number from the Column Width text box in the options of the Column Layout tab.

Structure of an elementor section

What is a column?

A column in Elementor is a vertical division of a section, as we have said before the columns are children of the sections, and in a section there can be from one to several columns. Columns are the final container for the widgets that will compose the layout of a document in Elementor.

If a document has more than one column, they can have equal or different widths. In the configuration box of a section, there is the tab Structure where we can select from several default options, but we can also set default widths for each column expressed in percentages of 100%. For example, we have three columns and set one at 22.5%, another at 27.5% and the last at 50%.

The height of a column is determined by the size of the section, for a column to have a height greater than its content, we must establish a minimum height or a minimum height in the section.

Right-click options

If you want to add a new column or duplicate a column, right-click on a column identifier Elementor Column Icon and choose +Add New Column or Duplicate from the context menu. You can also copy and paste a column into another section using the Copy and Paste options, or you can copy and paste just the style (without the content) from one column to another.

Clicking on Navigator will open the Navigator already configured for that particular column. And, of course, clicking Delete here will delete the column. If the section has only one column and you delete it, it will be deleted but replaced by another empty column.

Context menu Elementor Column

If you click Edit Column, the column options will be displayed in the Elementor Panel on the left with the following options available.

Layout tab

  1. Column width (%): set the width of your columns, taking into account that it is a percentage of the total which is 100%, increasing the size of a column will subtract it from the adjacent column.
  2. Vertical alignment: set the vertical alignment of the widgets contained in the column. For this alignment to make sense, two things have to happen. One that the height of the section is greater than the space occupied by the content and this is done by setting the height of the section to a size greater than that occupied by the content, either by selecting the Fit to Screen or Minimum Height option. And another one that after setting Fit to screen or Minimum height we set the Column position option to Stretch.
    • Default: widgets are aligned at the top.
    • Top: widgets are aligned at the top.
    • Medium: widgets are aligned in the middle.
    • Bottom: widgets are aligned at the bottom.
    • Middle Ingter Space: widgets start and end at the edge of the column, with equal spacing between them.
    • Spacing around: widgets are equally spaced and borders are half the size of the space between widgets.
    • Uniform spacing: widgets have the same spacing between, before and after them.Vertical column alignment
  3. Horizontal alignment: this extends the inline positioning capability and allows you to horizontally align inline widgets that are placed in the same row. So that this alignment can be done it is necessary that the widgets that we want to align have established in Advanced tab > Positioning > Width: Integrated (auto) so that the widgets do not occupy the whole width of the screen and can be aligned horizontally.Horizontal alignment columns
  4. HTML tag: sets an HTML tag for your column. Learn more about HTML tags.

Suscríbete a Elementor Academy

Subscribe and receive notices of new content

Related topics

Elementos apilados horizontalmente
Horizontally stacked elements
Sections and columns
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
Scroll to Top

Generate effective SEO texts with AI to rank your website on Google

Generating effective SEO texts is essential to position our website in Google. It is important to follow the rules and create original and interesting content, both in text and video, and to have branded profiles on social networks. We must also pay attention to the structure of the content and links, as well as the spelling quality. With keyword research, copywriting and optimization of the URL, title and meta description we can create a good SEO text. The generation of internal and external links and the analysis of results are also key to improve our strategy.

Importance of SEO positioning in Google

Positioning in Google is fundamental in any digital strategy. It is important to note that there are two different types of results: SEM results and SEO results, the latter generating an ROI of 20%.

SEM vs SEO Results

SEM results are those achieved through advertising on Google, while SEO results are those achieved by optimizing the website to appear in Google’s top search results.

20% ROI

The fact of achieving a 20% ROI thanks to SEO actions is an indicator that this strategy is very efficient compared to others.

Google standards and creativity in content creation

It is important to follow Google’s rules when creating content, however, we must not neglect creativity and originality in the creation of interesting and valuable content to improve our SEO.

Content creation for SEO

The creation of interesting and original content is key to improve the positioning of our website in Google. Here are some keys to creating effective content on different platforms.

Video content on YouTube and Instagram

Video content is becoming more and more relevant in SEO content strategy. YouTube and Instagram are two of the most widely used platforms for sharing branded videos, although each has its own particularities. It is important to take these differences into account and adapt the content according to our needs. On YouTube, for example, videos should be longer and more detailed, while on Instagram, shorter and more eye-catching videos can be used.

Brand profiles in social networks

Having a presence in social networks is essential to maintain a good SEO positioning strategy. These brand profiles must be consistent with the content of our website and be active with regular publications. In addition, it is important to use keywords in the biography and use attractive content to invite users to visit our website.

Content structure, internal links and spelling

Content structure is one of the most important elements when creating content for SEO. The title hierarchy from H1 to H4 must be taken into account and follow a logical order in the content structure. It is also essential to include both internal and external links to improve the navigation and authority of our website. Finally, we must not neglect the spelling and grammar of the content, as they can negatively affect the quality of our website and therefore harm the positioning in search engines.

Keys to good SEO copywriting

To achieve a good SEO positioning in Google and improve the traffic to our website, we must take into account certain keys in the writing of our contents. These include:

Keyword research

Before writing SEO copy it is important to do keyword research. We must choose those words that are related to our content and that have a high search volume but at the same time have low competition. This will help us to better position our content in search results.

Text structure and linkbuilding

The structure of the text is key in writing a good SEO text. We must structure it with H2, H3 and H4 subtitles and use internal links that redirect to other contents of our website and external links to other sources of information related to our sector. This will contribute to increase the authority of our website and improve our positioning.

URL, title and meta description writing and optimization

The wording of the URL, the title and the meta description of our content are also important factors in SEO positioning. We must create a simple and descriptive URL, a catchy title and a meta description that summarizes the content clearly and concisely. In addition, we must include in them our keywords in a natural and coherent way.

We should not be overly obsessed with optimization per se, but focus on creating valuable, interesting and compelling content for our audience. All this will help us to improve our SEO positioning in Google and to generate quality visits to our website.

Internal and external link generation and results analysis

The generation of internal and external links is essential to improve the SEO of our website. Internal links help to distribute the value of the pages of our website, which improves the SEO of all of them, while quality external links bring authority and relevance to our website, which helps it to rank better.

Analysis through tools such as Google Analytics and Search Console

To measure the success of our SEO strategy we must analyze the data obtained through tools such as Google Analytics and Search Console. These tools allow us to know the traffic of our website, its origin, the keywords used by users, the average duration of the visit, among other aspects. In this way, we can detect and correct possible errors that are affecting our position in Google. In addition to these tools, there are other advanced options that allow us to improve the efficiency of our SEO strategy. Some of them are Ahrefs, Moz or SEMrush, which offer detailed statistics on the performance of our page and allow us to know in depth the competition.

SEO content writing services

If you don’t have enough time or resources to create quality SEO content, there are SEO content writing services that can help. These services have teams of professionals who are responsible for creating SEO-optimized content that meets all standards and is attractive to users. In addition, these services can help you research keywords, generate links and optimize your URLs, titles and meta descriptions, among other things. With the help of these services, you can significantly improve the position of your website in Google and increase traffic and quality visits.

Tips to improve the SEO positioning of our website

To improve the SEO positioning of our website, it is important to follow certain tips to achieve greater success in Google:

Think SEO when writing texts

It is essential to keep keywords and SEO optimization techniques in mind when writing any type of content, never forget this.

Knowing our target audience

It is important to know our target audience in depth, to know their needs, their interests and their behavior, so we can create content that is attractive to them.

Image optimization

Images are an important factor in SEO positioning, as they can attract users and improve the duration of their visit on our website. It is necessary to optimize the images in terms of size and weight and choose appropriate file names with the keywords of our niche.

Quality design and content

We must take care of the design of our website so that it is attractive and easy to use for the user, so that they spend more time on it. In addition, the content must be interesting and relevant to have a chance of being shared on social networks.

This is a pop-up message

Elementor has a popup message builder that you can find in the Templates menu.

Plantillas > Mensajes emergentes


Enter your access data